How To Install Javascript SDK for Faster Facebook Integration

Share on Tumblr

Del.icio.us

I'm sure many of you already know about Facebook Social Plugins (FSP) like Facebook Like Button, Facebook Recommendation, Facebook Comments etc. They serve as a good source of traffic since Facebook users share and post your blog into their wall. To install these plugins to Blogger or Wordpress, you will be asked for something called Javascript SDK.

What is Javascript SDK

The real name of Javascript SDK is Facebook SDK for Javascript. To make it simple, it helps you install and use any Facebook Social Plugins with a few lines of code. For example:
To install Facebook like button without Javascript SDK, use this code:

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;height=590&amp;show_faces=true&amp;colorscheme=light&amp;stream=true&amp;border_color&amp;header=true&amp;appId=136654566362129" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>

But with Javascript SDK installed, you just need:

<fb:like-box href="http://www.facebook.com/platform" width="292" show_faces="true" stream="true" header="true"></fb:like-box>

Really cool, right?

Do I Need To Install Javascript SDK For Every Facebook Plugins?

Absolutely not! You only need to install it once.
If you read tutorials about installing FSP to blog, every post contains some steps like "Create Facebook Application", "Adding Code" ("code" means Javascript SDK). Or when you install a plugins from Facebook Developers, the first step is always "Include the Javascript SDK". That does not mean you must install Javascript SDK everytime, you just need to do it once.
Follow this post, and you can skip these steps forever from now on.

How To Install Javascript SDK

1. Create a Facebook Application

Facebook Application helps you manage and track your plugin. This also help you add more Administrator to manage plugin (especially for Facebook Comment) and more. Every Facebook Application comes with an App ID. When you provide this ID, it enables Facebook's Open Graph Meta Tags, which let you administer Facebook Pages for products (where you can share product updates and engage with customers who have "Liked" a product), and use Facebook Insights to track key metrics.

When creating a new Facebook Application, we are not really building an actual app, we just need a App ID. Providing an App ID for use with the Social Widgets feature is recommended, but optional, so you can skip this step.
Something you need to know about Facebook AppID:

• You can use one AppID for multiple blogs.
• Some plugins will not work without Facebook App.
• Not all of the Facebook plugin need an App ID for installation code.
• Some plugins need a particular AppID to work properly, that's mean you need to create a new Facebook App for the blog which uses that plugin.

Okay, let's do it:

1. Go to Facebook Apps Developer and Login. Then click Create New App.

   

   Create New Facebook App

2. Enter your App Name and App Namespace (optional), click Continue, input captcha code to continue.
   

   

   Input App Name and App Namespace

3. You've already created a new application and get your AppID, copy it for later use.

   

   Your Facebook App ID

4. Optional: input your blog Url at App Domains and Website with Facebook Login. Some FSP will need this information.

   

   Facebook App Settinsg

5. Click Save Changes to complete creating your own Facebook App.

2. Install Script To Your Blog

This is final step to instal Javascript SDK to your website.
Use one of three choices below - Use HTML Encoder to parse your code before add to blogspot:

The original Javascript SDK code:

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : &#39;Your Application ID&#39;,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>

Another script provided by Facebook, also works well like the original:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=Your Application ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

And the minimize code if you don't have an App ID:

<div id='fb-root'></div><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>

Replace Your Application ID with App ID already copied. Then copy all code and paste in your template, below <body> tag.

Optional choice for better compatible:

Add an XML namespace to the <html> tag of your template header. This is necessary for XFBML to work in earlier versions of Internet Explorer.
Search for <html and replace it with:

<html xmlns:fb="http://ogp.me/ns/fb#" 

Step by Step for Blogger and Wordpress

With Blogger:

1. Go to Blogger > Template.
2. Backup your Template.
3. Click Edit HTML.
4. Find the <body> tag and paste the code right below it.
5. Replace <html tag for optional.
6. Save template and done

With Wordpress:

1. At Dashboard, click Appearance > Editor.
2. Find and click on file header.php
3. Search for <body (without >) and paste code right below entire body tag.
4. Replace <html tag for optional.
5. Click Update file to save it and done

To make sure everything happen, add <fb:like></fb:like> to anywhere of your template, it should appears a Facebook like button.

Related Posts: