In order to keeping busy visitors on our blogs finally we got the plugin which we have been waiting from long time,recently facebook has launched their "Recommendation Bar" in beta version,the Recommendation Bar is a plugin which shows a number of some recommended articles for your readers or visitors and you can set number of recommended articles,when any visitor visits to your any post,after some specific time the plugin pop ups at the right/left corner of your blog with the recommended articles,thats why its helps you to keep busy your visitors on your blog.The plugin contains title of your post,thumbnail and number of likes just below of that post and the plugin shows the only those articles which are previously liked or shared on facebook.If you want more such plugins then I am listing some similar widgets and plugins -

Now lets see how to add facebook recommendations bar to blogger?

How To Add Facebook Recommendations Bar To Blogger?


For better understanding I am dividing this post in two parts and they are as below,


  1. Creating new Facebook App
  2. Adding Facebook Recommendations Bar To Blogger

Part 1 : Creating new Facebook App

To create Facebook app for your Recommendation Bar follow below steps,
  • First go to Facebook Apps and login with your Facebook account
  • Click on Create New App button at top right corner

  • As soon as you hit Create New App button a pop up box will appear.In App Name field fill Recommend Bar and keep all it is and hit Continue button.
Click On Image To Enlarge

  • Enter the captcha as shown in image and hit Submit button

  • Now you will redirect to an another page.Scroll down and click on Website with Facebook Login tab and inside the box input your blog URL.Now leave all fields as it is and click Save Changes
Click On Image To Enlarge


  • Now copy your App ID and paste it into notepad,we will need it later.


Great,you have created your App.Now lets see how to add Recommendations Bar to blogger.

Part 2 : Adding Facebook Recommendations Bar To Blogger


  1. Go to Blogger Dashboard > Template
  2. Download a copy of your template
  3. Click on Edit HTML
  4. Hit Proceed button
  5. Now search for below code in your template


<html


replace it with below code,

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


Now find for below code,

<body>


just below of it paste following code,

Note - If you are using default blogger templates then search for <body tag instead of above code.

<div id='fb-root'/> 
<script> 
//Facebook Recommendation bar by http://www.helperblogger.com/
//this notice must stay intact for legal use
//For more visit http://www.helperblogger.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=YOUR APP ID HERE"; 
  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.helperblogger.com/' trigger='40%'/></div> 
</b:if></b:if>


  • Replace APP ID HERE with your APP ID which you have created in first part
  • Replace http://www.helperblogger.com/ with your blog URL.
  • The widget will only appear on post pages and not on homepage or static pages. To display it on all pages, then simply delete the lines in red color.
  • If you want to change number of recommendations then simply change the value 3
  • If you don't want to show your old articles then edit the value max_age='0',you can set it to 1-180.But if you don't want to take age into account then let it be 0 as default.
  • If you want to change position of bar to right to left then simply replace right with left. 
  • When any visitor comes to your blog,after specific time the bar expand.I have set the time to 10 seconds to chnage it just change value 10.
Finally save your template and visit your post pages.

The installation of this plugin is longer but it is easy.If are getting any problem then feel free to post it via comment form.I'll glad to help you :)

Peace And Blessings Buddies.....

Post a Comment

  1. you've posted wonderful article, but i won't apply on my site.
    www.blogtariff.com

    ReplyDelete
  2. Hey, I replaced <html. But now, I can't save my template! why?

    We're sorry, but we were unable to complete your request.
    When reporting this error to Blogger Support or on the Blogger Help Group, please:
    Describe what you were doing when you got this error.
    Provide the following error code.
    bX-olt7v1
    This information will help us to track down your specific problem and fix it! We apologize for the inconvenience.

    ReplyDelete
    Replies
    1. Hey sorry to hear about bx error.But try to use different browser for some while,also try after clearing browser's cookies and caches.

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  4. Dear Brother When I Replace <html xmlns:fb='http://ogp.me/ns/fb#' That Code With <Html Then This Bellow Problem/Message Was Showing Up...???

    Error parsing XML, line 2, column 327: Attribute "xmlns:fb" was already specified for element "html".

    So What is The Problem !!! Please Reply Me...Thankz

    ReplyDelete
    Replies
    1. here is the solution to this problem please see this post

      http://www.howtoread.co.in/2013/04/facebook-recommendation-bar-parsing-error-solution.html

      Delete
  5. Brother.....it won't showup on My Blog
    what should i do????
    www.agazsantiago.com

    ReplyDelete
  6. Rahul..
    nice article!
    what if you have created facebook app with other things like facebook comment box and the like box... Do you still need to create a new app so as to get ID ... Or you can use the same ID with your facebook like box..?

    ReplyDelete
  7. hey i have tried this on my blog...http://yomixin.blogspot.in/
    this widget is also showing...but posts are not there..why..??

    ReplyDelete
  8. Hey Buddy that's awesome it look fantastic though it took sometime and i struggle with some error then eventually it worked, you code explanation is very simple.

    Please get give any article of Facebook like pop up gadget that can be cancelled, i have seen many popup gadget that has a close icon but that's not available for Facebook pop up please upload it.

    ReplyDelete
  9. Rahul,

    Sorry to bother you but as installed it and its working but it picks up only a few post not all, i mean one by one it should pick all the post, i changed max_age to 0 but still not to avail.

    Please visit if you get time.
    www.technology-howto.com

    ReplyDelete
  10. one of the best widget of your blog....

    i m a big fan of your blog and have applied half of your widgets onto my blog..

    please visit @ http://www.indiantaxupdates.com

    ReplyDelete
  11. i added this to my blog but it didnt working why...?
    www.topsoftdown.com

    ReplyDelete
  12. Also Not Working On my site
    www.pareshgiri.com

    ReplyDelete
  13. it's working in firefox thanks bro.

    ReplyDelete
  14. A woman takes a lot of pride in her breasts, because they help her to feel naturally beautiful and stylish as a grown woman. Triactol is a breast enhancement serum that acts on the tissues surrounding your breast and gives them a younger appearance. Large, firm, perfect and perky breasts that give a natural look are the dream of every woman. There are different methods used for the breast enlargement. Triactol bust enhancement serum has gained a larger number of fans on the market and the demand for its use is constantly growing. Triactol serum renders outstanding and guaranteed results and offers you a 60 days money back guarantee as well. No other breast enhancement cream or any such product offers this kind of guarantee to the users. Triactol works by increasing breast tissues. In order to make breasts naturally larger and perkier, the growth of the tissues are being controlled the natural way. Throughout any Triactol review, you will notice that there are more then plenty of benefits from using this serum, because it is natural and it provide the scouted results. Triactol serum utilizes quality grown bright pueraria mirifica, which functions the most efficient. Triactol is the kind of effective serum that can make your bust size grow and grow, seemingly all on their own. Sure, the process will be a little bit more drawn out than a nip and tuck, but you’ll be protecting your future health while also improving your appearance. This is the kind of solution that you can count on, and a very real reason to buy Triactol, For more review about TriactolBust Serum, Visit http://www.triactolplus.com

    ReplyDelete
  15. Provillus is rated hair loss product of the year for men and women hair loss! Provillus is FDA approved solution to stop hair loss and regrow hair back! Read Provillus review before order at www.managehairloss.com

    ReplyDelete
  16. I just found Review on Adiphene, Triactol, Provillus and ZetaClear, Phen375, Garcinia Cambogia Select and Acai Plus with Detox Plus Today, so thought it would be great piece of information to share!

    ReplyDelete
  17. This is Working good in my blog

    gigasoftz.blogspot.com/

    ReplyDelete
  18. here is the solution to

    Error parsing XML, line 4, column 290: Attribute "xmlns:fb" was already specified for element "html problem visit this below link

    http://www.howtoread.co.in/2013/04/facebook-recommendation-bar-parsing-error-solution.html

    ReplyDelete
  19. great post but i want a facebook comment box in blogger please help me.
    " title="Blogger Watch Movies Online For Free" />

    ReplyDelete
  20. it is not working for my blog
    great post but i want a facebook comment box in blogger please help me.
    <"Watch Movies Online For Free" />

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

    ReplyDelete
  22. I'm happy to read your informative post. It's very effective for every Blogpage.

    ReplyDelete
  23. Once you are able to find your favorite, just click to play and start watching online. Free proxy sever

    ReplyDelete
  24. then you may be missing something in your code that completes the login process. You will need to re-visit your code or speak with a developer who can review it. facebook login

    ReplyDelete
  25. http://www.top8pm.in/packers-and-movers-delhi.html
    http://www.top8pm.in/packers-and-movers-gurgaon.html

    ReplyDelete
  26. http://www.top8pm.in/packers-and-movers-hyderabad.html
    http://www.top8pm.in/packers-and-movers-mumbai.html

    ReplyDelete
  27. for latest trailers go to http://www.latestnewmoviesteaser.com/

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top