Saturday, August 06, 2011

Create a Facebook app using Google Sites

Here is a really simple way to create a Facebook application using Google Sites.

Note: If you have your own web-page, you can use it instead of Google Sites. I am using Google Sites to host the page that will be shown as a Facebook app.

What you need:

  1. Google Sites subscription: http://sites.google.com/
  2. Facebook Developer app subscription: https://developers.facebook.com/apps
    1. You need to verify your account before you can create your Facebook app.

Steps:

  1. Create a Google site using the blank template:
    1. Click the “Create New Site” button
      image
    2. Choose the blank template and leave all other options at their default values.
      Click create site.
      image
    3. Once the site has been created, you need to set the width of the page:
      Go to the Manage Site option (under More Actions).
      image
    4. Select “Site Layout”
      Click the “Change site layout” button
      Change the site width to 700px (this is what I found was the optimum width for the site without any side-bars)
      Uncheck the “Sidebar” checkbox
      image
      Click Ok
      Click the Save Changes button.
    5. Click on the “Return to site” link (top left)
    6. Your home page should now display with the selected width. Add some content to this page.
      image
      Take note of the page url. This is the URL you will use as the canvas url when you setup the facebook app later. The url is typically of the format: https://sites.google.com/site/SITE-NAME/ (where SITE-NAME is the name choosen in step 2).
    7. Create a privacy information page (its required when you setup your Facebook App).
      Click the “Create Page” button
      image
    8. Name the page Privacy (or PrivacyInformation or something similar)
      Select the default options and click the Create Page button.
      image
    9. Add some basic privacy information on this page. (eg: No privacy information available).
    10. That’s it. You are done with the Google Sites portion.
  2. Create the Facebook app:
    1. Go to the Facebook Developer app: https://developers.facebook.com/apps
    2. Put in a name for your app
      image
    3. After a few seconds you will be taken to the Basic Info page.
    4. Fill in the basic info section (setting the category).
      image
      Fill in the contact info: (only email and privacy url’s are required. the Privacy URL is the url to the page created in step (1).(8) above.
      image
    5. Click the Save Changes button.
    6. Select the “On Facebook” link on the left and then the “Canvas Settings” button.
      image
    7. You need to enter the Canvas and Tab urls.
      image
      The Canvas and Tab url is the url to the Google sites home page you created in step (1).(6).
      For the Secure Canvas and Secure Tab url, just change the http to https (eg: http://sites.google.com/site/fbtestraj/ to https://sites.google.com/site/fbtestraj/)
      Also enter a name for the tab.
      Click on Save Changes.
    8. Next click on the “View App Profile Page” in the side bar.
    9. Add relevant information to your App’s Profile page.
    10. Finally, click on the “Go to App” button and the app will be added to your profile.

Here is what my test Facebook test app looks like (its called: Raj’s Test App: https://www.facebook.com/apps/application.php?id=211134738936140)
image

If you are a developer, then you can further customize this page using scripts (and if you are using your own website to host the page, then other web-application frameworks such as .Net). This done through the authorization mechanism.

Reference:
https://developers.facebook.com/docs/guides/canvas/

2 comments:

karma said...

Nice tutorial. Thank you

zdig1 said...

hello from some months
google dont allow their page to be on iframe
i worked with this moehtod for 2years
any solution to fix this https ?