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:

{ 22 comments… read them below or add one }

Nadeem Khan September 23, 2011

Thanks…..!!!

Reply

Jason Manheim September 23, 2011

No problem!

Reply

Avinash D'Souza October 23, 2011

Are you guys using some kind of Series plugin for these posts? Just noticed how ridiculously slick the design was…particulalrly the bits at the top, the parts 1-7 container .

Reply

Jason Manheim October 24, 2011

Yes, we’re using the Organize Series plugin (WP.org) and just added a bit of CSS to pretty-up the output.

Reply

Avinash D'Souza October 24, 2011

Looks just great Jason… :-)

Reply

Matt November 17, 2011

Getting stuck at
“Select “Create app” and you’ll be greeted with a page displaying your Application settings”.
I see ‘Create new app” and it asks me for “App Display Name:” and “App Namespace:”. Am I in the wrong place?

Thx

Reply

Jason Manheim November 17, 2011

Facebook changes their process every 3 seconds… :/

What you’re looking for is your App ID.

Reply

Dave April 29, 2012

So what’s the new procedure then? I don’t know what to fill in in this new popup and leaving line 2 blank will give me an error later on in the process. Kind of frustrating trying to get an app ID….

Reply

Jason Manheim April 29, 2012

Are you referring to “App Namespace”? That should be left blank. It isn’t needed unless you’re doing some advanced stuff.

Reply

Dave April 29, 2012

Hi Jason, thanks. The problem is that after filling in the two security codes (captcha) I get the message ‘
Unable to create app. Please try again later. If this problem persists, please report it here. ‘ Ten times now today… 

Jason Manheim April 29, 2012

I updated the article to reflect recent changes.

Reply

Lars November 25, 2011

Hey great article.
I have a question regard making an App id for a facebook page.
I would like to connect my page on facebook to my website, using the livestream plugin ( http://developers.facebook.com/docs/reference/plugins/live-stream/ )

It asks for an app id. How do I create this for a facebook-page? I have tried everything (at least!) It is really not clear to me how to create this app id for my page to add in the livestream plugin.

Reply

Jason Manheim November 28, 2011

Your Facebook page and Facebook app for your website are two different things.

Reply

Christy Moormann March 7, 2012

Just have to say a big “THANK YOU” for this post. This is the first time I’ve found information that was actually helpful. I got as far as getting the AppID, but it wasn’t working when I entered the web URL because I wasn’t putting in the trailing slash. Just put it in and it worked! You are awesome — thanks again!

Reply

Jason Manheim March 8, 2012

My pleasure, Christy. :)

Reply

Bob Rom June 7, 2012

This is a very interesting tutorial. Usually Facebook doesn’t integrate well with WordPress site and you get errors when trying to share articles back to Facebook.
I can see the post is back-dated in 2011…are the recommendations still valid for June 2012? 

Reply

Jason Manheim June 7, 2012

Bob, I last updated this article about a month ago so it should be relevant still. Although, Facebook does like to change things on an almost weekly basis so if you run into trouble, reach out.

Reply

Bob Rom June 8, 2012

Bookmarked already pal!

Reply

Pat Ruppel April 8, 2013

I have a question with regard to “register your app”. On Facebook I do not have a mobile phone listed as I have no ability to text. When I fill out the information (App Name) and click Continue it fails saying it’s unable to create an app without updating with a “Country Code” and mobile phone #.

How can I do that as I am unable to receive a text with the information to continue. (I also tried to do this from the plugin on my site and came to the same deadend.) I can’t really get any specific answer to this question on Facebook so I’m hoping you can give me some direction. All I’m trying to do is get an AppID for XFBML version field on the plugin. I haven’t added any SDK (?) code to my site. Is that still needed if I go the route of registering my app etc?

Thank you. Any assistance you can give would be greatly appreciated.

Reply

Jason Manheim April 29, 2012

Not much I can help with there. Facebook is having issues. You’ll have to try it again later.

Reply

Dave April 30, 2012

You were right! Today it’s working…

Reply

Jason Manheim April 30, 2012

Awesome! Facebook seems to have quite a bit of issues with the developer tools but I’m glad you got it working for you.

Reply

Leave a Comment