HOW TO: Create a Custom Facebook App for your Strutta Power Promo

How To

Create a Custom
Facebook App for your
Strutta promotion

Why create a Custom Facebook App for your Strutta Power Promo contest
or sweepstakes? This PRO Package feature allows you to gain Facebook
Insights on the App’s activity and deliver a more consistent and branded
user experience.
How To Guide Contents
Before You Create Your Custom Facebook App page 3
In Your Strutta Power Promos Builder page 5
Setting Up Your Custom Facebook App page 6
In Facebook Developers page 7

Facebook Canvas App Settings page 8

Facebook Tab App Settings page 10

Standalone Microsite Settings page 12

Website Embed (Iframe) Settings page 14

Facebook Auth Dialog Settings page 16

One Last Step: Install Your App page 17

| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook |

Strutta
1.877.477.5717

2

Before You Create Your Custom Facebook App
You need to know what type of Strutta promotion site you’ll be launching. Your Custom
Facebook App settings and permissions will differ depending on what type of site you run.
There are four site types to choose from when launching a Power Promos contest or
sweepstakes: two Facebook options and two web-based options. Select the channel that will
best serve your campaign goals and engage your community.

Recent Facebook Apps used, ads

These are the two Facebook options:

Real-time activity feed and friends

Facebook Page (Tab) App

Facebook Canvas App

Launch an app directly on your Facebook
Page. This is the most popular Facebook
option as it is most tightly integrated with
your Page. Page tabs are 810 pixels wide.

Launch a full canvas app on Facebook.
This option is best if you wish to allow
users to access your promotion on a
mobile device, however, it takes one click
extra click to access it from your
Facebook Page. Canvas pages are 760
pixels wide.


Strutta
1.877.477.5717

3

Before You Create Your Custom Facebook App
You need to know what type of Strutta promotion site you’ll be launching. Your Custom
Facebook App settings and permissions will differ depending on what type of site you run.
These are the two web-based options:

Standalone Microsite
Launch a free-standing branded site. This
option is perfect if you’re looking to design
a unique user experience, set a custom URL
(PRO Package feature) and allow users to
access your promotion on a mobile device.
Standalone microsites are 720 pixels wide

Website Embed (Iframe)
Launch an HTML iframe that is embedded
directly within a page of your website.
This option is ideal if you’re looking to
drive traffic to your website, keep full
website navigation, and maintain ad
space. The iframe is 720 pixels wide by

Strutta | How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook |

4

In Your Strutta Power Promos Builder
Your Strutta Power Promos Builder is accessible at http://strutta.com
To connect your Strutta promotion site with a Custom
Facebook App, you must ﬁrst connect your Facebook
account to Strutta. You will be directed to ‘Connect’ in
Step one below. You can access this page manually in
the Facebook Manager section of your Account
Dashboard.
All sites - In Your Promotion Builder:
Application > Integration > Facebook Page
1. Select your Facebook Page from the list.
2. Click ‘Add your Facebook Page’ if it’s not
listed.
Facebook Apps (Page or Canvas) sites:
Application > Integration > Facebook Login
1.
Click ‘Custom App’.
Standalone Microsite or Website Embed (Iframe)
sites:
Application > Integration > Facebook Log-in
1.
Click to enable Facebook login
2.
Click ‘Custom App’
3.
Click ‘Add your Custom Facebook App’.


5

Setting Up Your Custom Facebook App
You’ll be directed to the Facebook Manager section of your Account Dashboard from your Power
Promos Builder to set up your custom Facebook App.
Follow the steps listed here
and remember to save your
settings.
Again, your Facebook account
must be connected to Strutta
in order for your custom
Facebook Apps to appear here
(you can verify this in the
Facebook Manager section of
your Account Dashboard).
After you have created the
custom app in Facebook, the
app will become available for
you to add. Click refresh if you
don’t see it listed.
Note: You can access this page
directly by going to the
Facebook Manager section of
your Strutta Account
Dashboard > Click ‘Add
Custom App’ > Select your
campaign and click ‘Continue’.


6

In Facebook Developers
Go to Facebook Developers > Apps at http://facebook.com/developers

You can create a Custom Facebook App at any point while you work
through your Strutta Promotion Builder.
The Set Up
1.
2.
3.
4.

Click “ + Create New App” button (top right).
New App > Enter your ‘App Display Name’ AND ‘App Namespace’ (You can update
this later).
Complete the security check.
Set up your Custom Facebook App...

The settings required for a Custom Facebook App in each promotion site type with Strutta are
broken down in the next few pages of this guide (pages 8-17).
Note: [YOUR_PROMO_ID] is the number assigned to your Power Promos Campaign with
Strutta. Find it in your campaign’s builder URL or in your campaign’s ‘Info’ section in your
Account’s ‘Build & Edit’ list.

7

Facebook Canvas App: Basic Settings (1/2)
Here are the basic settings for your Custom Facebook App when launching a Facebook Canvas
App with Strutta.
Basic
•App icons: Click the placeholder icons
to edit. These icons will appear
throughout Facebook: in the App
permissions dialogue & search results
•App ID: This is your App’s unique
Facebook App ID.
•App Secret: Take note of this value to
connect your custom Facebook App
with your Strutta Power Promo.

Basic Info
Note: Please ensure sandbox mode in the Custom App
settings is disabled before launching your promotion.
Learn
We’re providing you with the details required to launch
a promotion with Strutta. Please consult Facebook’s
documentation on creating a custom Facebook App for
further support on additional settings.

• App Display Name: Your App’s name.
• App Namespace: This will also be part of
your Facebook's Canvas Page URL.
• Contact Email: For important
communication related to your app.
• App Domain: N/A - Leave blank.
• Sandbox mode: Disabled.
Learn more about sandbox mode here.


8

Facebook Canvas App: Basic Settings (2/2)
Here are the basic integration settings for your Custom Facebook App when launching a
Facebook Canvas App with Strutta.
Settings > Basic > App on Facebook > Canvas URLs
• Enter: http://fb-[YOUR_PROMO_ID].strutta.com/
AND https://fb-[YOUR_PROMO_ID].strutta.com/
• Ex. Canvas URL: http://fb-123456.strutta.com/
& Secure Canvas URL: https://fb-123456.strutta.com/
Settings > Basic > Mobile Web
• Enter: http://fb-[YOUR_PROMO_ID].strutta.com or https://
Settings > Basic > Page Tab > Page Tab Name

Tip: The only difference between
a URL and Secure URL is the 's' in
http vs. https

• Your Page Tab Name should be short & relevant. It will
appear on your Facebook Page, in the Apps list (in the left
column).
• Ex. 'Canadian Tux Contest' OR 'Enter to Win' OR 'Win
$10,000!’
Settings > Basic > Page Tab > Page Tab URLs

Once you have completed and saved
the settings in this section, skip to
page 16 of this guide to set up your
Facebook Auth Dialog settings.

• Enter: fb-[YOUR_PROMO_ID].strutta.com/facebook/tab
• Ex. Page Tab URL: http://fb-123456.strutta.com/facebook/
tab
AND Secure Page URL: https://fb-123456.strutta.com/
facebook/tab


9

Facebook Page (Tab) App: Basic Settings (1/2)
Here are the basic settings for your Custom Facebook App when launching a Facebook Page
(Tab) App with Strutta.
Settings > Basic
•App icons: Click the placeholder icons
to edit. These icons will appear
permissions dialogue & search results
Facebook App ID.
•App Secret: Take note of this value to
connect your custom Facebook App
with your Strutta Power Promo.
Settings > Basic Info
Note: We’re providing you with the details required to
launch a Power Promo with Strutta. Please consult
Facebook’s documentation on creating a custom
Facebook App for further support on additional
settings.

• App Namespace: N/A - Leave blank.
• Contact Email: For important
communication related to your app.
• App Domain: strutta.com


10

Facebook Page (Tab) App: Basic Settings (2/2)
Here are the basic integration settings for your Custom Facebook App when launching a Facebook
Page (Tab) App
Website > Site URL
• Enter: http://fb-[YOUR_PROMO_ID].strutta.com
Ex. http://fb-123456.strutta.com
column).
$10,000!’
http vs. https


• Enter: fb-[YOUR_PROMO_ID].strutta.com/facebook/tab/
app
Ex. Page Tab URL: http://fb-123456.strutta.com/
facebook/tab/app
AND Secure Page Tab URL: https://
fb-123456.strutta.com/facebook/tab/app



11

Standalone Microsite: Basic Settings (1/2)
Here are the basic settings for your Custom Facebook App when launching a Standalone
Microsite with Strutta.
Settings > Basic
•App icons: Click the placeholder icons to edit.
These icons will appear throughout Facebook:
in the App permissions dialogue & search
results.
•App ID: This is your App’s unique Facebook
App ID.
•App Secret: Take note of this value to connect
your custom Facebook App with your Strutta
Power Promo.
Settings > Basic Info

We’re providing you with the details required to launch
a Power Promo with Strutta. Please consult Facebook’s

• App Namespace: N/A - Leave blank.
• Contact Email: For important communication
related to your app.
• App Domain:
Enter: [YOUR_DOMAIN.EXTENSION]
Ex. yourdomain.com


12

Standalone Microsite: Basic Settings (2/2)
Standalone Microsite with Strutta.
Website > Site URL
If launching as a Strutta.com sub-domain...
• Enter: http://[YOUR_SUB_DOMAIN].strutta.com
• Ex. http://mycontest.strutta.com
If launching as a custom domain or sub-domain...
• Enter: http://[YOUR_DOMAIN].com
• Ex. http://yourdomain.com

http vs. https

column).
Ex. 'Canadian Tux Contest' OR 'Enter to Win' OR 'Win
$10,000!’


• Enter: site-[YOUR_PROMO_ID].strutta.com/facebook/tab
Ex. URL: http://site-12345.strutta.com/facebook/tab
AND Secure URL: http://site-12345.strutta.com/
facebook/tab
Settings > Basic > Page Tab Width
• Select: Wide (810 px)


13

Website Embed (Iframe): Basic Settings (1/2)
Here are the basic settings for your Custom Facebook App when launching a Facebook Canvas
App with Strutta.

Basic
•App icons: Click the placeholder
icons to edit. The icon will appear
permissions dialogue & search
results
Facebook App ID.
•App Secret: Take note of this value
to connect your custom Facebook
App with your Strutta Power
Promo.
Basic Info

We are providing you with the details required to launch
a Power Promo with Strutta. Please consult Facebook’s

• App Display Name: Your App’s
name.
• App Namespace: This will also be
part of your Facebook's Canvas Page
URL.
• App Domain: strutta.com


14

Website Embed (Iframe): Basic Settings (2/2)
Facebook Canvas App with Strutta.
Website > Site URL
• Enter: http://iframe-[YOUR_PROMO_ID].strutta.com
Ex. http://iframe-123456.strutta.com
column).
$10,000!’
http vs. https

• Enter: iframe-[YOUR_PROMO_ID]./facebook/tab
Ex. Page Tab URL: http://iframe-123456.strutta.com/
facebook/tab
AND Secure Page Tab URL: https://
iframe-123456.strutta.com/facebook/tab


15

Facebook App Details Settings

Facebook Developers > App > Settings
> App Details
Customize your Facebook app details.
The auth dialog has one pop-up
screen (preview the auth dialog on
page 17). This screen includes:
• Privacy Policy* URL (Mandatory)
• Terms of Service* URL (Mandatory)
* All custom Facebook Apps must
include a link to a Privacy Policy and
the Terms of Service.
* You can use Strutta’s Privacy Policy &
Terms of Service or provide your
own.
* Facebook apps that do not include
these two URL’s may be removed by
Facebook.

Tip: Customize the Facebook app logo:
Facebook Developers > App > Settings >
Auth Details > Primary Icons

The settings outlined above are the
only details that need to be ﬁlled in on
this page. Please do not press the
‘Submit App Details Page’ button.

Custom image size 75 x75 pixels


16

Facebook Auth Dialog Settings (Example)
These settings are applicable to all site types. When a user ﬁrst participates (submits, votes or
comments) in your promotion (Facebook Canvas App, Facebook Page (Tab) App, Standalone
Microsite or Website Embed), they must approve the app through Facebook’s auth dialog.
Strutta-powered Facebook Apps
(PromosApp & Custom Apps) may ask
for:
• Your Public info (Mandatory)
• Your e-mail address
(Mandatory)
• Your likes (Only if you set
Mandatory Liking)
• Your photos (Only if you are
running a photo contest)
* Strutta will never automatically post
to a users Timeline.
Learn more about why we ask for each
permission here.
Learn how to delete an application from
your Facebook account here.


17

Launch & Install Your Tab on Your Page
Congrats on creating a custom Facebook App for your Power Promo! Once you’ve successfully
linked your custom Facebook App with your Strutta Power Promo (see page 6), and built out
your campaign, you’re ready to launch!
Once you have published your promotion you’ll be directed to the Facebook Manager
section of your Strutta Account Dashboard for installation! If you don’t install your
campaign at launch, you can always do it later.

Here’s how:
1.

Go to the Facebook Manager
section of your Strutta Account
Dashboard.

2.

Click ‘Connect’ to synch your
Facebook with Strutta

3.

In the left column, click the
Facebook Page you want to install
your app to.

4.

Click ‘Install A Tab Here’.

5.

Select the Power Promo to install a
Tab for and add it to your
Facebook Page!

Thanks for working with Strutta!
Find more help, tips and guides in our FAQs.

18

HOW TO: Create a Custom Facebook App for your Strutta Power Promo

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (20)

Destaque

Destaque (20)

HOW TO: Create a Custom Facebook App for your Strutta Power Promo