Contest app as Facebook canvas application

Use power of Facebook and activate contest within Facebook.com. This solution is recommended for long competitions.

When the contest is used as app then it's displayed with Facebook header and sidebar.
Application icon could be displayed on the right in My Apps box and on user's homepage on the left on applications list.

Canvas app would be available in search results and in Facebook app centre.

There is Invite friends link in main menu available for users that sign up with Facebook. When the App on Facebook is activated then invited friends would be always directed to this app.

See example:

Special requirements for Facebook applications

To run a contest on Facebook just set up a contest on competizer platform the same way as website contest. 
Just remember about those details:

Look&feel

  • Contest on Facebook could be displayed in a fluid layout (for the full available width of the screen), but not less that 760px frame. On the right there will be always the column from Facebook with ads and other stuff.
  • Max entry width that would fit Facebook layout is 730px.

Setup

  • Set up Internet Address under your custom domain or demo.competizer.com 
    It will be necessary to enable mobile Facebook users to see posts in mobile Facebook application and enter contest via mobile browser (as Facebook mobile application doesn't serve apps).
  • Make all external links to be opened in new window (ie. links to your site, links on banners etc.).
    If you edit links in source mode apply target property:
    <a href="http://www...." target="_blank">Link</a>
    This is necessary as facebook application is displayed as iframe and you don't want to open those links under Facebook...
  • Don't use external layout if you want to use contest as application on Facebook. 

Legal

  • In rules add acknowledgment that the promotion is in no way sponsored, endorsed or administered by, or associated with, Facebook.
  • Disclosure that the participant is providing information to you (an organizer) and not to Facebook.

 

Basic steps

Competizer doesn't require access to your Facebook admin account, so you can feel confident and safe. The application that you will use will be your own, so you would be able to use all customization and branding options provided by Facebook for applications. All you need to do is:

  1. Integrate with Facebook: 
    Sign in on Facebook and create new app. 
    When you are ready copy and paste application identification numbers to competizer.
    (It's compulsory for all contests, even if not run as contest on Facebook).
  2. In Facebbok for developers set up contest as App on Facebook.
  3. Set up app in Competizer.
  4. Test, promote the contest, follow statistics.

How to do this? Find detailed step by step instructions below.

To go smoothly through all steps I'll give you advice:
Keep one browser window with Facebook settings opened and the second with the admin for Competizer and switch between those windows while following next steps.

 

I. Integrate with Facebook

Sign in on Facebook and create new app.

When you are ready copy and paste application identification numbers to competizer.

Read this tutorial to find out how to do this step by step.

  1. Please note: you must have verified your Facebook personal user account to create apps on Facebook. 
    Click here for more information on verifying your account.
  2. Go to https://developers.facebook.com/apps
  3. Click on "Add a New App" button.
  4. In the form that will appear type "Display name", it could be a competiton title or domain name.
  5. Add contact email and choose category Promotions and Contests (or other).
  6. Then...

    and..
    1. Choose Settings.
    2. Below the form click on "+Add Platform" and add Website.
    3. Provide your contest Site Url starting with http://
    4. Add App Domain - the same domain, but without http://
    5. Optionally add links to Privacy Policy and T&C (you can also add them later). 
    6. Save Changes
  7. Facebook generated special account for you with unique App ID and App Secret.
    Apply Facebook integration settings in competizer, which are available:
    • on the level of one contest in Setup&edit > Main > Internet address > Facebook integration settings
    • if you are going to use one domain for multiple competitions you can add it once. If you are site admin, go to Company setup > Domains and edit or add new domain. There are also Facebook integration settings.

      Copy codes from Facebook for developers and paste in Facebook integration settings in Competizer as follows:
    • Find App ID and paste in Competizer Facebook integration settings into Application ID. Then copy App Secret


      and paste it to Application secret:

      And Save.

  8. On Facebook go to App Review and switch the app to public.

 

Now your contest is integrated with Facebook, which means that users may sign in with Facebook.

Entries in the contest could be shared, commented and liked. All those actions could be displayed on user's wall. Check here how to customize shared entries descriptions and image.

II. Set up contest as App on Facebook

  1. Go to Competizer admin, find Summary of the contest. Here you can find addresses and other settings that would be used to set up tab on Facebook as listed below:

    Example:
    Summary for settings in Facebook
     
  2. Go to https://developers.facebook.com/apps, find your contest app and click on Edit app, then:
    • add Namespace - the name, that will be displayed in internet address for the application. Namespace can only contain lowercase letters, dashes and underscores.

      Then:
    • turn on App on Facebook
    • add Canvas URL starting with http://
    • add Secure Canvas URL starting with https://
      Make sure there are any empty spaces before or after those URLs!
    • set width to fluid
    • set height to fixed at 800px (it will addjust to contest height anyway).

       
    • Activate Mobile Web to make contest application available also in mobile Facebook application.
      Assign contest URL (start with http://).

  3. Save Changes.
  4. As your app is going to be displayed on different listings optionally add some more icons and banners in App Details (worth doing for big or long-lasting contests):
     

 

III. Set up Facebook Canvas app as default contest address

  1. In Facebook for developers in Basic Settings of the app find application Namespace and copy it.
  2. Go to Competizer admin to Setup&edit > Main > Internet Address and click on add another internet address.
    Scroll down to Facebook > App on Facebook
    Fill in Namespace after http://apps.facebook.com/
  3. For the app address check: Default 
    It will redirect users that would find any post or ad to your contest on Facebook.
  4. Add Application ID and Application secret
  5. On the same page in admin go to your www address settings and check:
    Use for sharing and mobile devices
    Then in some cases (ie. when exact internet address is displayed on shared post or if user goes to the contest from the post in mobile FB app) this address will be used.
    (If you don't provide your own domain then optionally use your free client.demo.competizer.com domain for sharing and mobile devices).
  6. Save

IV. Test, promote the contest, follow statistics.

In the contest Summary you can find list of Online links:

  • Promote this address - it should be your domain (follow instructions in admin if not set yet). If you use redirection for main domain you can promote main domain instead. 
    Use this address to promote the contest on your website, on Facebook, in advertisements.
  • Default address - it's where you want to direct your users: it could be contest on Facebook or your domain.
  • System address - this address would be always available, even if you wouldn't set up your domain, so you can use it for testing purposes.

Test

Check how the layout behaves on wide screen and on small one (make your browser window narrower) especially if you use custom header, header banners or many items in the right column.

Follow statistics

Facebook provides detailed analytics about the demographics of your users and how users are sharing from your contest whether they sign up with Facebook or only like, share or comment with Facebook on the contest website or within Facebook app.

These reports include rich data about users sharing content within Facebook and other Facebook-enabled apps no matter where those activity originated. For example, if a user puts a URL from your contest into a Facebook status message, that data is included in the analytics.

Facebook statistics include:

  • Daily, weekly, and monthly active users, app growth by number of new users, and overall user demographics: gender and age, countries, towns/cities, language
  • See how people react to the stories your app publishes via the Open Graph API on timeline and news feed on the web.
  • Clicks to apps on Open Graph or stream published stories made by users on mobile devices
  • and many other.

To find all stats go to https://developers.facebook.com/apps and choose your app (if you have few of them). On the dashboard you can see some basic Insights. If you want to go to the details click on See all link on the right.

App statistics