Today we will learn how to add Facebook Like button to Blogger (XFBML/HTML5). After using the Iframe version, I was thinking if it could do something which will enable my blog readers to leave a comment while sharing.
So I checked out and found out the JavaScript version. It gives my blog readers the ability to add an optional comment to the like which in turn will give it more prominence.
Normally, in Iframe version, when your blog reader likes a post, it will be shown as in the picture below.
The best feature of JavaScript version is when someone likes your post and wants to share it with their Facebook friends, it will open a comment box to leave a comment. They can also send your post to their friends to whom they may want by clicking the “Send” button.
To get this Like button you can visit the official page. Here I will try to explain it in simpler form.
Step 1. Log in to Blogger, go to Template tab, then click “Edit HTML” and check “Expand Widget Templates”.
Step 2. Find the highlighted HTML attribution:
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>xmlns:fb='http://ogp.me/ns/fb#'
Don't forget to give a space in between. The full attribution will be something as shown below:
<html xmlns:fb='http://ogp.me/ns/fb#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>Step 3. Find <body> or <body expr:class='"loading" + data:blog.mobileClass'> and immediately after it add the following script:
<div id='fb-root'/>
<script>(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>If your language is not English then to display your locale language replace en_US with the correct locale code.
Step 4. Find <data:post.body/> and after/before it (or both) add the any one of the snippets shown below:
Facebook Like Button for Blogger
As usual, there are three different types. You need to choose which ever you would like to add.
Standard button
<b:if cond='data:blog.pageType != "static_page"'>
<div class='like'>
<fb:like expr:href='data:post.canonicalUrl' send='true' show_faces='false' width='450' font='arial'></fb:like>
</div>
</b:if>Button Count
<b:if cond='data:blog.pageType != "static_page"'>
<fb:like font='arial' expr:href='data:post.canonicalUrl' send='true' layout='button_count' show_faces='false' width='150'></fb:like>
</b:if>Box Count
<b:if cond='data:blog.pageType != "static_page"'>
<fb:like font='arial' expr:href='data:post.canonicalUrl' send='true' layout='box_count' show_faces='false' width='55'></fb:like>
</b:if>Step 5. When it's all done, save your template.
Attributions
Attributes can be changed accordingly to fit in your requirements. Let’s have a look:
send='true'- if you want the Send button feature otherwise turn it off bysend='false'layout- there are three types and each of them has specific width which you can change:
standard- it has the button to the left and social text to right.
width- default is 450px while the minimum is 255px
button_count- which displays only the number of "likes" made for a particular post.
width- 150px is appropriate if it has the Send button while without it, the minimum width is 90px.
box_count- which displays the total number of likes above the button.
width- minimum 55px
fonts- the fonts those can be used
ariallucida grandesegoe uitahomatrebuchet msverdana
colorscheme- it's an additional attribution that can be used if you have a dark background. The options arelight(this is default) anddark.action- additional attribution to display the verb
like- it is default and need not to do any changesrecommend- if you want to show “Recommend” instead of “Like” verb
Let's have a look at an example with attributions set:
Recommended Button (Customized)
<fb:like action='recommend' font='lucida grande' expr:href='data:post.canonicalUrl' send='false' layout='box_count' show_faces='false' width='100' colorscheme='dark'></fb:like>
Difference between XFBML and HTML5
You might have seen in the official page that there is also another option called HTML5. There aren’t many differences between XFBML and HTML5 Like buttons except the markup. To add it you still have to follow steps 1, 3 and 4 while in step 4, the codes get a little different, that’s it. Let us see an example.
<div class='fb-like' expr:data-href='data:post.canonicalUrl' 'data-send='true' data-width='450' data-show-faces='false' data-font='arial'></div>So, as you can see that every thing here is compliant with HTML5 attribute. However, class='fb-like' is required to render the button.
Conclusion
- I have used the simplest method to add the XFBML Like Button, that is, without any use of application ID.
- I have used conditional tags (highlighted in blue) to show these buttons on evry pages except static pages. If you want it to show on post pages only then replace it with:
<b:if cond='data:blog.pageType == "item"'> {Rest of the codes} </b:if>
You can remove these tags if you don't need them.
- To separate it from post, add some CSS to it. Remember to add the
divsections wrapping the button as shown in step 4 for standard button. Find for]]></b:skin>and before it add:.like{ display: block; margin: 10px 0px; }Set the margin as required for different button layouts.
- Remove any old scripts for Facebook sharing buttons to let it work correctly.
- If you want to skip all this, then add the simple Iframe version of like button for Blogger.
Thank You very much my friend.
ReplyDeleteMohamed Habou
Hi, this isn't working for me at all. I had a like button at the bottom of my posts on both of my blogs, and they suddenly disappeared. Just turned to white boxes. I've tried your method on www.worldsworstmoms.com, but it's not happening. Tried FB's method, but didn't work either. Any ideas? thanks.
ReplyDeleteI checked and it's working wonderfully, if you can't see it, try deleting your browser's cache.
ReplyDeleteThanks Raju! Ack -- I hate computers. I wasted so much time on this.
ReplyDeleteThanks for this tip! Will try it out soon to replace my current iFrame button and update u guys when I do.
ReplyDeletethanks a lot for this useful information.
ReplyDeleteI am using it now on my blog :
http://www.mohamedezz.com/search/label/photoblog
but when some one click like without typing any comments the notification on his facebook profile are displayed without post's image .
the post is is displayed with photo and description when you add comment only .
please I need your help in that,
thanks
Okay, I will find the possible problem and will post an update.
ReplyDeleteThank you very much i really love the script.
ReplyDeleteHi Raju,
ReplyDeleteI've using fb like (iframe) for a while. It seems that all my previous likes will be gone if I were to install facebook XFBML Like.
How can I get around with it?
Thanks.
There are many reasons why this could happen but mainly there are two reasons why this could happen.
ReplyDelete1. You have changed the URL of the post.
Or
2. This could me a problem from Facebook side.
As for me, when I changed it to XFBML version, all the likes were there and I'm sharing the same codes. Now you have to decide which one to use. One thing I can assure you that you will regain more likes if your posts are compelling to your blog visitors.
Thank you Raju for this brilliant tip and post. This works for me (http://www.beontheroad.com) wonderfully on Chrome, but doesn't seem to work on IE8. Would you know the way to tweak the code for IE? Please let me know.
ReplyDeleteHave you added XML namespace attribute as told in step 2?
ReplyDeleteyes I have
ReplyDeleteThis could the scripts. While visiting your blog I found out that in IE8 (only) it's showing but after taking quite lot of time while in IE9 (and all other browsers) it's working fine. If you are unable to see, try clearing the browser's cache.
ReplyDeleteI can't seem to complete step four as I can not locate the specified insertion point... If you look at the page source for http://listeningsessions.blogspot.com/ you will see there is no match, any tips or solutions? Thanks in advance.
ReplyDeleteYou will surely get <data:post.body/> after you check "Expand Widget Templates" in step 1.
ReplyDeleteYes, I checked again. It is working fine. Thank you so much!
ReplyDeleteJust wondering if you can help here...I wanted to make my template load faster...right now it looks like it is taking much time...i have tried to remove most of the stuff...but then there are other unnecessary things that I dont need, but I dont know what will get affected if I remove them...I am non technical, but if given guidance...can make the changes...
can you help?
I will try to cover it in my next article.
ReplyDeleteRaju, I tried implementing this on my blog, with limited success. I followed step by step to make sure I wasn't missing anything, but it seems that the 'Like' button only works once; to put it on other words, when you click 'Like' once, on any blog post, you can't click it on the rest.
ReplyDeleteI have it set so that the button only appears on blog post pages, like you described, and the "green" href attribution is in there, so I'm not sure what may be wrong.
What do you think I messed up on? Thanks for your help, I appreciate it.
As I have mentioned earlier, you have to remove the old Facebook share button script to let it work correctly.
ReplyDeletethank you. finally, success.
ReplyDeleteHello! Thanks for this tutorial. It helped a lot!
ReplyDeleteBut whenever I use this button, it does show the "comments" of my post in facebook instead of the first words of the entry.
Is there any way to fix it?
Thanks in advance
Okay, it's seems to be happening to almost everyone using blogger. I will be posting an update soon.
ReplyDeleteRaju,
ReplyDeleteThis was working for me very well till today when i saw that the Send button is not visible and when I click on the like button, only the post gets shared and the image thumbnail doesn't get shown.
Would you know why both these are happening?
Thanks,
Sankara (www.beontheroad.com)
This was happening from past week. For couple of days, it was not visible even in official page. Facebook may be changing and updating something. Wait this week to get stable then I'll post an update.
ReplyDeleteWhen I try to post the codes you've listed above in the html portion of my blogger website, it keeps saying that there's an error in the coding and that it can't be parsed because a > or /> is missing.
ReplyDeleteI've been very exact about posting exactly as you have it, exactly where you instructed...and I made sure to delete my old iframe coding so it's not that.
Please help! I am so frustrated! I would like the comments to show-up and haven't found any websites that give a good tutorial! Yours seemed the simplest but it sill wont work...
Hello Jenna,
ReplyDeleteI suggest you to click "Preview" after doing each step and report me back the step where you got the error message.
xmlns:fb='http://www.facebook.com/2008/fbml'
ReplyDeletethis is now at the very top of my blogger page
http://www.working4wellness.blogspot.com/
what did I do wrong?
The name space attribution in step 2 is causing it. You didn't added Facebook attribution properly. It should be within the html tag ending with >
ReplyDeleteExample:
<html .... xmlns:fb='http://www.facebook.com/2008/fbml'>
Just done this but the like page only appears when you click on the post title and go to the posts own page, it doesn't appear when scrolling through posts on the main page or in labels. Any advice to fix this because most people only browse and don't click on the individual post
ReplyDeleteHmmm also the image isn't getting shown it just says I like a link and "log in to blogger" etc
ReplyDeleteDelete the conditional tags that are marked in blue. In this the Like button will be shown in every page.
ReplyDeletegreat! I've been looking for this tuts long time ago!
ReplyDeleteHi Raju, I tried to get a code from fb as you intsructed above for the "like" button and I'm getting this message from fb, "Only verified developers can be added as listed developers of this application" so I went through the process of verifying myself by giving fb my phone number and punching in the code they texted me and I'm still getting the above message and no code, can you please help?
ReplyDeleteMy Like button code don't need any developer's application ID but for your problem, report it back to Facebook.
ReplyDeleteI entered all the code you indicated for the like button, except the code to show only on post pages.
ReplyDeleteWhen I tried to preview, Internet Explorer blocked it because of "cross-site scripting."
This normally should not happen. However, it's a problem in IE only. You can try lowering the security level or disable it in IE.
ReplyDeleteReference: http://windows.microsoft.com/en-IN/windows-vista/Internet-Explorer-8-Information-bar-frequently-asked-questions
Just awesome! I just put a Like box using your way tips. Great job bro!
ReplyDeleteI just double-checked, I don't have any facebook iframe script on my template...Could it be anything else?
ReplyDeleteRE:
@RookCastle said...
Raju, I tried implementing this on my blog, with limited success. I followed step by step to make sure I wasn't missing anything, but it seems that the 'Like' button only works once; to put it on other words, when you click 'Like' once, on any blog post, you can't click it on the rest.
I have it set so that the button only appears on blog post pages, like you described, and the "green" href attribution is in there, so I'm not sure what may be wrong.
What do you think I messed up on? Thanks for your help, I appreciate it.
06 May, 2011
Raju said...
As I have mentioned earlier, you have to remove the old Facebook share button script to let it work correctly.
06 May, 2011
@RookCastle
ReplyDeleteIt's not the iframe version but the old Facebook Share button. It's there, floating on the left of your posts, remove that.
I've since removed it, but it hasn't seemed to make any impact at all unfortunately :(
ReplyDeleteRookCastle, try it by setting up a test blog. It should work except that XFBML is known to cause problem in IE while rendering.
ReplyDeleteBased on my assumption, there could be a problem with your template. If you also think so then setup a test blog, apply the the Like button codes and see if this works. Now if you are happy, redesign the blog and test the Like button again. If everything goes fine then download that template and re-upload it with your current blog.
Thanks Raju, "Like" button works like magic on Blogger.
ReplyDeleteMay I have your help with implementing "Vkontakte" sharing button to a blog? The code seems to be alike to that one of "Like" button, but no idea how to rebuild intitial code. That is what I have:
VK.init({apiId: 2365990, onlyWidgets: true});
VK.Widgets.Like("vk_like", {type: "10"});
When following their directions, it is displayed like this, all seven buttons solely for the first post: http://imageshack.us/photo/my-images/703/83070826.jpg/
Will appreciate your ideas. Have a good day.
Okay, the site is in German and it would take me some time to understand. It's an off-topic discussion so for any further assitance contact me by email.
ReplyDeleteThanks for such a clear explanation. I like when people explain the way they change the code to fix specific problems, it gives more confidence. I added it to my blog, looks great and it seemed to work just fine http://path2yoga.blogspot.com/
ReplyDeleteI added it before [div class='post-footer'] instead of after data:post.body/ so it appears after the "read more" link. Is this all right?
I didn't find [body] or [body expr:class..... Instead I found only [body class='loading'] which I guess is the same?
And do we need to worry about the comment "There is a flaw in Facebook Javascript SDK" on this blog?
http://www.bloggersentral.com/2011/04/facebook-send-button-to-blogger-post.html
Thanks for your work!
1. You can also add it to footer-section.
ReplyDelete2. Yes, it's same.
3. "fb_xd_fragment" can be big problem if most of your blog visitors are landing on page ending with "?fb_xd_fragment=". You can find this problem and remedy too by Googling this specific term.
Thanks Raju!
ReplyDeleteThis is what I found http://www.searchmarketingman.com/2010/09/how-to-fix-like-button-bug.html
But what do you suggest? Should we implement the XFBML Like Button or use the iframe version until the problem is fixed? What are the pros and cons?
Or maybe this solution can be implemented in blogger? It would be great if you could write a post about it. Thanks again
ReplyDeletehttp://searchengineland.com/a-solution-to-the-facebook-fb-xd-fragment-problem-77387
hi raju. i have successfully added the Like button to my blog. howeever i have TWO queries
ReplyDeletefirstly, what is the use of the application ID? what happens if i include it in the code, and what happens if i dont?
secondly, there are some posts in my blog which after i click the Like button, it doesnt show up in my facebook profile. any clue?
thx in advance. u helped a lot of people especially n00b like me :)
@Marco
ReplyDeleteUsing the above codes I didn't got any problems or complaints. If you are seeing that most of your blog visitors are landing on "fb_xd_fragment" pages, then apply the the Google Webmasters fix. It would take some time. If it still persists then report bug to Facebook and if you want then revert back to iframe version.
@String Lace Guitars
Application ID is required for more advance use and complex things that you can do with Facebook API. For example, adding Authentication and Sign in or viewing insights and many more. For just adding just a simple Like button I didn't felt the need of application ID, however, if you want then you can add it.
Recheck the problem you are getting and if this continues, report this bug to Facebook.
This is working for me - but I placed it at the top of my posts. Is there a way to move it to the RIGHT side instead of it being on the left side directly underneath my title?
ReplyDeletehttp://bedazzlesafterdark.blogspot.com
Thanks in advance for your help!
Find <div class='post-header-line-1'> and below it add the code for your button. Put the codes into the div as mentioned above and add the following CSS before ]]></b:skin>
ReplyDelete.fb-like{
float:right;
display:block;
margin:10px 0px;
}
Thank you. One last question. Now each post on the home page says that 3 people like this even if I just posted it and there's no way anyone has seen the link the yet.
ReplyDeleteHave you heard of anyone having trouble with this yet? I repeated all the steps above to make sure that I didn't do it incorrectly but it's still showing up as "3 people like this"
Hi Raju, Thanks for this post! I'm hoping to use the XFBML like button on my blog, but I would like it to float on the right hand side. Is this possible? I just read your post on the floating share buttons, but when I followed the steps using my XFBML code, it didn't work. Do you know why? I'd love your help as I'm struggling a bit with this one. Thanks!
ReplyDeleteGreat post thanks a lot for the tips they are really helpful. XFBML is definitely much better than the iFrame version.
ReplyDeleteOne question though. I'm having problems trying to set the default thumbnail that will be posted to Facebook with every 'like'. I have tried various methods mentioned in many websites but none of them works for Blogger. It simply randomly chooses an image from my blog. Anyone having any luck doing so?
I'd actually like to set the default thumbnail to be my Blogger's profile picture. Any help would be greatly appreciated.
when click like button then pop up ask for confirmation... can i remove this pop up.. i want when click like its automatically like and do not ask for confirmation... i can see some blog/website dosnt ask for confirmation when click like button...can u help me fix this problem??
ReplyDeletehello raju,
ReplyDeletei got problem with like button.... how can i remove confirmation button that appears in pop up ???? why like button just like and automatic confirm like the other page that i saw include ur page... its a bit annoying when someone wanna like then had to click confirmation button... it could be the user just leave that pop up and the like button dont count... is there anything wrong with my html code or my script????? can u help fix this prob???
Raju,
ReplyDeleteYour tip used to work for a while, then it started giving errors. Instead, I tried what Aneesh had to say at http://www.bloggerplugins.org/2010/04/facebook-like-button-for-blogger.html. and found it to be helpful. YOu might want to check it out.
Thanks,
Sankara
Great!, but is your code updated, because, now if you get the code from the facebook page, it has a new line, (the bold line):
ReplyDelete<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="90" show_faces="false" font="arial"></fb:like>
what do you tell me about it? :)
Tnanx!!
@bedazzles
ReplyDeleteYou didn't followed the tutorial properly as a result your see only three likes because the Like button cannot get the permalink of the post. Please follow the tutorial properly.
@Lisa
If you want it floating, please follow any one of my floating tutorials and reply me to that post when you are not getting it done properly.
@Lionel
You have to add Open Graph META Tags. You can Google it or can wait for my post update in few days.
@Fuhrer and Anonymous
It's normal that Facebook will ask you to log in. If you are already have logged in to Facebook it will not ask for the confirmation.
@Sankara
Aneesh's codes and mine are almost same but I used some extra steps and codes as it's mentioned on Facebook's site to get a trouble free Like button. Before changing your codes you could have called me to look for the problem as it could have told me if I have any problem with my codes. However, if those codes are working great for you then it's "peace". :)
@Anonymous
See my codes and it already contains the bold codes.
it works well for me..
ReplyDeletethanks alot brah
I followed your directions, and the button is showing up exactly the way it is supposed to, but it seems to be having a problem. When someone clicks it, it registers a "like" for just a second, and then goes back to "be the first of your friends to like this". Is this a bug on facebook's end? Is anyone else having this problem?
ReplyDeleteThis could be a problem from Facebook's side. Wait a day or two and try clearing browsers cache.
ReplyDeleteI used this tutorial:http://forum.developers.facebook.net/viewtopic.php?pid=227562
ReplyDeleteBut when I click the like button it auto unlike automatiically, so I erase everithing and tried yours but when I click preview this message apperas:
"
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "b:if" must be terminated by the matching end-tag "".
Error 500
"
so I leave it the way it was , please plase help me I can give you my user if you want but Im just tired of tryng and searching for solutions. This is just imposible!
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "b:if" must be terminated by the matching end-tag "".
Error 500
Mateo, there must be something you are doing wrong while using the conditional tags in Blogger ( codes mentioned above marked in blue) which is leading you get this error. Correcting it will fix the error.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeletehey there, thank you very much for this tutorial. Works fine. BUT I have the same problem as "From Tracie" on the 9th of July, and I cannot get all buttons on all posts working all the time.
ReplyDeleteSometimes when you click "like" your like will simply disappear and it says "be the first of your friends to like this". Sometimes the like buttons are not "likable" if you understand what I mean?
How can this be solved? Thanks.
@Mateo
ReplyDeletePlease contact me by email for further help.
@The World Tour
My answer will be same as Tracie.
Hi Raju! Best tutorial I've found. But same as Tracie (07/09) and The World Tour (07/12) I'm getting that problem too. I just added your code yesterday and it worked perfectly but on my latest post when you click like, "Error" shows up. I've gone to FB URL Linter that it suggests but looks like everything is fine. I've also cleared out my cache. Help? Thank you!
ReplyDeleteThanks for sharing the step by step guide. I follow through but the thumbnail shown in facebook is a default delicious icon picture when I clicked on the send button. How to make the thumbnail show my post picture instead in Facebook?
ReplyDelete@Joe+Kathrina
ReplyDeleteAfter using Facebook URL Linter tool if still it don't fix it, then there could be a bug from XFBML script. It is not only you or Tracie or The World Tour or people who are following my tutorial but there are several others too using other content management systems other than Blogger (you can find it in Facebook Developer Forum) facing this problem. The best solution is to report it back to Facebook team if it still persists for more than a day or two.
@youngwomen
Facebook pulls the image by determining the img tags found first. It's: <img src='http://your-image.jpg'>
In your situation, there could a delicious icon at the top of your post with this tag. You can try removing it which can resolve your problem. But it does not guarantees that it should always fix your problem. The best way is to add open graph META tags which can be used to show your blog's logo. I will write about this as many are requesting for this.
hi. what if i only what to add the like button in my home page?
ReplyDeletethanks!
it's working, thanks. but I am still confused about http://www.simplebloggertutorials.com/2011/05/sharing-in-facebook-not-showing-blogger.html option 1. my template has two <data:post.body/> codes.
ReplyDeleteIt can be found after checking "Expand Widget Templates".
ReplyDeleteGreat tutorial! Wanna try this also. Hope this will work for me just like most of you here. Thanks in advance.
ReplyDeleteHi Raju,
ReplyDeleteMy blog was equipped with FB 'like' button over a month until I decided to change template today. I have virtually spent the entire day trying to place the plugin to my blog to no avail. with my previous template, the codes you gave here work but with this template i'm currently using, I can't get it to appear. i have contacted the template designer in case it has something to do with the template itself as i realized the blog posts do not have any share buttons but since I have yet to hear from him, I decided to ask you in case you know what the probable problem is and how to fix it.
i would greatly appreciate your help...thank you!
http://hamletslair.blogspot.com
dont know what happened.... can u plz check dubaicraftermom.blogspot.com
ReplyDeletefb link is appearing on top :(
@Sky and @Irum
ReplyDeleteI didn't find any codes of XFBML buttons. Please add it first and then reply here for any problems.
Hi Raju,
ReplyDeleteThanks for the post. It really helped a lot. I want to know is there is any to set up default thumbnail for my blog, because FB is taking the image from the post as thumbnail(and it shows nothing if post doesn't have any image). Can I change it to show my own image as thumbnail.
Thanks,
Satish
This is very useful for bloggers who want to really appreciate your post, thanks for sharing the post. I would like to hear more about this in future.
ReplyDeletehi raju, i want to add a box at the right side like a big rectangle which showing faces of users. please help me out how can i add this rectangle with facebook book like button. my url is http://nowledge4all.blogspot.com
ReplyDeleteAdd Facebook Like Box to Blogger
ReplyDeletehi
ReplyDeletei have problem in my blogger, the comment box appear in the short part of the post in the main page after "read more "i want to put it only in the full post
also when i make share ,it take the blog description instead of brief of the post
Kindly advice
Thanks for the post, man!
ReplyDeleteBut I'm having this problem for some days now...
When I 'Like' a post, it 'likes' the entire blog, and not the post individually the data:post.url isn't working for me...
Thank you, Raju!
It's working perfectly. I didn't find any problem.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteI can't help you as it's from Facebook's side. It's best is you ask directly by contacting them.
ReplyDeleteThanx mate , Great post.
ReplyDeleteThank you very much for an easy-to-follow tutorial! :)
ReplyDeleteWhen I tried to implement the xfbml like/send button on my blog several months ago, I noticed that my statcounter was showing a bunch of "hits" from xfbml fragments instead of the actual source page. Have you notices this? And what implications does that have with SEO?
ReplyDeleteA proper installation will show the correct number of counts for the particular page. And I think it will have no affect on SEO.
ReplyDeleteThanks for this tutorial! I've just one question, I followed all the steps except for step 4. Previously, I've used iframe and i pasted the code in the after to make the button inline with the title.
ReplyDeleteSo in step 4, i copied the code to replace the iframe one, pasted it after . However, it wont stay inline with title anymore, it'll go next line. Any idea? My friend asked me to add
.fb-like {
display: inline-block;
}
but then the alignment is still not right... :(
thank you soo much! very useful tutorial...
ReplyDelete@tingyik90
ReplyDeleteUsing a standard sized Like button will never look gook beside the post titles. Better use Button Count (small one). If you want to use the standeard one, then it's best to place it before <data:post.body/>
I have not click like yet but there are already 3 likes in my posts.
ReplyDeleteMaybe others have Liked your post.
ReplyDeleteCan you please help me? I'm getting stuck. I want to be able to have my blog automatically put a "like" button at the end of each blog entry - one that allows you to comment and link to Facebook.
ReplyDeleteWhen I try to do the XFBML code, I don't get anything like you're showing. Mine says:
<div id="fb-root"></div>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#appId=233017910083126&xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:like send="true" width="450" show_faces="true"></fb:like>
Then it gives me this warning: In order to support earlier Internet Explorer versions with XFBML, you also need to add an XML namespace to the HTML tag of your document, as shown below. For more details, please read the JavaScript SDK documentation.
It gives me this line of code:
<html xmlns:fb="https://www.facebook.com/2008/fbml">
I tried this and am getting even more confused.
My blog is http://emvanesky.blogspot.com/
Yes, I have also noticed it. In my tutorial, the script part in step 3 is what the Facebook have in their documentation page. Facebook has recently changed the asynchronous script but the main concept remains the same. So, if you want then you can replace the script code in step 3 with the generated script. Everything else remains same.
ReplyDeleteI will update the tutorial with the new script once I find the proper documentation.
can anyone tell i wanna add only like button in my site but no need to add a comment..
ReplyDeleteTry the iframe version of like button as told in the conclusion part.
ReplyDeleteCould you help me with my open graph for blogger?Click the like and send buttons on my blog and you'll know what I mean. It's a mess and I can't track the cause. Big thanks.
ReplyDeleteHere's the link: http://batchprocessed.blogspot.com/
Try Facebook debugger. If still it doesn't work, try adding your blog's logo. I have explained it on Open Graph Protocol for Blogger.
ReplyDeleteI hope my comment helps others because I spent a whole day on this.
ReplyDeleteBe sure to realise on the Facebook Developers 'get code' tool that you can select options for IFrame, HTML5 and xfbml. It's on the top of the window. If you're new to this like me, you might miss this. Then if you're adding the code (Iframe will do it) to blogger Widgets, check out these code options to make the box white (and not transparent). http://www.google.com/support/forum/p/blogger/thread?tid=1444f14620435f45&hl=en
Hope that helps.
Okay... those instructions worked a treat. How do I tweak where I put the code to have the button at the top of my post not the bottom?
ReplyDeleteFind <data:post.body/> and before it add Like button code.
ReplyDeleteHi, thanks for this nice tutorial, Raju!
ReplyDeleteHowever, after hours and hours of testing, I still can't manage to get the Like button to appear in IE(9), while it's always been working in Chrome as well as Firefox from day one.
I'm currently using the xmlns:fb='http://ogp.me/ns/fb#' namespace, but I've tried the xmlns:fb='https://www.facebook.com/2008/fbml' one as well.
I have the same problems in a couple of my blogs, such as
http://onlythejo.blogspot.com/
Any hints or ideas what may be wrong would be highly appreciated!
Cheers!
First, remove the old Fb Share Button script from from the floating share box. It can be the culprit.
ReplyDeleteSecondly, try Facebook Debugger. If problem still persists, report it to Facebook.
This comment has been removed by a blog administrator.
ReplyDeleteYou have done everything except step 4. Complete step 4 to render Like Button.
ReplyDeleteHi Raju,
ReplyDeleteThanks a lot to share lots of skill is on bloger. It's really amazing for a newbie in blogger as me.
I followed your steps, but the prob is that I the comment box along with like button won't pop up after I click it. Did you know what I missed? I appreciate it a lot!!
I found out that you didn't add any of the steps told above except for 1 post. If you are using any software to write and publish your post then it could create a problem (as in your case). Better edit the post from Blogger's Post Editor.
ReplyDeleteis it just me or did the fb boxcount code not working anymore? it's no longer showing up on my blog. I dont' remember if you had it together with your tweet and google share count on the top-left but I don't see the fb count in your post anymore either. same goes to the blog of a friend..
ReplyDeleteappreciate if you can advice. thx!
It must have been a technical problem from Facebook. If it's not fixed and still persists within next day or two then let me know.
ReplyDeleteIs it possible to know who liked my post?
ReplyDelete"No" unless they are your friends on Facebook.
ReplyDeletehow to show only on post pages? do not showing in home page?
ReplyDeleteI've already told you in the post, read it and use the below conditional tags:
ReplyDelete<b:if cond='data:blog.pageType == "item"'>
[Only Facebook Like Button code goes here]
</b:if>
Thanks a bunch Raju, this was a terrific walkthrough. My question may be out-of-scope, but do you know how I can change the icon that Facebook uses for the blog when you click the Send button? Right now it shows the orange RSS button on my blog.
ReplyDeleteFor image problem:
ReplyDeleteOpen Graph Protocol for Blogger
For Facebook description problem:
Facebook description problem solved for Blogger
Hi Raju, thanks for the great tips, it really works, the like and send button appear individually on every post, but there is one problem, the message that appear after I clicked the send button is the blog headline instead of showing the content the post. I would like my visitor to share the post content. Is it possible?
ReplyDeletePlease follow the links as told in my previous comment.
ReplyDeleteHi Raju
ReplyDeleteI am basically computer illiterate, I carefully followed your steps on how to add a fb like button and it worked! You are my hero! thank you
Raju hello again. I would like to add the fb like and counter but not at the end of a post just on the side bar. Do you have instructions how to do that on here. I tried to find it but not sure which one it might be.
ReplyDeleteAlso I am wondering if you maybe able to help with this please; for some reason my older posts don't show up in my archives on right side. I have changed how many posts appear etc., but it doesn't bring them back. I ended up making a page called Older Posts, so people could access them. Are you able to give me some advise?
thank you.
Do you want to have the like button for individual post or for your blog. For your blog's URL only, visit Facebook official Like page, within the form give your blog's address in the URL field, select the options you want and "Get Code". Now you can add this to your sidebar or wherever you may want.
ReplyDeleteRegarding Archive, click the ► sign to view it.
Hi Raju and thank you for your help. I will have a go at the like button, once I get the code, how do I know where to put it. Do you have a post for this you can direct me to please?
ReplyDeleteWith the archive, even when I hit the drop box, or arrow, it still only shows recent posts from this year and 2011, but doesn't show earlier posts from 2010, they seemed to have disappeared, except where i have pasted them into a page. I have plenty of room on the side bar and have elected to show 200 or more posts, but they just disappeared.
Great blog by the way and very helpful, keep up the great work!
Adele
sorry Raju to be a pain but I want the like and counter button on my side bar, when I go to official fb page, it only shows like button and not the counter as you have shown.
ReplyDeletethanxs
The counter can only be seen if you have got likes for that URL. So you need not to worry about it. The only thing you have to do is put your blog's or your fan page page address within the URL field, select the options you want and get the code. Now go to your blog's Layout tab from Blogger's dashboard (or Design > Page Elements tab), click "Add a Gadget" on you sidebar, select "HTML/JavaScript" gadget, copy/paste the code you got from Facebook and Save it. That's it.
ReplyDeleteFor archive problem, you should go to Official Blogger Help forum and write about it so that Blogger engineers can know about this problem and help you. Meanwhile, try this fix:
http://www.google.com/support/forum/p/blogger/thread?tid=1ad712abc9ad8f7b&hl=en#fid_1ad712abc9ad8f7b0004b39e0f2829f4
Raju,
ReplyDeleteFantastic post, this is extremely helpful. I am having an issue trying to center this button under the post, and was hoping you could be of some help.
I put the code in the "footer" area of the blog so that it appears underneath each post. When I set alignment of the footer to "center" the twitter button and the blogger feature displaying my name, date posted, and how many comments all correctly display as centered.
However, the facebook button only moves over a little bit and does not align center properly with the other buttons. Any idea as to how to correct that? Thanks so much!
Okay, try this. Find ]]></b:skin> and before it add:
ReplyDelete.fb_iframe_widget iframe {
vertical-align: 0 !important;
}
Hey,
ReplyDeleteThanks so much for the prompt response, as well as the great content of your blog.
I was fiddling with some attempted fixes and used alot of < div = center > stuff, but it looks like its working now. Thank you again!
hi! Thanks for your useful tips, but somehow after i applied it, this appears on the top of my blog and it takes a long time to load my blog: xmlns:fb='http://ogp.me/ns/fb#
ReplyDeleteIs it normal that xmlns:fb='http://ogp.me/ns/fb# appear on top of my blog? or did i miss anything? Here's the link to my blog :
http://mylifeaswriterangelicxine88writer.blogspot.com/
You are seeing it because you did it wrong. xmlns:fb='http://ogp.me/ns/fb#' should be placed with in the <html> tag.
ReplyDeleteSee step 2 very carefully and if you are translating this page to your locale language then don't translate it.
wao! thank you so much ! Problem solved!
ReplyDeleteMy Send button does not work. how do I fix it?
ReplyDeleteReport this bug to Facebook.
ReplyDeleteHi Raju,
ReplyDeleteI was able to get the like button and send button on my blog but after each of my posts it states the following: cond=''data:blog.pageType=="item">. Any idea why and how to get rid of it?
I think either you missed out something or did some mistakes. Try finding:
ReplyDeletecond='data:blog.pageType == "item"'>
just below the like button code you added and delete it. Before saving your template, click "Preview" to see if the problem is solved.
Another problem I can see is at the top of your template. To fix it read here.
Thank you so much for this helpful tutorial! It was short yet effective and opened a lot of options for my blog. I will mention you as much as possible!
ReplyDeleteThanks for the the tutorial! I was lost about this XFBML, but here I clarified. But there is an problem at my layout, i put de button in the right corner, and when i like, the pop up window that opens, gets under my sidebar. what should I do to appear above my sidebar? Can you help me?
ReplyDeleteThanks,
My blogspot: http://nuzouvido.blogspot.com.br/
It's your template which is causing it. Immediate solution is to move your like button to left.
ReplyDeleteit works fine for me, but how do I get the like button to like a specific post instead of the entire blog?
ReplyDeleteFor a post only? Then visit the official page and generate the Like button code for that particular URL.
ReplyDeleteThank you so much my friend....!
ReplyDeleteYou are the man!!!
Perfect tutorial perfect !!!!!
ReplyDeleteBut i have one problem, there is need confirm like or dont show thtat someone like the post ?
Sorry, I didn't get you, please tell me in detail.
ReplyDeleteSo, although this is working, I get "xmlns:fb='http://ogp.me/ns/fb#'" at the top of my page. Any ideas how to fix this?
ReplyDeleteActually, nevermind, I just read the comment where you said how to fix it. Still, when I look for it in the code, it claims it comes up as 1/1 found, but won't be highlighted.
ReplyDeleteRead the comments posted by others! They are useful.
ReplyDeleteBut however, you will get your answer here.
Hi! Great post! :) I just changed my scheme for Blogger and my FB button dissapeared. So I tried with several help-post but none of them worked. Just tried yours and did excatly the way you described. But - noting, not even an error-message anywhere?
ReplyDeleteThank you so much for the help. :)
ReplyDelete@Mona
ReplyDeleteIf you'r having any problem, then give me the link of your blog so that I can have a look at it. But be sure to include all the steps that I've mentioned in this tutorial.
i added the like send button on my blog, but when someone presses like it doesn't work, when you try the send button, it says that it encountered some error please help !! http://ana-stil.blogspot.com/ here is my blog
ReplyDeletei posted a few minutes ago, but i fixed that problem, now i have another problem, i added only like button and when you press like it gives you confirm, and then it posts on your wall, i want just like not post
ReplyDeleteIt's a security measure of Facebook to stop "likejacking".
ReplyDeleteHi, i encounter some problem on "send" button, i test but it pop out the message that "we have encounter problem of sending....", do you hv any idea on it? tq :)))
ReplyDeleteIt can be a bug. Report this to Facebook.
DeleteHowever, for your other problems:
1. I didn't find any "xmlns:fb='http://ogp.me/ns/fb#'", may be you have removed it.
2. You cannot see who liked your post unless they are your friends on Fb.
Yes, i hv removed it. Thanks a lot!!
Delete