5/4/10

Implementing the new Facebook Social Plugins

Facebook has an awesome collection of free social plugins available for web developers - as i started working with them i found very little in the way of "getting started" or "FAQ's" that were comprehensive enough to be useful. Most existing documentation assumed you were already part way there and left out steps. This is my try at a complete getting started tutorial.

1. Create a facebook (fb) profile for yourself (the developer) and then log into facebook using this profile.

2. Set up your fb application that will point to your website. THIS IS KEY! The result of this step will be the unique ID #'s that will allow everything else to happen. Visit this page http://developers.facebook.com/setup/ and follow the instructions.

3. Once you have created your application you are ready to visit:
http://developers.facebook.com/plugins

This page/site will write out the basic code for you - even writing out complete HTML sample pages that hold the various options.

4. Copy/paste in the sample code - being careful to get exactly what you need.

The result?

http://www.logsitall.com/fb-test.asp shows the result of this process - through to a comments box/ auto login and like link.


to summarize:

First, set up a new application:

1. Go to: http://www.facebook.com/developers
2. Click on the + Set Up New Application button (at the top right of the page)
3. Type your Application Name (example: Mysite-Name Comments) > select Agree > click on Create Application
4. Go to the Connect tab (on the left tabs-list)
5. Enter your site url with an ending slash in Connect URL and click on Save Changes (for example: http://mysitedomainname.com/)
6. You will see your Application ID number (below your app API & Secret)
7. It will take between 2 to 20 minutes until it will be ready to use with.

Happy coding.

-bill