Sam : Add Official Facebook Recommendations Bar Widget For Blogger

Sunday, July 22, 2012

Add Official Facebook Recommendations Bar Widget For Blogger

facebook recommendations bar for blogger

Facebook introduced a brand new plugin called Facebook recommendations bar plugin and this plugin takes place like a slider on your blogger blog. It is still in beta version but its really an inspiring plugin. This plugin shows recommended posts of your blog inside it with a like button included and let us give a try to this awesome plugin. This plugin really looks very official and sleeky. You can view a live demo of this plugin at the right corner of this blog post after expanding the read more hack.

Add Facebook Recommendations Bar Widget In Blogger::

Adding Open Graph Tags::

1. Firstly you need to add Facebook open graph tags for this widget to work or else this widget will show bug.
(I found a very simpler and reliable open graph tags on Git Hub gist and i really thankPathawks for this. .)

Go to blogger dashboard --> Template --> Edit HTML(Tick the Expand Widget Template Option).
Find(CTRL+F) for <head> and add the following open graph tags just below it.

<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl'
property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='"en_US"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

Creating Facebook App::

2. If you have already created your Facebook app then move on with step 4. If not, Go To Facebook Apps Page.

Choose Create An App button.
Enter your blog title in app name field and click on Continue.
It will ask for word verification. Enter the text displayed and click on submitbutton.

3. You will be taken to your app page.

Note down your App ID.
Enter your blog Url in App Domains field and also in Website with Facebook Login field.
Click on Save changes button.

Now your App is completely Set.

Adding Javascript SDK::

4. You need advanced JavaScript SDK for this. Copy the following Javascript SDK code and paste it just below the <body> tag in your template.

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//http://www.YOURDOMAIN.com', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>

source: Facebook developers

Replace YOUR_APP_ID with your newly created App ID.
Replace http://www.YOURDOMAIN.com with your blog Url.

Adding Widget Code::

5. Go to blogger dashboard --> Layout --> Add a gadget ( HTML/Javascript gadget).

6. Paste the following peace of code inside it.

<b:if cond='data:blog.pageType == "item"'>
<div class="fb-recommendations-bar" expr:data-href="data:post.url" data-read-time="25"
data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num-recommendations="2"></div></b:if>

Customizations::

data-read-time="25" --> Number of seconds the plugin will wait before it expands.
data-action="Like" --> type of action (Like or Recommend).
data-num-recommendations="2" --> Number of recommendations to be displayed.
data-side="right" --> The position of plugin.

7. Finally Save your Gadget and Save your Layout.

8. View Your blog and you can notice the official recommendations bar plugin on your blogger blog without any bugs or errors.

Isn't It so cool pals . . . :)

Sam