Official Facebook Recommendations Bar Widget for Blogger / Blogspot

June 20, 2012   /   Posted by in Blogger Widgets, Bookmarking, Facebook 86 Comments
Official Facebook Recommendations Bar Widget for Blogger / Blogspot

Facebook Introduced their brand new social social plugin called Facebook Recommendations Bar. It is Beta Plugins.
In this tutorial, we go to learn how to install Facebook Recommendations Bar in Blogger Blogs. This widget is more helpful to drive traffic from Facebook with and instant likes and related posts.

Preview

Official Facebook Recommendations Bar Widget Preview
OR
You can take a look at Right Bottom of this Page and see it’s action in Live!

How to Install the Official Facebook Recommendations Bar Widget?

In order to work the Facebook Recommendations Bar every blog should must have the Facebook Open Graphs meta tags.
I found the simplest and Working Facebook Open Graphs tags on GitHub gist. Thanks to pathawks.!

Add the Following code after <head> tag.

<!-- Begin Open Graph metadata -->
<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'/>
<!-- End Open Graph metadata -->
  1. First Go to Facebook Recommendations Bar Official Page.
  2. Directly click the Get Code Button.
    Official Facebook Recommendations Bar Widget for Blogger / Blogspot step one
  3. Click on Create a new app Link
    Official Facebook Recommendations Bar Widget for Blogger / Blogspot step two
  4. Enter the App Name with your Blog Title and App URL with your Blog URL, like as below and Click Continue button.
    Official Facebook Recommendations Bar Widget for Blogger / Blogspot step three
  5. Enter Captcha Code Correctly and Click Submit button
    Official Facebook Recommendations Bar Widget for Blogger / Blogspot step four
  6. Then Click the Get Code Button once again.
    Official Facebook Recommendations Bar Widget for Blogger / Blogspot step five
  7. Copy the First JavaScript SDK code (First Box Code) and Encode the Code using This Tool
    Official Facebook Recommendations Bar Widget for Blogger / Blogspot step six
  8. Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
  9. Select the Template > Click on Edit HTML > Proceed
  10. Check/Tick the Expand Template Widgets checkbox
  11. Search for <body> tag and place the Copied code After <body> tag.
  12. Facebook Recommendations Bar Customizations:
    You can customize the Facebook Recommendations Bar settings

    Settings

    Search for <data:post.body/> tag and place the following code after the <data:post.body/> tag

    <b:if cond='data:blog.pageType == &quot;item&quot;'><div class="fb-recommendations-bar" data-trigger="onvisible" expr:data-href="data:post.url" data-read-time="30" data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num-recommendations="2"></div></b:if>
  13. Save the Template, Enjoy :)

Please dorp your comments and share this post.

Article written by

I am started my career with Blogger, and now grown as PHP and WordPress Developer. I love playing with Blogger and WordPress.

Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

86 Comments on “Official Facebook Recommendations Bar Widget for Blogger / BlogspotAdd Comment

  1. avatar

    sid October 26, 2012 12:03 pm #

    Best widget ever 111

  2. avatar

    maki November 15, 2012 7:58 pm #

    Can you show us new images these are old please update this post. and the tutorial is also old. thanks

  3. avatar

    Kulwinder Kohli November 15, 2012 11:57 pm #

    nice thanks 4 this!

  4. avatar

    abhishek katiyar November 28, 2012 5:49 pm #

    The widget is not working i have followed each and every steps and checked twice.

  5. avatar

    fede December 6, 2012 11:46 pm #

    Hello friend!
    I did everything as you indicated, but I get an error saving changes:

    Error parsing XML, line 805, column 62: The reference to entity “appId” must End With the ‘;’ delimiter.

    Can you help???

    regards

    • avatar

      Harish December 7, 2012 12:13 am #

      replace appid with amp;appid

  1. Pingback: How To Install Facebook Recommendations Bar Widget For Blogger

© 2014 Way2blogging. Designed by +Harish, Powered by WordPress