Add Easily Facebook Recommendations Bar In Blogger-Facebook Plugin

By Hammad Baig on Wednesday, 27 June 2012

Officially Facebook Introduced/Announced New Social Plugin "Facebook Recommendation Bar" in beta Version.That Plugin show additional recommended articles or post after readers/visitors have complete reading an post or served some time on your blog/website.
Officially Facebook Introduced/Announced New Social Plugin "Facebook Recommendation Bar" in beta Version.That Plugin show additional recommended articles or post after readers/visitors have complete reading an post or served some time on your blog/website. That Plugin will collapse on page load and expand once a reader has reached a particular place on your blog or finished reading the article.Only the articles or posts are displayed that are previously shared or liked on Facebook.With thumbnail of article and number of Facebook likes.Many Bloggers published post about it but very difficult methods(like Open Graph Installation and some visitors says not working.But the below method is very easy and applied on any template easily.

Screen Shot Of Facebook Recommendations Bar.

How to Add Facebook Recommendations Bar/widget/plugin in/to/for Blogger/blogspot Posts page facebook tricks
OR
  • You can take a look at Right Bottom of this Page and see it’s action in Live!

Advantages Of Facebook Recommendations Bar's.

Facebook Recommendations Bar has a quite similar way of displaying recommended posts as on Recommendation Box.One of the major benefit of that plugin is increase page views and impressions and drive more traffic through Facebook likes.It can show up to 5 recommended posts and default is 2. The plugin is minimized initially with just like or recommendation button on it and it will expand automatically after the time you defined has been elapsed or if trigger is initiated.

Steps To Install Facebook Recommendations Bar to Blogger Blog 

You can Easily install that plugin or widget in your blog without the installation of Open Graph Meta Tags.I ignored all necessary steps to keep the layout clean and make the widget work just good.I found the simplest and Working Facebook Open Graphs tags on MBT.So let's go to start installation on your blog in only two easy steps
Remember Fisrt Always Back Up Your Template Before You Make any Changes - How To Back Up A Blogger Template.

Step # 1  Create New Facebook Application

If you want to add this plugin in your blog so must you create Facebook Application

1.Go and Log into Facebook Apps
2.Click on Create New App see below image.

How to Add Facebook Recommendations Bar/widget/plugin in/to/for Blogger/blogspot Posts page facebook tricks

3.Enter the valid App Name with your Blog Title, like as below and Click Continue button.

How to Add Facebook Recommendations Bar/widget/plugin in/to/for Blogger/blogspot Posts page facebook tricks

4.After Clicking the Continue button you will see next step like Enter Captcha Code Correctly and Click  Submit button (see below image)

How to Add Facebook Recommendations Bar/widget/plugin in/to/for Blogger/blogspot Posts page facebook tricks

5.After Clicking the Submit button now you're app almost complete.Then click Website with Facebook  Login tab and inside the box input your blog/website URL. See the screenshot below.Do not touch remaining options and click Save Changes.


How to Add Facebook Recommendations Bar/widget/plugin in/to/for Blogger/blogspot Posts page facebook tricks

6.After Clicking the Save Changes button.You will see top of the page two alpha numerical characters One is App ID contain 15 digits and the other is App secret.Now just copy the App ID code and save in a notepad.that copy code will need it later.like this below image.

How to Add Facebook Recommendations Bar/widget/plugin in/to/for Blogger/blogspot Posts page facebook tricks

Step # 2 :Adding "Facebook Recommendations Bar" in Blogger.


  • Go to Blogger Dashboard → Design → Edit HTML (In Old Blogger Interface).
  • But If you're using New Blogger Interface so follow below steps 
  • Click on Blog Title → Template → Edit HTML
  • Search the below code in your blogger template
<html

  • Replace the above code with below piece of code,

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

Like the Below image;

How to Add Facebook Recommendations Bar/widget/plugin in/to/for Blogger/blogspot Posts page facebook tricks

Now search again <body> in your template and just below this tag paste the following below code:

<div id='fb-root'/>
<script>
//Facebook Recommendation bar tutorial by Techtutshub.com
//<![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=xxxxxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<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://www.techtutshub.com' trigger='30%'/></div>
</b:if></b:if>

  • Replace xxxxxxxxxxxxxxx with your 15 digit App Id that you saved in notepad on step # 1.
  • Replace http://www.techtutshub.com with your blog link
  • Like below image I hope it's helpful for you;
How to Add Facebook Recommendations Bar/widget/plugin in/to/for Blogger/blogspot Posts page facebook tricks

From the above code you will see one Red text and other light blue highlighted text these are optional you're free to change this with your blog requirment.

Finally Click on Save Template . Now you're done

Optional Steps:

  • trigger:The default value is onvisible, which expands your plugin when reader past the plugin code snippet implemented on your blog.Instead, you can use percentage value here too - i.e: 20%. If so, when user scrolls that percentage of the page, the plugin will expand. For example, if you specify 20%, after user scrolls your page 20% from top, the plugin will expand.
  • num_recommendations: You can set how many articles to display. By increasing or decreasing the value 3
  • read_time:You can specify a time in seconds to wait before the plugin expands automatically - i.e: 10. Even if you have specified a Trigger Value, after elapsing this time, the plugin will expand. The value you specify here will considered as seconds.
  • Side:That you can specify on which side of screen the plugin should be rendered. By default, it specified to be rendered on bottom right side. If you wanna show it on bottom left side,specify left here.

Show Hide Setup In That Plugin (Optional)

You can see the above code in some code text blue color if you want to that plugin display/hide post pages,static and homepage you're free to change blue color text code with your blog requirment using widgets control setup in blogger.

I hope that this Recommendation's bar would be important for you.This widget is extremely important and a must for every blog/website.We would be adding more updates on it as soon as we hear from Facebook documentation.If you face any problem.Just Drop your comment. I will be able to help you about this tutorial,Stay tuned for more.Peace and blessings pals! Thanks.

24 comments on

'Add Easily Facebook Recommendations Bar In Blogger-Facebook Plugin'

  1. Mohammad Adeel28 June 2012 00:38

    Awesome article I found this many times in search engines and visit other blog that tutorial very difficult method but this tutorial it's very easy thanks

    ReplyDelete
  2. Working Fine On My Blog Thanks Fore Share :)
    http://humobile.blogspot.com/

    ReplyDelete
  3. working perfectly....thnx a lot!!!!!!

    ReplyDelete
  4. i Already had <html xmlns:fb='http://ogp.me/ns/fb#'

    What Should I Do??

    ReplyDelete
    Replies
    1. So you can apply next steps...Thanks

      Delete
  5. Thanks for sharing the step by step guide to add Facebook Recommendations Bar.Very soon I'll add this plugin to my blog.

    ReplyDelete
  6. Hi, very nice tutorial,
    It's work on http://blog.cyber4rt.com
    Thanks for share :)

    ReplyDelete
    Replies
    1. Thanks to visit , stay and comment here

      Delete
  7. Hi Hammad, very nice tutorial with step by step guide.

    ReplyDelete
  8. Hellow I just followed the steps, it worked! but it only shows the homepage not other posts.

    http://fromhobby2money.blogspot.com/

    ReplyDelete
  9. I need help, it only shows my blog name not the post titles.

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. Sweet, thx, it works, a bit slower then yours tho ive set it to 10sec. but it works ok: www.allentto.com
    Thank You!

    ReplyDelete
  12. Thanks.Working well on my blog:http://www.funpicture.org

    ReplyDelete
  13. wow brilliant tips,,with screenshot..thanks for making this simple..try to put this How To Add Cool Hover Subscription Box Every Post For Blogger
    Thanks..

    Best Regards:
    All Technology blog

    ReplyDelete
  14. Thanks guys,,i had add this to my blog.. so easy..

    ReplyDelete