Finally 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.
- Log into Facebook Apps
- Click on Create New App button towards Top-right
- In the box that pops up, type "My Recommendation Bar" inside the App name field and leave other options as default. Click continue.
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.
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.
Congrats App finally created! Lets proceed to step2.
Step2: Add "Recommendations Bar" To Your Blog
Follow these steps to add the bar to Blogger:
- Go to Blogger > Template
- Backup your template
- Click Edit HTML > Proceed
- 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 == "item"'><b:if cond='data:blog.pageType != "static_page"'><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.
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 != ""'>
<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!
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 »
awesome... thanks
ReplyDeleteGreat widget! I've seen it on mashable and was wondering when will it be available for blogger blogs.
ReplyDeleteThis is awesome!
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)
ReplyDeleteThank you very much, I was also waiting for this, thanks to you guys Blogger keeps getting better, keep it up!! and thanks again!!!
ReplyDeleteNot working in my blog, please help me
ReplyDelete@arhamvhy Thanks it's working master :)
ReplyDeleteVery very cool
ReplyDeleteThis is just awesome! I liked this recommendation widget!WOrking perfectly in my Blogger Blog
ReplyDeleteGiven 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.
ReplyDeletebecause of redirection of country specification. :(((( what to do reply asap
Needless to say that you're always informative Mohammad thanks for you efforts.
ReplyDeleteWould you mind to post about blogger's new feature "Permalink". I saw it today in my blogger post editor.
Awesome widget i too have been waiting for this
ReplyDeleteworking great..thanks
ReplyDeleteHello Mohammad Bro
ReplyDeleteI 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
Correction in Email : sony.abhishek.1 G M
ReplyDelete:)
In my blog template I can't find (body) so what can I do??plz help me!!!
ReplyDelete(data:post.body) tag is also missing...???!!!!plz anybody knows what can I do?
ReplyDelete@vivek : Instead of (body) search something liks
ReplyDelete( expr:class='"loading" + data:blog.mobileClass'>)
Or check here for more http://www.mybloggertricks.com/2011/06/disadvantages-of-template-designer.html
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@Mohammad
ReplyDeleteThis comment widget is awesome but I dont like this facebook bar.It is not attractive,so dull. I like the one on apptec.
@Mohammad
ReplyDeletebtw is this floating bar widget working correctly? How can there be such lesser no. of tweets and pins etc
Not working my blog pls check
ReplyDeletewww.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 == "item"'><b:if cond='data:blog.pageType != "static_page"'><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>
It feels great that almost everyone found the tutorial helpful. Thanks for all the valuable feedback pals. :)
ReplyDelete@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.
please if could view my blog and help add the facebook comment box to it , would be grateful
ReplyDeletecan not to get ID Recommendations
ReplyDeleteon my blog is not working
ReplyDeleteis there something wrong? I have followed the steps correctly, try to check at my blog wartabeta.com
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?
ReplyDeleteThis comment has been removed by the author.
ReplyDelete@Mohammad Mustafa Ahmedzai
ReplyDeleteBro 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 ^_^
This comment has been removed by the author.
ReplyDeleteSo Good Widget Just love it :)
ReplyDeleteThanks!!
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeletemustfa bro i need your help!
ReplyDeletesorry 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.
Hello Mohammad,
ReplyDeleteThanks 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?
Dear,
ReplyDeleteStill 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
Well it expands but doesn't collapse back again when we go to top of the page. Any way out??
ReplyDeleteAnother question:
ReplyDeleteWhat 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??
Those who are using blogspot domains must submit the correct url as
ReplyDeletehttp://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. :>
@@Abhishek sony
ReplyDeleteoops here goes the link fix page navigation
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?
ReplyDeleteAmazing widget... It is working very without any error on my blog www.techshortly.com.. Thanks for providing such a wonderful widgets..
ReplyDeleteanother problem i noticed is that, some posts are showing title in facebook but not all like only 2 posts are please help me.
ReplyDelete-regards,
Meesum Raza
thank you :)
ReplyDeleteit works well on my blog
Hi Mohammad,
ReplyDeleteI 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!
@Jackson Nwachukwu
ReplyDeletehey! same happening with me two posts are showing title others are not :/ its happening since I switched to custom domain.
Thank you Mohammad! your tutorial worked like a dream. Keep up the good work. I am a big fan!!
ReplyDeleteThanks 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 ...
ReplyDeleteIt 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@Jackson
ReplyDeletePlease 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 != ""'>
<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.
"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.
ReplyDeletethis error comes what to do now????
Thanks for sharing.
ReplyDeleteI tried implementing it but mine shows only one link and its my homepage.
How do i fix this up?
Thanks in advance :)
Title, description, picture, do not appear. What should I do?
ReplyDeleteChek : http://infoiki.blogspot.com
@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.
ReplyDeleteThanks a ton
Harsh
@meesum
ReplyDeleteYou 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? :)
@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/
ReplyDeleteThanks in advance :)
@Mohammad Mustafa Ahmedzai
ReplyDeletenp 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.
@ Mohammad
ReplyDeleteI 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?
@naguakkina
ReplyDeleteJust Skip the Step 4 it will work for u (Not Sure)
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?
ReplyDeleteThanks 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
how can i delete "purple bolded lines", i didnt find the word "purple bolded lines" in your code. thx 4 sharing with us. :-)
ReplyDeleteO my blog I am getting the widget.. but in the widget no posts are showing... Dont know why !! Plz help..
ReplyDeletesite url : www.hackinguniverse.org
facebook fanpage url:https://www.facebook.com/hackinguniverse
Plz help.. Dont know why I am not getting it..
not working, please help me ?
ReplyDeleteThanks for this post, if you want updated news about market conditions and about investors then you just follow http://valueslots.com
ReplyDeletethank u
ReplyDeleteTHANK YOU SO MUCH
ReplyDeleteI 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
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"
ReplyDeletethis looks odd? from where this is coming?
@Dharmesh Vyas
ReplyDeleteawaiting your earliest reply dude
thx
For some reasons, its not showning up. What to do?
ReplyDeleteI m adding using direct code like we do in case of like box
hey mohammad i recently changed the domain name and is giving an error as....
ReplyDelete"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...
hey mohammad i recently changed the domain name and is giving an error as....
ReplyDelete"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...
@Rounak Baral:
ReplyDeletedude 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
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.
ReplyDeleteWhat should i do ?
@Tanmay Kapse
ReplyDeleteThat 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?
Master,it Won't work at in My Blog[[[[[[http://www.agazsantiago.com]]]]
ReplyDeleteIf You have any solution please Help me
This comment has been removed by the author.
ReplyDeletehey i just followed every step as you write but i cannot see this widget in my blog
ReplyDeletehere is url: freelatestphotos.blogspot.com
w8ing 4 ur kind reply
Thank you very much. Nice blog :)
ReplyDeleteassallam 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
ReplyDeleteHi,
ReplyDeleteI 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
hello thanks alot for this share i have applied on my blog but i have get this error
ReplyDeleteObject at URL has og:type of 'website'. The property 'article' requires an object of og:type 'article'.
@Dharmik Shah
ReplyDeleteadd meta article meta tag//given above
Update
ReplyDeleteFor 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. :)
@Mohammad
ReplyDeleteI think the last 3 lines of b:if are not needed if you already have the meta description hack.
Now I get:
ReplyDelete'article' is invalid because the given value '' for property 'og:image:url' could not be parsed as type 'url'.
:(
Thanks bro! You did such a good job. Thanks for the effort! It really works in my blog.
ReplyDeleteyou can visit, if you mind: http://www.advanteck.co.cc/
I am also getting this error
ReplyDeleteof type 'article' is invalid because the given value '' for property 'og:image:url' could not be parsed as type 'url'.
sallam admin.... great work... but having lil problem it is not showing posts it is empty in my blogger....
ReplyDeletehttp://gamezshotz.blogspot.com
This comment has been removed by the author.
ReplyDeleteDear @Bhavesh, @Nida and others having 'parseurl issue':
ReplyDeleteI 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 == "item"'>
<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='"en_US"' 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,
after staying up all night battling this using the tutorial from facebook dev - i guess its safe to say i'm not a dev..
ReplyDeleteI found your tutorial very helpful and it cleared out all the og:url errors i was having.
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??
ReplyDeleteSorry but not work for me
ReplyDeletewww.samjhanakophool.blogspot.com
Hello
ReplyDeleteFirst 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
I used this, but some of the thumbnail is my google+ picture.
ReplyDeleteCan you fix this.
By the way, Great. We Appreciate this.
Im getting this error:
ReplyDeleteObject 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
Plz help the widget is working correctly but instead of coming up it shows the error
ReplyDeleteObject 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'.
Thanks for your sharing again.
ReplyDeleteBrother 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
ReplyDeleteSupper cool thanks
ReplyDeleteAssalam o Aliakum....
ReplyDeleteAwesome widget
but it is not working in my blog....
http://itnewscorner4u.blogspot.com/
thanks for this bar sir. it worked on my blog http://123inztructor.blogspot.com
ReplyDeletehello 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
ReplyDeleteThank, 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?
ReplyDeleteIn 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
ReplyDeleteYour template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
ReplyDeleteXML 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???
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
ReplyDeleteIs there any way to have the "You Might Also Like" in the top header/next to the "Like" button?
ReplyDeleteThe 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.
thank you sir. i have done everything as instructed in this post and it is working.
ReplyDeleteawesome piece of work buddy....it kinda took me hours to get it right on my blog www.thegeeksolutions.in
ReplyDeleteYou guys are doing an awesome job.
Regards,
Mohit
thank you such a nice info....
ReplyDeletei am going to place it on my blog newshareworld.blogspot.com
Thanks so much for this, it worked :)
ReplyDeletehi mohammad my blog is
ReplyDeletehttp://irfrench.blogspot.com/
languages of my blog is persian but recommendation bar not work in my blog please help me dude. thanks
Assalamu Alaikum Bro,
ReplyDeletemy site's reader recommendations are not showing for logged out users. Can you help me out on this isuue?
THanks
not working sir
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHello!
ReplyDeleteAgain 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
@Meghraj Create more posts or sign out of facebook when viewing your website.
ReplyDeletehttp://radio.joncassidysradioblog.com/
I am a Google+ blogger, how can i apply this to my blog.
ReplyDeletemuhammed in recoomendation box my page title oly is getting displayed not d post title pls help me see the snap shot
ReplyDeletehttp://2.bp.blogspot.com/-jMXTbfZDH20/UNxOtVjnqAI/AAAAAAAAAw8/xEdnT-nweRs/s1600/error.jpg
others also please try to help me out.....
ReplyDeletehey Mohammad
ReplyDeletehelp me please this is not working on my blog
i have tried thrice but i could find the problem
AoA,
ReplyDeletePlease 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 :'(
ya same problem here pls help out :(
ReplyDeleteThis is a great tool, i'he appleid to my blog and work! Thanx u...
ReplyDeleteHello,
ReplyDeleteI 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 "/>".
thank for this...
ReplyDeletelovely i used this trick on my blog
ReplyDeletehttp://filmslink4net.blogspot.in/
Not displaying post name and image correctly even after adding those codes inside the <head> section. Also this is showing previous deleted posts :(
ReplyDeletePlease Help me. :)
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 ♥
ReplyDeletethanks
ReplyDeleteTHanks Boss........You are Genious..
ReplyDeleteHi..tried the code, but it is not working for me:( It does not allow to replace the html. That could be why?
ReplyDeleteThanks 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???
ReplyDeleteIt's very helpful widget but alas It's not working in my site : http://technomahal.blogspot.com
ReplyDeletebecause 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...
This comment has been removed by the author.
ReplyDeleteVery 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...
ReplyDeleteYessss THANK YOU ! This is a great little addition to blogs, on behalf of everyone who is looking to generate more traffic thanks
ReplyDeleteThank you very much for the tip, is fantastic ...
ReplyDeleteHEY I FOLLOW ALL STEPS AS U SAY FINALLY I GET WIDGGET BUT ONLY HOMEPAGE TITLE SHOW ME PLS HELP ME MY BLOG LINK IS
ReplyDeletehttp://www.chauhank-akash.blogspot.in
Same issue here as of Akash...
DeleteNeed help
Please, we need you to help us!
ReplyDeleteWe 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?
Really good content and also loved reading this.Great content.Thanks.
ReplyDelete