Get a Facebook App ID for use with XFBML (and HTML5) Social Plugins in Thesis Theme and start using the JavaScript SDK and the Open Graph protocol.

Create a Facebook App ID For XFBML (and HTML5) Social Plugins

Written by in Tutorials |

This is part 1 of 7 in the Facebook Social Plugins series:

The Facebook Platform allows you to make your website relevant to the online community by utilizing their Social Plugins — the “Like” button, Like Box, Comment Box, Activity Stream, etc. — directly on your site. In order for you to make the most of the technologies offered, like using the JavaScript SDK, you must register your website to receive a Facebook App ID.

The JavaScript SDK requires that you register your website with Facebook to get an (appId). The appId is a unique identifier for your site that ensures that we have the right level of security in place between the user and your website. ~ Facebook for Websites

Register Your Website

Create a Facebook App

Head over to the register your app page and enter in the following:

  1. App name: whatever you want to call your app.
  2. App Namespace: leave this blank.
  3. Web Hosting: do not check.

Select ‘Continue’, fill in the Security Check CAPTCHA, and click ‘Submit’. Now go to your Developers Dashboard and you should see your new app listed along the left side of the screen. Click your new app and select the ‘Edit App’ button that appears in the upper-right. You’ll be greeted with a page displaying your Basic Application settings.

Here you will see your Facebook App ID, App Secret, and links to edit all your settings. This is the information you’re going to need in order to use all the cool integration stuff. You can optionally add a logo (icon), descriptions, contact info, etc.

Make sure these settings are set

  1. Under where it says, “Select how your app integrates with Facebook”, select ‘Website’ and enter the URL of your site including http:// and the trailing /.
  2. In the left column click ‘Advanced’ and make sure the App Type is set to ‘Web’.

Now that you have your Facebook App ID you can start using the Like button, comment box, etc. to do some really interactive stuff.

Troubleshooting

If you’re getting any errors (Facebook Linter), here are a few things to check:

  1. Go to https://developers.facebook.com/apps
  2. The new app you created should be listed on the left-hand side. Click it.
  3. On the right-hand side it will show you the settings for that app and there will be a link that says “Edit Settings”. Click that link.
  4. You should now be on a page that lists the Basic settings for your app. Towards the bottom there is a section titled “Select how your app integrates with Facebook”. Make sure “Website” is checked and the “Site URL” is set to your domain including http:// and the closing /. (e.g. http://designpx.com/). If not, correct it and click “Save Changes”.
  5. Now look back at the navigation list of links on the left sidebar and select “Advanced” under the Settings link.
  6. On the top, under “Authentication”, make sure the App Type is set to Web. If not make the correction and Save Changes.
  7. One last thing, go to the nav links on the left sidebar again and this time choose “Roles”. Make sure under “Administrators” it show you (your personal Facebook account) as an administrator. If not, add yourself and select Save Changes.

Enjoy this post? Consider sharing it: