HOW TO: Create a Custom Facebook App for your Strutta Power Promo
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 18,822 views

Why create a Custom Facebook App for your Strutta Power Promo? ...

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

Statistics

Views

Total Views
18,822
Views on SlideShare
3,093
Embed Views
15,729

Actions

Likes
1
Downloads
35
Comments
0

10 Embeds 15,729

http://support.strutta.com 14781
http://www.strutta.com 867
http://translate.googleusercontent.com 34
http://staging.strutta.com 20
http://localhost 9
http://webcache.googleusercontent.com 7
http://resources.strutta.com 4
http://dummy.dev 4
http://marketing.strutta.com.s3-website-us-west-2.amazonaws.com 2
http://qauser.dev02.office.mbira.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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. | How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 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 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 | 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’. Strutta | How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 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. Strutta | How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 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. Strutta | How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 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 Strutta | How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 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 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 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. • 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 | How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 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 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 Tip: The only difference between a URL and Secure URL is the 's' in http vs. https Once you have completed and saved • 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 the settings in this section, skip to page 16 of this guide to set up your Facebook Auth Dialog settings. Strutta | How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 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 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. • 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. Strutta | How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 12
  • 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 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: 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) Strutta | How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 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 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. 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. • 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 | How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 14
  • 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. Website > Site URL • Enter: http://iframe-[YOUR_PROMO_ID].strutta.com Ex. 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 Tip: The only difference between a URL and Secure URL is the 's' in 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 Strutta | How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 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 filled in on this page. Please do not press the ‘Submit App Details Page’ button. Custom image size 75 x75 pixels Strutta | How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 16
  • 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. 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. | How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 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. Strutta | How To: Create A Custom Facebook App | Contact us | @strutta | Strutta on Facebook | 18