Home Blogger How To Add Facebook Recommendations Bar Plugin to Blogger

How To Add Facebook Recommendations Bar Plugin to Blogger

Facebook recommendation bar is one of the awesome feature for Blogger. Facebook has already introduced a brand new social plugin called the ‘Facebook Recommendations Bar’. It’s a plugin that basically allows users to receive recommended content or material that they ‘Like’ and share them with their Facebook friends. Facebook Recommendations Bar is a great way to drive traffic from Facebook to your blog.

Facebook Recommendations Bar Plugin automatically displays posts which are recommended for your readers. Facebook Recommendations Bar also shows a like button, This will really help you to get likes to your posts. Facebook Recommendations Bar plugin is very easy to install and it is a totally compatible with blogger. Facebook recommendations bar is a good social plugin which helps in increasing page views of your blog.

How To Add Facebook Recommendations Bar Plugin to Blogger.

1. First of all Login to Facebook Apps and click on "Create New App" button towards Top-right.

2. In the box that pops up, type "My Recommendation Bar or Your Site Name" inside the App name field and leave other options as default. Now Click on continue.


3. Now you will be redirected to App Page. Now you can see one page just look down and click on website with facebook login tab, In this box enter your “Blog URL” then leave all other things and click on “Save Changes” button.


4.  Now you can see your App ID And App Secret number. Just copy your App ID And save in Notepad.


5. Now Go to Your Blogger Dashboard > Template > Edit HTML

6. Now search the  </body> and paste the following code above/before </body>

<div id='fb-root'/>
<script>
//<![CDATA[
(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-App-ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

- Change Your-App-ID (Red Color) with your own App ID.

7. Now Search for </head> and paste the following code above/before </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

8. Now Search <data:post.body/> and paste the following code after/below it.

<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://completeinfos.blogspot.com' trigger='10%'/></div>
</b:if></b:if>

- Change 3 (Red Color) if you want to show more post. Set number as how much you want to show post.
- side: the widget will float to the right by default, to relocate it to the left, simply change right to left.
- Now Replace http://completeinfos.blogspot.com with your own blog url.

9. Now save your template and see the effect.

Note : If it won't work kindly do the following one more steps. In some blog it requires.

10. Find <html (It will be on top) and replace it with the following code.

<html xmlns:fb='http://ogp.me/ns/fb#'
How To Add Facebook Recommendations Bar Plugin to Blogger How To Add Facebook Recommendations Bar Plugin to Blogger Reviewed by admin on 13:03 Rating: 5
Powered by Blogger.