How to add the Facebook Social plugins to your website

There are 3 steps to adding the Facebook Social Plugins to your website.

1.Getting an Application ID

 - This is needed so you can use 100% of the Social Plugin functionality.

2.Adding the Facebook SDK to the header of your website

- or at least the header of the pages you want to add the Social Plugins too.

3.Adding the code for each Social Plugin you wish to use

. The most common mistake I've seen is people not getting their own Application ID. The Like button Social Plugin for example is easily added to your website, however if you don't have your own Application ID, the number of "likes" isn't kept after you leave your website and come back. The same applies with the Comments Social Plugin, and some of the other Social Plugins flat out will not work without your own Application ID.

Step 1 - Get an Application ID

Before you can use 100% of all of the Facebook Social Plugin functionality, and almost the entire functionality of the Comments Facebook Social Plugin, you must first get yourself a Facebook Application ID. This is a very simple process, just follow the instructions below:

1. Go to: http://developers.facebook.com/setup/, enter your facebook account info if prompted.
2. Enter the name of the website, for example "Gareth Hooper's Blog", as well as the Site URL (garethhooper.com/ for example, and don't forget the / on the end), and select the correct locale. Then click Create Application.
3. Enter the security check, and click Submit.
4. Make a note of the App ID and APP Secret. You will definitely need the App ID for Step 2. Please bear in mind that it may take as long as 20 minutes for the App ID to propagate out, so if you literally try to use it immediately after getting the ID, it may not work correctly.

Step 2 - Add the Facebook SDK

You need to add the Facebook SDK (think of it of more as a library that the Social Plugins need to access) to your website as a whole, or at least to the pages where you intend have Social Plugins.

To do this, you will need to add the following code to the header of at least every page you intend to have a Social Plugin. If you are using Wordpress or Joomla like I am, you should just try to the SDK code as close to the top of the page as possible. It just needs to load in the visitor’s web browser before the Social Plugin code does.

DON'T FORGET TO REPLACE THE APP ID IN THE CODE WITH THE APP ID YOU GOT IN STEP 1 ABOVE.

<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script>

Step 3 - Adding the Social PluginsNow that the Facebook SDK (with your own Application ID) has been added, the rest is easy, just add the Social Plugin code. People who use Wordpress and Joomla, you do need to be conscious of the fact that the Facebook SDK needs to load BEFORE the Social Plugin, so if you experience any problems, move the Social Plugin to the bottom of the page (so it is one of the last things to load) and see if you fixes the problem. It may not be a permanent fix, but at least you would have identified the problem. The permanent fix of course would be to move the Facebook SDK closer to the top of the page.

Getting the Code for each Social Plugin

Social Plugin #1 - Like ButtonMy detailed description of what the Like Button does.

To get the code for the Like Button, go to the Facebook Developers page for the Like Button, customize it as you like, and then click the Get Code button to get the code to add to your website.

Social Plugin #2 - Like BoxMy detailed description of what the Like Box does.

To get the code for the Like Box, go to the Facebook Developers page for the Like Box, customize it as you like, and then click the Get Code button to get the code to add to your website.

Social Plugin #3 - CommentsMy detailed description of what the Comments plugin does.

To get the code for the Comments plugin, go to the Facebook Developers page for the Comments plugin, customize it as you like, and then click the Get Code button to get the code to add to your website.

Social Plugin #4 - RecommendationsMy detailed description of what the Recommendations plugin does.

To get the code for the Recommendations plugin, go to the Facebook Developers page for the Recommendations plugin, customize it as you like, and then click the Get Code button to get the code to add to your website.

Social Plugin #5 - Activity FeedMy detailed description of what the Activity Feed plugin does.

To get the code for the Activity Feed plugin, go to the Facebook Developers page for the Activity Feed plugin, customize it as you like, and then click the Get Code button to get the code to add to your website.

Social Plugin #6 - Live StreamMy detailed description of what the Live Stream plugin does.

To get the code for the Live Stream plugin, go to the Facebook Developers page for the Live Stream plugin, customize it as you like, and then click the Get Code button to get the code to add to your website.

Social Plugin #7 - Login with FacesMy detailed description of what the Login with Faces plugin does.

To get the code for the Login with Faces plugin, go to the Facebook Developers page for the Login with Faces plugin, customize it as you like, and then click the Get Code button to get the code to add to your website.

Social Plugin #8 - FacepileMy detailed description of what the Facepile plugin does.

To get the code for the Facepile plugin, go to the Facebook Developers page for the Facepile plugin, customize it as you like, and then click the Get Code button to get the code to add to your website.