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!
Filed Under: Blogger Widgets and plugins, Facebook tricks
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you
Subscribe to our regular Email Updates!
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 »
165 comments:
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
OMG i am loving it thanks :)
eColumns | Columns on Android, Apple and the Web.
awesome... thanks
Great widget! I've seen it on mashable and was wondering when will it be available for blogger blogs.
This 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)
Thank you very much, I was also waiting for this, thanks to you guys Blogger keeps getting better, keep it up!! and thanks again!!!
Not working in my blog, please help me
@arhamvhy Thanks it's working master :)
Very very cool
This is just awesome! I liked this recommendation widget!WOrking perfectly in my Blogger Blog
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
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.
Awesome widget i too have been waiting for this
working great..thanks
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
Correction in Email : sony.abhishek.1 G M
:)
In my blog template I can't find (body) so what can I do??plz help me!!!
(data:post.body) tag is also missing...???!!!!plz anybody knows what can I do?
@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
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
I instal this widget on my blog and working properly thanks bro..
Codes Blog
@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.
@Mohammad
btw 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
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 == "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. :)
@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
can not to get ID Recommendations
on my blog is not working
is 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?
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
@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 ^_^
This comment has been removed by the author.
So Good Widget Just love it :)
Thanks!!
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.
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?
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
Well it expands but doesn't collapse back again when we go to top of the page. Any way out??
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??
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. :>
@@Abhishek sony
oops 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?
Amazing widget... It is working very without any error on my blog www.techshortly.com.. Thanks for providing such a wonderful widgets..
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.
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
thank you :)
it works well on my blog
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!
@Jackson Nwachukwu
hey! 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!!
Nice Tutorial.I have applied it to my site Go Tricks.
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 ...
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.
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
@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 != ""'>
<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.
@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
"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????
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 :)
@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
Title, description, picture, do not appear. What should I do?
Chek : 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.
Thanks a ton
Harsh
@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? :)
@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 :)
@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.
@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
@ 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?
@naguakkina
Just 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?
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
how can i delete "purple bolded lines", i didnt find the word "purple bolded lines" in your code. thx 4 sharing with us. :-)
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..
not working, please help me ?
Thanks for this post, if you want updated news about market conditions and about investors then you just follow http://valueslots.com
thank u
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
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?
@Dharmesh Vyas
awaiting your earliest reply dude
thx
For some reasons, its not showning up. What to do?
I 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....
"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....
"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:
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
thank you for reply. i do what you said but the problem is still the same
see this link
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 ?
@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?
Master,it Won't work at in My Blog[[[[[[http://www.agazsantiago.com]]]]
If You have any solution please Help me
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
Thank you very much. Nice blog :)
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
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
Woah! That Much Comments Simply Nice
My Cyber Tricks-Earn Money
it doesn't work on firefox but works on chrome
plz help me.
computerplanet4u.blogspot.com
Please see my blog..
My Blog
Nothing Happen :'(
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
Anyway to remove blog name from recommendation bar? It always showing in my facebook recommendation bar, see this post- Rave Live Wallpaper
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.....
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'.
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
@Dharmik Shah
add meta article meta tag//given above
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. :)
@Mohammad
I think the last 3 lines of b:if are not needed if you already have the meta description hack.
Now I get:
'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.
you can visit, if you mind: http://www.advanteck.co.cc/
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'.
sallam admin.... great work... but having lil problem it is not showing posts it is empty in my blogger....
http://gamezshotz.blogspot.com
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 == "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..
I 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??
Sorry but not work for me
www.samjhanakophool.blogspot.com
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
I used this, but some of the thumbnail is my google+ picture.
Can you fix this.
By the way, Great. We Appreciate this.
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'.
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
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'.
Thanks for your sharing again.
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
Really great. I added facebook recommendation bar to my blog
Supper cool thanks
Assalam o Aliakum....
Awesome 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
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
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?
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
http://aref-aldanby.blogspot.com/
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???
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
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
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
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.
thank you sir. i have done everything as instructed in this post and it is working.
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
thank you such a nice info....
i am going to place it on my blog newshareworld.blogspot.com
Thanks so much for this, it worked :)
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
Assalamu Alaikum Bro,
my site's reader recommendations are not showing for logged out users. Can you help me out on this isuue?
THanks
not working sir
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
@Meghraj Create more posts or sign out of facebook when viewing your website.
http://radio.joncassidysradioblog.com/
I am a Google+ blogger, how can i apply this to my blog.
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
others also please try to help me out.....
hey Mohammad
help me please this is not working on my blog
i have tried thrice but i could find the problem
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 :'(
ya same problem here pls help out :(
This is a great tool, i'he appleid to my blog and work! Thanx u...
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 "/>".
thank for this...
lovely i used this trick on my blog
http://filmslink4net.blogspot.in/
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 :)
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. :)
nice post...
'<'a href='"'http://www.elessons.info/php/getting-system-information-with-phpsysinfo/'"' target='"'_blank'"''>'tips for getting php system info'<'/a'>'
nice post...
@tips for getting php system info
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 ♥
thanks
THanks Boss........You are Genious..
Hi..tried the code, but it is not working for me:( It does not allow to replace the html. That could be why?
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???
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...
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...
Yessss THANK YOU ! This is a great little addition to blogs, on behalf of everyone who is looking to generate more traffic thanks
Thank you very much for the tip, is fantastic ...
Click Here To add Comment
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. No cheesy/spam Comments tolerated Spam comments will be deleted immediately upon our review.
Regards,
Mohammad