Add Facebook Recommendations Bar To Blogger


Facebook Recommendations barFinally the plugin I had been waiting for since 22nd September 2011. In order to engage readers more and let your visitors spend more time on your website Facebook has finally launched the "Recommendations Bar" in beta version. It's designed to display additional recommended articles right after readers have finished reading an article or spent some time on your blog. It will collapse on page load and expand once a reader has reached a specific location on your blog or finished reading the post. Only those articles are displayed that are previously liked or shared on Facebook. The number of likes are displayed under each article along with page title and a thumbnail. It also contains a like button and previously contained an Add to Timeline button that has been removed now. Unlike Facebook Recommendations box which offered related stories but with lack of user friendly interface and engagement, Facebook bar will force readers to stay longer on your site leading to increased pageviews, page impressions and thus traffic. It's a smart alternative to Recommended Post Slides widgets that we previously published.

If you are a Wordpress user you may follow this tutorial:

See the demo live on our blog towards the bottom-right corner. Don't forget to press the like button to let your friends know that you visited this page :)

Can it increase your traffic?

Oh sure yes without any doubts! We often share widgets but we don't implement every plugin on our blog unless it provides some value to traffic or revenue. As you can see we have added the recommendations bar on all our posts and this will surely put a positive effect on pageviews because now visitors can see what their friends previously liked on your blog and due to a human curiosity they would surely check these extra posts along the way that appears under the Label "You Might Also Like". Google Plus button shows friends recommendations in search results and Facebook Bar will display the likes on your blog. Thus consumer of all such plugins is always in benefit.

Install it on Blogger

It can be installed easily on both BlogSpot blogs and Wordpress but with a little patience. We have kept the installation extremely easy and ignored unnecessary steps like installation of Open Graph Meta Tags. We would install necessary codes to keep the structure clean and make the widget work just fine. The code we are sharing is optimized and will display your blog titles and featured images correctly and with a lot of control attributes.

Follow these easy steps:

Step1: Create a Facebook Application

For this plugin to work you will need to create a Facebook App in seconds. The below method is the standard and correct method for creating any FB App you like.

  1. Log into Facebook Apps
  2. Click on Create New App button towards Top-rightcreate new app
  3. In the box that pops up, type "My Recommendation Bar" inside the App name field and leave other options as default. Click continue.

app name

     4.   Enter the captcha security code. Click Submit

     5.  You are app is almost complete. Just click Website with Facebook Login tab and inside the box input your blog URL. See the screenshot below. Do not touch remaining options and click Save Changes.

Site URL

         6.   You will see two strings of alpha-numerical characters. One is App ID and the other is App secret. Just copy the App ID code and keep it save in a notepad. We will need it later.

App ID

Congrats App finally created! Lets proceed to step2.

Step2: Add "Recommendations Bar" To Your Blog

Follow these steps to add the bar to Blogger:

  1. Go to Blogger > Template
  2. Backup your template
  3. Click Edit HTML > Proceed
  4. Search For this :

<html

Replace it with this code:

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

This will make the plugin compatible in older versions of  internet explorer also. Since blogger templates are coded in XML therefore inserting this XML namespace will enhance the plugin performance and compatibility.

     5.   Next search for <body>   and just below this tag paste the following code:

Note: If you are using the new blogger templates like Simple, Awesome Inc., Travel, Watermark or Picture window then please search for <body instead. Make sure to paste the code below the entire body tag.

<div id='fb-root'/>
<script>
//Facebook Recommendation bar by www.mybloggertricks.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=***************";
  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.mybloggertricks.com' trigger='40%'/></div>
</b:if></b:if>

You are almost done. Make these changes:

  • Replace *************** with your 15 digit App Id that you saved in step1.
  • Replace http://www.mybloggertricks.com with your blog link

     6.   Save your template and you are all done!

Visit your blog and scroll down about 50% of your page and wait for 10 seconds for the plugin to expand. Enjoy the new way of free pageviews juice! :)

Optional Steps

Below are optional customization and control options. You can skip them if you want

  • max_age: will decide the age limit of articles. Sometimes you don't want to display too old articles so you can set it to display up to 1-180 days old posts. But if you don't want to take age into account then let it be 0 as default.
  • num_recommendations: You can set how many articles to display. By increasing or decreasing the value 3
  • read_time: As soon as the user reaches a specified location, the plugin would expand and before expanding it will take some time. I have kept it equal to 10  seconds, you can increase it to 30 or more as you wish.
  •  side:  You can decide the location of plugin. By default it shows up towards the bottom right corner of your page. You set it to float to left
  • trigger:  On page load the plugin collapses and as soon as it reaches a specified location it expands. You can choose that location in three ways i.e. onvisible, X% or manual. I prefer locating the trigger point by percentage for better pageviews. The widget will expand as soon as the user scroll downs 40% of your page. You can increase or decrease this value. If you wish that the plugin must expand as soon as the reader reaches the end of your article then instead of pasting the code between the purple lines  paste it just below data:post.body tag and use the value onvisible instead of 40%.
  • The widget will display only on post pages and not on homepage or static pages. To display it on all pages, then simply delete the purple bolded lines.
Troubleshooting :

Since Most templates are not well structured and require installation of meta tags to tell Facebook to fetch correct page titles, thumbnails and blog title. To do this simply paste the following code just below <head> tag inside your template

<meta content='article' property='og:type'/>

<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

<meta expr:content='data:blog.title' property='og:site_name'/>

<meta expr:content='data:blog.pageName' property='og:title'/>

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Save your template and now see the plugin if it correctly shows page titles both on your blog and Facebook.

Your views?

I hope the installation was not very techy but still if you got into any trouble then just relax and let us know. This widget is extremely important and a must for every blog. We would be adding more updates on it as soon as we hear from Facebook documentation. Do not forget to like this page through the recommendation bar! :) Peace and blessings pals!

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

177 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Awesome widget
    You have put great effort to bring this widget into action.
    I am going to install it on my blog.
    Tips and Tricks

    ReplyDelete
  2. Great widget! I've seen it on mashable and was wondering when will it be available for blogger blogs.

    This is awesome!

    ReplyDelete
  3. It is an excellent tool and effective way to bring visitors, but it is not wrong, because from various sources that I have ever read and I met, google do not really like with facebook as a referral link, there is no danger for the ad? how exactly. trimakasih > http://www.ithedoctor.com (hope you found something on this site)

    ReplyDelete
  4. Thank you very much, I was also waiting for this, thanks to you guys Blogger keeps getting better, keep it up!! and thanks again!!!

    ReplyDelete
  5. Not working in my blog, please help me

    ReplyDelete
  6. This is just awesome! I liked this recommendation widget!WOrking perfectly in my Blogger Blog

    ReplyDelete
  7. Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the Application configuration. It must match one of the Connect or Canvas URLs or domain must be the same as or a subdomain of one of the Application's base domains.

    because of redirection of country specification. :(((( what to do reply asap

    ReplyDelete
  8. Needless to say that you're always informative Mohammad thanks for you efforts.

    Would you mind to post about blogger's new feature "Permalink". I saw it today in my blogger post editor.

    ReplyDelete
  9. Awesome widget i too have been waiting for this

    ReplyDelete
  10. Hello Mohammad Bro

    I downloaded your mbt church from here : http://www.mybloggertricks.com/2009/08/releasing-amazing-mbt-church-theme.html

    Everything is working fine except the navigation menu . Navigation menu is not visible in chrome and Mozilla but its working fine on IE .

    Please bro i really need that template . see currently im using blogger tempalte and i worked hard on making it beautiful but still something is missing ...

    My blog : http://nannu4u.blogspot.in/

    Please send me hat template to my email " sony.abhishek.12 G M " im your old subscriber :)

    Please send me the mbt or this theme http://zai-labo.blogspot.in/

    Please i need it so bad .

    P.s : sorry for writing so much :P

    ReplyDelete
  11. Correction in Email : sony.abhishek.1 G M

    :)

    ReplyDelete
  12. In my blog template I can't find (body) so what can I do??plz help me!!!

    ReplyDelete
  13. (data:post.body) tag is also missing...???!!!!plz anybody knows what can I do?

    ReplyDelete
  14. @vivek : Instead of (body) search something liks

    ( expr:class='"loading" + data:blog.mobileClass'>)

    Or check here for more http://www.mybloggertricks.com/2011/06/disadvantages-of-template-designer.html

    ReplyDelete
  15. i do exactly same as written in the post now i my post's its saying this ""Given URL is not permitted by the application configuration.: One or more of the given URLs is not allowed by the application configuration. It must match one of the Connect or canvas URLs or the domain must be the same as or a subdomain of one of the application's base domains."" instead of showing recommendations please help me

    ReplyDelete
  16. I instal this widget on my blog and working properly thanks bro..

    Codes Blog

    ReplyDelete
  17. @Mohammad
    This comment widget is awesome but I dont like this facebook bar.It is not attractive,so dull. I like the one on apptec.

    ReplyDelete
  18. @Mohammad
    btw is this floating bar widget working correctly? How can there be such lesser no. of tweets and pins etc

    ReplyDelete
  19. Not working my blog pls check

    www.trial420.blogspot.com

    <div id='fb-root'/>
    <script>
    //Facebook Recommendation bar by www.mybloggertricks.com
    //<![CDATA[
    undefinedfunctionundefinedd, s, id) {
    var js, fjs = d.getElementsByTagNameundefineds)[0];
    if undefinedd.getElementByIdundefinedid)) return;
    js = d.createElementundefineds); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId= 260846114015966";
    fjs.parentNode.insertBeforeundefinedjs, fjs);
    }undefineddocument, '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.iosstuffs.blogspot.com' trigger='40%'/></div>
    </b:if></b:if>

    ReplyDelete
  20. It feels great that almost everyone found the tutorial helpful. Thanks for all the valuable feedback pals. :)

    @Ariskevin siringoringo
    Of course not. This is a 302 redirect which is a temporary redirect and does not effect sites' PR or any ranking. The redirect is important so that Facebook insights may work and stats could be retrieved out of the plugin. Hope this helps :)

    @egyhacks

    Upon your request please read this :) Blogger introduced Permalink option


    @Abhishek sony
    Don't you think your comment is off-topic? :) Please avoid off-topic queries dude.

    You can now download all resources without waiting from this page Download Page

    Our template is a customized version of MBT chruch theme we have already shared its structure which you can modify. That another template that you requested was created for a client and therefore I could unfortunately can not share it.

    I can see your navigation menu and its working perfectly. Just customize it more and work on listing formatting. YOu are using a Blogger template designer theme so may be you will find this post useful: Create Menu in Josh Peterson Templates

    Hope this helps :)

    @vivek nandha

    I have updated the post please read again to find your answer :)

    @Abhishek sony

    Thanks for helping others. Your code is surely the right one.
    :>

    @Gul Ahmed

    This happens when you create two Apps and use one but not the other. Please delete both your apps and recreate them. Make sure to submit site URL inside Website with Facebook Login

    It would work just fine. It happened with me too. :)

    @Rahmeen
    Thanks for the feedback. Well the widget works nice. Depends on users whether or not they tweet or hit the like button :)

    @iOS stuffs

    You are using the new blogger templates. Please read the tutorial again. You will need to paste it just below <body tag.

    ReplyDelete
  21. please if could view my blog and help add the facebook comment box to it , would be grateful

    ReplyDelete
  22. can not to get ID Recommendations

    ReplyDelete
  23. on my blog is not working
    is there something wrong? I have followed the steps correctly, try to check at my blog wartabeta.com

    ReplyDelete
  24. I am getting the same error as Gul Ahmed. I deleted the fb app and recreated it, but I am still getting the error. My blog is hosted on blogspot, could the URL be a problem? My URL reads www.sandyspeak.blogspot.com It isn't exactly a primary domain, it is more like a subdomain of blogspot. Thoughts?

    ReplyDelete
  25. I tried to add this recommendation bar using other blog tutorial but they didn't worked on my blog. But after i use your tutorial , i successfully installed it on my blog.

    But i have got one problem. I did't follow the step 4 given by you because when i followed that step then it gives a error message and after i deleted that step then it successfully implement on my blog.

    Does it makes any different if i did't follow that step 4.

    Regards
    Blogging Tips

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. @Mohammad Mustafa Ahmedzai

    Bro i tried monop , cute box and mbt church , in all of these three , the page navigation is not working :/

    and yes i am sorry i know this is not related to this topic but i was planning to buy a domain , that's why i need that professional looking template

    Btw this widget working fine on my current blog :) thanks for sharing ^_^

    ReplyDelete
  28. This comment has been removed by the author.

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

    ReplyDelete
  30. mustfa bro i need your help!
    sorry for going off topic but my blog has a strange problem like whenever i share any post on facebook the post won't display the article title rather it shows the blog title 'i.e' blogger freaks.

    ReplyDelete
  31. Hello Mohammad,
    Thanks for your work. I followed your steps and it worked perfectly, but the problem I having is that the Recommend Bar is not showing the individual post titles. It rather showing my blog name.

    Please can you tell me how to fix this?

    ReplyDelete
  32. Dear,

    Still I can't able to get this widgets on my blog.
    Im not good at HTML
    Can you pls monied the HTML for my blog and send it to me.
    I really helpfully about this.

    www.iosstuffs.blogspot.in

    ReplyDelete
  33. Well it expands but doesn't collapse back again when we go to top of the page. Any way out??

    ReplyDelete
  34. Another question:
    What is the impact of the read time if I just put it on 1 second. Will it load faster?? or I am going the wrong way in understanding that??

    ReplyDelete
  35. Those who are using blogspot domains must submit the correct url as
    http://domain-name.blogspot.com/

    and you must not add the following formats:
    1. http://www.domain-name.blogspot.com
    2. www.domain-name.blogspot.com
    3. domain-name.blogspot.com

    Make sure to include http:// at the front, and end domain URL with /

    @santu
    If you don't add it then older versions of internet explorer wont display the plugin correctly. Try again the code is just perfect. Make sure you are adding a space after pasting the code.

    @Victor
    It is working fine on all browsers including chrom and safari. Check if you have followed all steps correctly.

    @Abhishek sony
    For that please read: Fix for page navigation

    Glad it worked in your template :)

    @meesum raza

    Please add the meta tags I shared in the post update. The post has some new steps.:)

    @Jackson Nwachukwu
    The post is updated please add the meta tags in your blog. :)


    @Dheeraj Verma

    You must try again and again until you do it yourself. This is how we all learnt and I strongly recommend that you adopt this habit. :)

    @Bhavesh
    Buddy unfortunately it does not collapse when scrolled up. The minimum speed time is 10 seconds. So you can't assign a value less then this. :>

    ReplyDelete
  36. Ok.. So that 10 seconds is actually the load time or the time it takes to load AFTER the reader reaches 40% of the page. Right?

    ReplyDelete
  37. Amazing widget... It is working very without any error on my blog www.techshortly.com.. Thanks for providing such a wonderful widgets..

    ReplyDelete
  38. Salam Musfta Bro, How Are You?
    well my problem is still not solved what my problem is, i had bought a custom domain from godady via blogger and i have installed your recommendation bar but then i noticed that my posts title are not showing up when i share them on facebook instead it shows the blog title i.e 'Blogger Freaks'and then i switched back to sub domain and then share and the post title showed up! :( help me please because i had changed the title on facebook my self by clicking on it and changing it to the title of the article but on the recommendation bar its showing blogger freaks for all posts with the thumbnail of the post! :(
    -Regards,
    Meesum Raza.

    ReplyDelete
  39. another problem i noticed is that, some posts are showing title in facebook but not all like only 2 posts are please help me.
    -regards,
    Meesum Raza

    ReplyDelete
  40. thank you :)
    it works well on my blog

    ReplyDelete
  41. Hi Mohammad,

    I really need this work right on my blog. I have added the meta tag as you suggested but my blog title still shows up on the Facebook Recommendation Bar.Please would you mind viewing my blog page source to check how the tag is placed?

    I will really apprciate.

    Thanks bro!

    ReplyDelete
  42. @Jackson Nwachukwu
    hey! same happening with me two posts are showing title others are not :/ its happening since I switched to custom domain.

    ReplyDelete
  43. Thank you Mohammad! your tutorial worked like a dream. Keep up the good work. I am a big fan!!

    ReplyDelete
  44. Nice Tutorial.I have applied it to my site Go Tricks.

    ReplyDelete
  45. Thanks a lot buddy for his knowledge, love to visit and read here, if you do not mind me very happy if you want to be my friend, and I asked for permission to publish into Indonesian. I wait for my friend's presence and comments on my blog ... and once again thank you very much for science ...

    ReplyDelete
  46. It is also showing recommendations of Static pages like Contact us, About Us. Can anyone suggest a fix? Just like everyone i too need to show only posts as recommendations in the bar.

    ReplyDelete
  47. Salam,
    I would like to say this Mustafa, that you are a good guy that's another thing but you fail to solve the problems of many of your readers including me I tried to contact you but no response from your side and I myself found the solution of how to solve the wrong title problem and yeah another thing the troubleshooting method you have mentioned do works but only for new posts you should mention this as well and I had wrote an article on how to solve the problem for old posts as well somebody having the same problem read the article below!
    Facebook Share Post Wrong Title Fix

    ReplyDelete
  48. @Jackson

    Please add the meta tags shared in troubleshooting section in the post above. things will work just fine.

    @harsh

    The plugin wont show in static pages I have inserted the conditional tags. However you can control where the plugin show and where not by applying the conditional tags on this page: Show and hide widgets

    You will need to add it next to the purple highlighted code above. :)

    @meesum
    W.salam!
    Apologies buddy, was so lost in work that I kept almost everyone waiting this week. I am really glad its working fine now for you. buddy adding Meta tags that we shared above is the only solution to it. I checked your blog and you are using the same code except that you added the post search description code also which we already shared on this post: SEO Settings for blogger I have added this code above now.

    You may delete the last two lines of your code because they are optional and the last line is an empty conditional tag which is not necessary.

    This is the full code if you had missed our tutorial on Meta description:

    <meta content='article' property='og:type'/>
    <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta expr:content='data:blog.pageName' property='og:title'/>

    <b:if cond='data:blog.metaDescription != &quot;&quot;'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    </b:if>



    I am a human dear and replying so many people is not that easy. hope you understand :)

    To help out most readers on this issue I will publish a tutorial. Thanks meesum for bringing it into focus.

    ReplyDelete
  49. @Mohammad Mustafa Ahmedzai
    Salam,
    Apologies for being harsh before but actually the thing was that it was freaking me out and yeah shot the tutorial :) and well I have created one meanwhile readers here can check the one I made: Link To The Tutorial
    -Regards,
    Meesum Raza

    ReplyDelete
  50. "Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the Application configuration. It must match one of the Connect or Canvas URLs or domain must be the same as or a subdomain of one of the Application's base domains.


    this error comes what to do now????

    ReplyDelete
  51. Thanks for sharing.

    I tried implementing it but mine shows only one link and its my homepage.

    How do i fix this up?

    Thanks in advance :)

    ReplyDelete
  52. @Admin

    dude simply change the value of 3

    num_recommendations='3'

    change the 3 to how many suggestions you want to appear!

    Adding Cool Marquee In Blogger Posts

    ReplyDelete
  53. Title, description, picture, do not appear. What should I do?
    Chek : http://infoiki.blogspot.com

    ReplyDelete
  54. @Mohammed I think there's a communication gap here.I meant that the plugin is suggesting static pages and not that the plugin is showing up on static pages. For eg. The three suggestions of posts that the plugin displays is including links to static pages like contact us etc. It is displaying only on posts as you tell me but that's not the problem i conveyed. Hope i am clear this time.

    Thanks a ton
    Harsh

    ReplyDelete
  55. @meesum

    You are always welcomed buddy and thanks for helping others. More power to you. :)

    @adityaplanet

    Read the answer in comment#42 :)


    @Harsh
    I get you know. Harsh the plugin displays pages that you and your friends like. What you see may appear different when I see that. I will see likes on your page from my friends and similarly you will see recommendations at MBT plugins from people on your profile. So it shows related Likes made by your friends not related posts.

    If none of your friends in your list liked any of your page then you will see only the title with no likes count.

    cleared? :)

    ReplyDelete
  56. @meesum raza Thanks for the reply but its set at 3 already but shows only 2. I tried changing it to 4 to see if it will show 3 but it still shows two. You can check my page here http://www.nigeriancareerstoday.com/

    Thanks in advance :)

    ReplyDelete
  57. @Mohammad Mustafa Ahmedzai
    np at all bro! :)

    @Admin
    bro as Mustafa had cleared it in the comment #62 that it will only show the static pages and articles your friends liked or shared.

    ReplyDelete
  58. @Yustin Annisa

    bro its already cleared you have to add the meta code scroll up and check the trouble shooting heading and for the old posts check the following link: Fix- No Title Facebook Share

    ReplyDelete
  59. @ Mohammad

    I have followed the above steps to my template. finally I am trying to save the template it is showing error like below

    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: Attribute "xmlns:fb" was already specified for element "html".

    Can you tell me the solution asap?

    ReplyDelete
  60. @naguakkina

    Just Skip the Step 4 it will work for u (Not Sure)

    ReplyDelete
  61. Pretty much cleared bro. But can't we have a solution for not showing static pages? I mean it doesn't seem so good showing a Contact Us page as a recommendation right? While writing this i am able to see this : http://www.mybloggertricks.com/2008/06/something-about-me.html as a recommendation on your bar. Seems a bit out of place from the point of view of the reader doesn't it?
    Thanks for the detailed explanation above. You are becoming quite regular in replying comments these days it seems. Liked that pretty well :). Let us all know if there comes a fix to the thing i mentioned above. I understand you have a very tight schedule so its ok if you don't reply to this comment. I am quite lazy at replying comments myself :p

    Happy Weekend
    Harsh

    ReplyDelete
  62. how can i delete "purple bolded lines", i didnt find the word "purple bolded lines" in your code. thx 4 sharing with us. :-)

    ReplyDelete
  63. O my blog I am getting the widget.. but in the widget no posts are showing... Dont know why !! Plz help..
    site url : www.hackinguniverse.org
    facebook fanpage url:https://www.facebook.com/hackinguniverse
    Plz help.. Dont know why I am not getting it..

    ReplyDelete
  64. Thanks for this post, if you want updated news about market conditions and about investors then you just follow http://valueslots.com

    ReplyDelete
  65. THANK YOU SO MUCH
    I HAVE 1 problem:
    the thumbnails of each recommendation is the same i.e. the thumbnail of the blog itself. how i can fix this.

    you can see this on the following link
    http://kolyoumseha.blogspot.com/2012/05/bad-breath-q.html

    thanks

    ReplyDelete
  66. in my blog www.mojemoj.com blogger i used your code, it's giving like button inside post, recommendation bar comes with "You may also like mojemoj.com registered with namecheap.com"

    this looks odd? from where this is coming?

    ReplyDelete
  67. For some reasons, its not showning up. What to do?
    I m adding using direct code like we do in case of like box

    ReplyDelete
  68. hey mohammad i recently changed the domain name and is giving an error as....

    "Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains."

    even though i created a new app and updated with app id and website what might be wrong previously its working great...plz help waiting for your reply...

    ReplyDelete
  69. hey mohammad i recently changed the domain name and is giving an error as....

    "Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains."

    even though i created a new app and updated with app id and website what might be wrong previously its working great...plz help waiting for your reply...

    ReplyDelete
  70. @Rounak Baral:
    dude only the posts which are shared or liked appear.

    @حمادة حسن اللق:
    hey there thank you for the comment you have to add the meta tags as shown in the step troubleshooting step.

    @Dharmesh Vyas:
    dude its working fine, its saying that you might also like the articles below. :)

    @yourcyberguide.com:
    as Mustafa is busy now a days so he can't help most of you out there so if you want further help with it shoot an email on admin@bloggerfreaks.com and I'll help you out, as you have not explained your problem here.

    @HUNK:
    delete all of you'r facebook apps which you made for the Recommendation Bar and create a new one.

    Blogger Widgets And More

    ReplyDelete
  71. thank you for reply. i do what you said but the problem is still the same
    see this link

    ReplyDelete
  72. Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

    What should i do ?

    ReplyDelete
  73. @Tanmay Kapse
    That error usually comes when you preview your post or template where the url changes to something different and that's why it says the url must match the Website URL.

    Are you getting this error on your live blog or just when previewing?

    ReplyDelete
  74. Master,it Won't work at in My Blog[[[[[[http://www.agazsantiago.com]]]]

    If You have any solution please Help me

    ReplyDelete
  75. This comment has been removed by the author.

    ReplyDelete
  76. hey i just followed every step as you write but i cannot see this widget in my blog
    here is url: freelatestphotos.blogspot.com
    w8ing 4 ur kind reply

    ReplyDelete
  77. Thank you very much. Nice blog :)

    ReplyDelete
  78. assallam wallaikum bhai will you tell me https://developers.facebook.com/apps/ that site given error this site not found plz tell me what's problem

    ReplyDelete
  79. Hi,

    I have installed based on your steps, but I have a problem in my blogger. Recently Google started redirecting the blogger blogs to country specific domains, which makes to go to .in in case of india, instead of .com . Because of this FB recomendation bar throws error, since the site url doesnt match with the actual url.
    I can give only one url in site url, anything other than that throws error :( tell me a sloution for this .. my blog : http://techicloud.blogspot.com

    ReplyDelete
  80. it doesn't work on firefox but works on chrome
    plz help me.
    computerplanet4u.blogspot.com

    ReplyDelete
  81. Please see my blog..

    My Blog

    Nothing Happen :'(

    ReplyDelete
  82. I tried this widget from different websites before, Nothings worked.. But this time from MBT it works perfectly.. You are the Best .. Thanks... :) see my blog- Free Android App Shop

    ReplyDelete
  83. Anyway to remove blog name from recommendation bar? It always showing in my facebook recommendation bar, see this post- Rave Live Wallpaper

    ReplyDelete
  84. This comment has been removed by the author.

    ReplyDelete
  85. hello...............
    i am getting this type of error.
    what is this?
    how to solve this problem.?

    Object at URL http://computerplanet4u.blogspot.com/2012/08/driver-magician-37-multilingual.html has og:type of 'website'. The property 'article' requires an object of og:type 'article'.

    And i am also getting this type of error on your blog.......

    Object at URL http://www.mybloggertricks.com/2012/06/add-facebook-recommendation-bar-to.html has og:type of 'website'. The property 'article' requires an object of og:type 'article'.

    both the error are same.
    please help me to solve this problem.....

    ReplyDelete
  86. hello thanks alot for this share i have applied on my blog but i have get this error
    Object at URL has og:type of 'website'. The property 'article' requires an object of og:type 'article'.

    ReplyDelete
  87. Sorry to say but it will not work for country specific blogger domains... if you'll install it for blogspot.com it will not work for blogspot.in :(

    I found a solution. Welcome

    ReplyDelete
  88. Update

    For those of you who are facing a og:type of 'website' error. Please copy and paste the code given in troubleshooting section inside your templates just below head tag. Hopefully things will get fixed.

    @Dharmik Shah @Aly Mansour :)

    @Vinay Prajapati
    I have not heard of any complain as yet but yes adding the country specific domain names in App-Domain could help.

    @Sebin Thomas
    Unfortunately there is no way to remove a URL from display results using Facebook App. Once your posts make more likes, the homepage wont appear that often. Facebook only display posts that either you liked or your firneds in FB and does not display results for posts that anyone else liked. Hope this clarifies. :)

    ReplyDelete
  89. @Mohammad
    I think the last 3 lines of b:if are not needed if you already have the meta description hack.

    ReplyDelete
  90. Now I get:

    'article' is invalid because the given value '' for property 'og:image:url' could not be parsed as type 'url'.

    :(

    ReplyDelete
  91. Thanks bro! You did such a good job. Thanks for the effort! It really works in my blog.

    you can visit, if you mind: http://www.advanteck.co.cc/

    ReplyDelete
  92. I am also getting this error
    of type 'article' is invalid because the given value '' for property 'og:image:url' could not be parsed as type 'url'.

    ReplyDelete
  93. sallam admin.... great work... but having lil problem it is not showing posts it is empty in my blogger....
    http://gamezshotz.blogspot.com

    ReplyDelete
  94. This comment has been removed by the author.

    ReplyDelete
  95. Dear @Bhavesh, @Nida and others having 'parseurl issue':

    I also hdd same problem, instead of displaying recommendations , it gave that error message. To avoid that error please do the following:

    1. Remove the troubleshooting code above in this tutorial from your template's html.

    2. Then find </head>, and paste following code just above </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'/>

    You are done....I hope this troubleshooting will also help you guys...

    You may check at: http://www.scholarguide.blogspot.com
    /

    Best,

    ReplyDelete
  96. after staying up all night battling this using the tutorial from facebook dev - i guess its safe to say i'm not a dev..

    I found your tutorial very helpful and it cleared out all the og:url errors i was having.


    ReplyDelete
  97. Dear Mohamed, i get this error..?? "Object at URL http://www.kulaful.com/2012/09/heart-shaped-crystal-embellished.html has og:type of 'website'. The property 'article' requires an object of og:type 'article".... plz help me to fix it??

    ReplyDelete
  98. Sorry but not work for me
    www.samjhanakophool.blogspot.com

    ReplyDelete
  99. Hello

    First your tutorials are great and I use them a lot!

    I've implemented the recommendation bar but it's only show me the box with the name of my website and that's all, without other posts stories.

    You can see that on: http://www.talsegalmarketing.com

    Do you know maybe what's wrong?

    Thanks! Tal

    ReplyDelete
  100. I used this, but some of the thumbnail is my google+ picture.

    Can you fix this.

    By the way, Great. We Appreciate this.

    ReplyDelete
  101. Object at URL http://www.indiarocks.co.in/2012/09/chanakyudu-2012-telugu-mp3-songs-free.html has og:type of 'website'. The property 'article' requires an object of og:type 'article'.

    ReplyDelete
  102. Im getting this error:

    Object Invalid Value: Object at URL 'http://world-football-report.blogspot.com/2012/09/conte-ban-extended-worldwide.html' of type 'article' is invalid because the given value 'BLOG-LOGO-IMAGE-LINK' for property 'og:image:url' could not be parsed as type 'url'.

    I need Help as far as possible

    ReplyDelete
  103. Plz help the widget is working correctly but instead of coming up it shows the error


    Object at URL http://www.androidcustomz.com/2012/09/worlds-best-image-quality-camera-from.html has og:type of 'website'. The property 'article' requires an object of og:type 'article'.

    ReplyDelete
  104. Thanks for your sharing again.

    ReplyDelete
  105. Brother I have Installed the Widget Sucessfully on my Blog.....but the widget is showing my blog's title but not the post's title....can you please help me

    ReplyDelete
  106. Really great. I added facebook recommendation bar to my blog

    ReplyDelete
  107. Assalam o Aliakum....
    Awesome widget
    but it is not working in my blog....
    http://itnewscorner4u.blogspot.com/

    ReplyDelete
  108. thanks for this bar sir. it worked on my blog http://123inztructor.blogspot.com

    ReplyDelete
  109. hello mohammad bro , i have quetion for u ,hope u will provide my solution as u read this comment,bro in my blog www.fobbleup.blogspot.com, the facebook reccomendation bar appearas but it discloses the back to top bar or hides that ,give me solution for that and also the facebook scroll like panel disappears.waiting for ur reply bro

    ReplyDelete
  110. Thank, but, if I add the <html xmlns:fb='http://ogp.me/ns/fb#' code, it tells me error. it says 'fb' is already added but the widget does not work. How can you help?

    ReplyDelete
  111. In My Blog This is not working My Blog is http://alayesha.blogspot.com/ Is this Any Problem With my templet Please Help Me About Add Facebook Recommendations Bar for my blog

    ReplyDelete
  112. Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: Element type "body" must be followed by either attribute specifications, ">" or "/>".

    Error 500


    it shows error like this wat i need to do???

    ReplyDelete
  113. Hey I already had a post slide out which worked very well and this facebook app only recommends the actual website and not any pages is it to do with the post slide out code or is it something else? Please help! http://www.joncassidysradioblog.com

    ReplyDelete
  114. So brilliant post dude,,i already add this,,all of thing is working,,thanks for this brilliant and wonderful tips..

    Thanks
    BLOGGER HEROE,Tips and Tricks For Blogger,widgets,Templates

    ReplyDelete
  115. So brilliant post dude,,i already add this,,all of thing is working,,thanks for this brilliant and wonderful tips..

    ThanksShow Copyright When Someone Hack Your Article

    ReplyDelete
  116. Is there any way to have the "You Might Also Like" in the top header/next to the "Like" button?

    The Recommendations box on the FB Dev page has "Recommendations" in bold black for a header, which looks rather nice.

    Otherwise it works well and I got it working in Drupal, albeit mins your blog statements.

    ReplyDelete
  117. thank you sir. i have done everything as instructed in this post and it is working.

    ReplyDelete
  118. awesome piece of work buddy....it kinda took me hours to get it right on my blog www.thegeeksolutions.in
    You guys are doing an awesome job.

    Regards,

    Mohit

    ReplyDelete
  119. thank you such a nice info....
    i am going to place it on my blog newshareworld.blogspot.com

    ReplyDelete
  120. Thanks so much for this, it worked :)

    ReplyDelete
  121. hi mohammad my blog is

    http://irfrench.blogspot.com/

    languages of my blog is persian but recommendation bar not work in my blog please help me dude. thanks

    ReplyDelete
  122. Assalamu Alaikum Bro,
    my site's reader recommendations are not showing for logged out users. Can you help me out on this isuue?

    THanks

    ReplyDelete
  123. This comment has been removed by the author.

    ReplyDelete
  124. Hello!
    Again a great post. You always rock!

    A small problem while I was doing what you have said in this awesome tutorial.
    The recommendation box is displaying only the url of the blog and no post links.
    Can you guide me through this?
    Where i went wrong?

    Thank You!

    My blog is : www.ilovelol.in

    ReplyDelete
  125. @Meghraj Create more posts or sign out of facebook when viewing your website.

    http://radio.joncassidysradioblog.com/

    ReplyDelete
  126. I am a Google+ blogger, how can i apply this to my blog.

    ReplyDelete
  127. muhammed in recoomendation box my page title oly is getting displayed not d post title pls help me see the snap shot

    http://2.bp.blogspot.com/-jMXTbfZDH20/UNxOtVjnqAI/AAAAAAAAAw8/xEdnT-nweRs/s1600/error.jpg

    ReplyDelete
  128. others also please try to help me out.....

    ReplyDelete
  129. hey Mohammad
    help me please this is not working on my blog

    i have tried thrice but i could find the problem

    ReplyDelete
  130. AoA,

    Please help me ..
    http://emagazineavira.blogspot.com
    this is my website link ... my post title dont appear in the recommendation bar. All posts are shown as my blog title. Kindly help me pleaseeee :'(

    ReplyDelete
  131. ya same problem here pls help out :(

    ReplyDelete
  132. This is a great tool, i'he appleid to my blog and work! Thanx u...

    ReplyDelete
  133. Hello,

    I have the same problem as the person on comment 127. Your assistance would be great. I install it but I get this error;

    "fb:recommendations-bar" must be followed by either attribute specifications, ">" or "/>".

    ReplyDelete
  134. lovely i used this trick on my blog
    http://filmslink4net.blogspot.in/

    ReplyDelete
  135. Cảm ơn bạn đã chia sẻ ,đây đúng là điều mình đang cần tìm cho blogger của mình là Nhà Đẹp - Bếp Xinh..bài viết rất hay :)

    ReplyDelete
  136. Not displaying post name and image correctly even after adding those codes inside the <head> section. Also this is showing previous deleted posts :(

    Please Help me. :)

    ReplyDelete
  137. nice post...
    '<'a href='"'http://www.elessons.info/php/getting-system-information-with-phpsysinfo/'"' target='"'_blank'"''>'tips for getting php system info'<'/a'>'

    ReplyDelete
  138. All works well, I've successfully added Facebook Recommendations Bar to my Wonderful Tech Stuff blog - http://tech-wonders.blogspot.com/ || Thank you very much Mohammad ♥

    ReplyDelete
  139. Hi..tried the code, but it is not working for me:( It does not allow to replace the html. That could be why?

    ReplyDelete
  140. Thanks for the nice tutorial.Works great on my blog http://apk3.blogspot.com/. I want's to configure the width size. How can I do this???

    ReplyDelete
  141. It's very helpful widget but alas It's not working in my site : http://technomahal.blogspot.com
    because I'm using facebook comment box and can't implement <html xmlns:fb='http://ogp.me/ns/fb#' this line,showing me some errors,please help me...

    ReplyDelete
  142. This comment has been removed by the author.

    ReplyDelete
  143. Very nice information...but is this the plugin pops up below the right hand side of the footer whenever the user opens up the blog..or will it stick to one particular location like in the side bar...actually i want to use this plugin when the user opens the blog and it should display at the bottom of the right side..please any suggestions...

    ReplyDelete
  144. Yessss THANK YOU ! This is a great little addition to blogs, on behalf of everyone who is looking to generate more traffic thanks

    ReplyDelete
  145. Thank you very much for the tip, is fantastic ...

    ReplyDelete
  146. Help me Mohammad, the plugin is only displaying posts more than 2-3 months old, I have no clue why. All the latest posts don't never display, and we have at least 5 new posts a week, sometimes 10

    My page is http://electrokill.info

    ReplyDelete
  147. HEY I FOLLOW ALL STEPS AS U SAY FINALLY I GET WIDGGET BUT ONLY HOMEPAGE TITLE SHOW ME PLS HELP ME MY BLOG LINK IS
    http://www.chauhank-akash.blogspot.in

    ReplyDelete
    Replies
    1. Same issue here as of Akash...
      Need help

      Delete
    2. Same issue here :( Please halp!!!

      http://www.electrokill.info
      http://www.electrokillmedia.com

      Delete
  148. Please, we need you to help us!

    We are trying to load the facebook recommendations widget api as iframe in our ajax loaded page.

    The first time We load the page, the facebook's script works, but if We go back to the menu and back to this page where widget is located, then it doesnt load it?

    How to solve it?

    ReplyDelete
  149. I really enjoy reading and also appreciate your work.

    pirater un compte facebook

    ReplyDelete
  150. This short article posted only at the web site is truly good.how to get the most likes on facebook

    ReplyDelete
  151. Really good content and also loved reading this.Great content.Thanks.

    ReplyDelete