Got 5 Minutes? Add Some Facebook Social Plugins To Your Site
If you want to get up and running quickly with the new suite of Social Plugins offered by Facebook it really is as simple as adding one line of code and under most circumstances will take you less than five minutes.
If you would like to see or try out a couple of the Facebook social features before implementing them in to your own site you can scroll to the bottom of this post to see the Like plugin (feel free to click on it) and you can see the Recommendation plugin in action in the far left sidebar. Both of these plugins offer your site instantly social and personalized features for your site users which will help make your content sticky.
If you would like to implement any of these social plugins into your site(s) here are the steps I used to accomplish this.
*Warning* Please remember to back up any of your files and make copies of them before making any changes to so that in case of a problem you can roll back to a previous version
Before implementing any of the social plugins you will first need to decide if you would like to use the iframe version of the social plugins or the XFBML version. Some of the plugins (such as the Login With Faces) only work with the XFBML while others (such as the Like button) offer additional features when you implement the plugin using the XFBML.
iframe Version
- Visit
- After choosing a plugin enter in all options required including your site URL, width, height, color scheme, font etc…and click on get code.
- Copy all the code from the iframe portion of the popup window and then paste it into your site where you want the plugin to appear.
- If you are using a CMS system and want to use the Like button instead of pasting the URL of your site into the options box you may have to use the template tag of your CMS to ensure the Like button is picking up the proper page link to the content you want your site visitors to Like. For example in WordPress I used the tag <?php the_permalink() ?> in between the <a href=””> tag to ensure my links would be properly shared.
XFBML Version
To use the XFBML version of the social plugins you will have to add the Facebook javascript SDK into your site. The SDK must be found on every page you wish to use the social plugin on or else the plugin will not function properly. You do this by visiting http://developers.facebook.com/docs/reference/javascript/ and pasting the code found on that page right below the opening body tag on your site as shown below:
<body>
<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>
Now that the SDK has been included on every page you wish to use the social plugin on you will follow the next steps to install them on your site.
- Visit developers.facebook.com/plugins and from here you can select any of the available social plugins for your site.
- After choosing a plugin enter in all options required including your site URL, width, height, color scheme, font etc…and click on get code.
- Copy the XFBML code from within the popup window and then paste it into your site where you want the plugin to appear.
- If you are using a CMS system and want to use the Like button instead of pasting the URL of your site into the options box you may have to use the template tag of your CMS to ensure the Like button is picking up the proper page link to the content you want your site visitors to Like. For example in WordPress I used the tag <?php the_permalink() ?> in between the <a href=””> tag to ensure my links would be properly shared.
Your site has now been instantly enabled to be social and personalized for all visitors to your site in around five minutes. If you read some of the Graph API, Javascript SDK and other documents listed below you will see that there are many other features available to use when your tap into the API.
Resources
Let me know in the comments if you are using any of the Facebook social plugins on your site yet? Did you find installation as easy as promised or did you run into any issues?
