Embed Size (px)
DESCRIPTION
Why create a Custom Facebook App for your Strutta Power Promo? This PRO Package feature allows you to gain Facebook Insights on the App’s activity & deliver a more consistent and branded user experience. More at http://strutta.com
Citation preview
How ToCreate a Custom
Facebook App for your Strutta promotion
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook |
1.877.477.5717 2
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
Strutta
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook |
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.
Strutta
Facebook Page (Tab) 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.
Facebook Canvas App
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.
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.
These are the two Facebook options:Real-time activity feed and friends
Recent Facebook Apps used, ads
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 4
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.
Strutta
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
These are the two web-based options:
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 5
In Your Strutta Power Promos BuilderYour Strutta Power Promos Builder is accessible at http://strutta.com
To connect your Strutta promotion site with a Custom Facebook App, you must first 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’.
Strutta
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 6
Setting Up Your Custom Facebook AppYou’ll be directed to the Facebook Manager section of your Account Dashboard from your Power Promos Builder to set up your custom Facebook App.
Strutta
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’.
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 7
In Facebook DevelopersGo to Facebook Developers > Apps at http://facebook.com/developers
Strutta
You can create a Custom Facebook App at any point while you work through your Strutta Promotion Builder.
The Set Up1. Click “ + Create New App” button (top right).2. New App > Enter your ‘App Display Name’ AND ‘App Namespace’ (You can update
this later).3. Complete the security check.4. 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.
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 8
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
•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.
Strutta
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.
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 9
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
•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
•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
Strutta
Tip: The only difference between a URL and Secure URL is the 's' in http vs. https
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.
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 10
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 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
•App Display Name: Your App’s name.•App Namespace: N/A - Leave blank. •Contact Email: For important
communication related to your app.•App Domain: strutta.com•Sandbox mode: Disabled.
Learn more about sandbox mode here.
Strutta
Note: Please ensure sandbox mode in the Custom App settings is disabled before launching your promotion.
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.
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 11Strutta
Tip: The only difference between a URL and Secure URL is the 's' in http vs. https
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.
Website > Site URL
•Enter: http://fb-[YOUR_PROMO_ID].strutta.comEx. http://fb-123456.strutta.com
Settings > Basic > Page Tab > Page Tab Name
•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
•Enter: fb-[YOUR_PROMO_ID].strutta.com/facebook/tab/appEx. Page Tab URL: http://fb-123456.strutta.com/facebook/tab/app AND Secure Page Tab URL: https://fb-123456.strutta.com/facebook/tab/app
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
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 12
Standalone Microsite: Basic Settings (1/2)Here are the basic settings for your Custom Facebook App when launching a Standalone Microsite with Strutta.
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
•App Display Name: Your App’s name.•App Namespace: N/A - Leave blank.•Contact Email: For important communication
related to your app.•App Domain:
Enter: [YOUR_DOMAIN.EXTENSION]Ex. yourdomain.com
•Sandbox mode: Disabled.
Learn more about sandbox mode here.
Note: Please ensure sandbox mode in the Custom App settings is disabled before launching your promotion.
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.
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 13Strutta
Tip: The only difference between a URL and Secure URL is the 's' in http vs. https
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.
Standalone Microsite: Basic Settings (2/2)Here are the basic integration settings for your Custom Facebook App when launching a 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
Settings > Basic > Page Tab > Page Tab Name
•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
•Enter: site-[YOUR_PROMO_ID].strutta.com/facebook/tabEx. 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)
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 14
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 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
•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•Sandbox mode: Disabled.
Learn more about sandbox mode here.Strutta
Note: Please ensure sandbox mode in the Custom App settings is disabled before launching your promotion.
We are 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.
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 15Strutta
Tip: The only difference between a URL and Secure URL is the 's' in http vs. https
Website > Site URL
•Enter: http://iframe-[YOUR_PROMO_ID].strutta.comEx. http://iframe-123456.strutta.com
Settings > Basic > Page Tab > Page Tab Name
•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
•Enter: iframe-[YOUR_PROMO_ID]./facebook/tabEx. Page Tab URL: http://iframe-123456.strutta.com/facebook/tabAND Secure Page Tab URL: https://iframe-123456.strutta.com/facebook/tab
Website Embed (Iframe): Basic Settings (2/2)Here are the basic integration settings for your Custom Facebook App when launching a Facebook Canvas App with Strutta.
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 16Strutta
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.
The settings outlined above are the only details that need to be filled in on this page. Please do not press the ‘Submit App Details Page’ button.
Facebook App Details Settings
Tip: Customize the Facebook app logo:
Facebook Developers > App > Settings > Auth Details > Primary Icons
Custom image size 75 x75 pixels
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 17
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.
Facebook Auth Dialog Settings (Example)These settings are applicable to all site types. When a user first 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.
Learn more about why we ask for each permission here.
Learn how to delete an application from your Facebook account here.
| How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 18
Launch & Install Your Tab on Your PageCongrats 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!
Strutta
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.
