In our previous post we learned how to add Facebook Send button to blogger but just recently Facebook combined the Like and send button into a single plugin, making it more easy to add both the buttons with a single code. Further the like button is equipped with an additional comment functionality i.e. The visitors can comment on what they liked just under the button. Lets add this beautiful plugin to blogger.
Add The Facebook Like and Send Button To Blogger
-
Go To Blogger > Design > Edit HTML
-
Backup your template
-
Click Expand widgets templates box
-
Search for <data:post.body/>
-
and now if you wish to add the plugin just below your post titles then add the giant code below just above <data:post.body/> or if you wish that the plugin may appear at the end of your posts then paste the following code just below <data:post.body/>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font=""></fb:like>
6. Hit save and you are done!
We hope you will enjoy reading these posts too,
- Add Floating Facebook Like and Retweet Counters To Your Websites
- Facebook Social Bookmarking widget
- Social Share Widget With Counters For Blogger
If you faced any problem, please do not hesitate to let me know. :)
Filed Under: Blogger Widgets and plugins
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 »
44 comments:
buen truco
Thanks for this trick. Now, how can I add Google +1 like feature the same way as described above in my blog. I know Google's way to add the feature is by via activating the share buttons on blogger. The problem is I do not want to activate this sahre buttons for I am okay with your share buttons alternative. So how do I go about it?
@Felix
You are most welcomed pal. Kindly read this post to add the +1 button,
Add the +1 button to Blogger
Dude how to add the facebook like " box " like yours, below the posts like you have done..
please help
@Hassam
Coincidentally that is included in my next posts. I was going to write a tut on it. thanks for reminding. :>
Hi, this works fine but, the two buttons are at the bottom of my post, how can I get them at the top?
@anony
add the same code above <data:post.body/>
Fab - but how do I put the like on the right hand side so it is not so close to the title
http://timinphuket-restaurants.blogspot.com/
thank you
Hi Mohammad, the like and send button works fine but it messed up with my FB comment box below. The error is "the comments plugin requires an href paramater" What should I do? Thanks. Here is my site: www.adouseofinspiration.com/2011/06/dictum-roundup.html Help me, please...
I used this but I'm not seeing it come up on my newsfeed at all?
Nice... it works!
Thank You Very It Works Very Well In My Blog...........
http://Cinibox.blogspot.com
Thank u very much mate it works fine in ma blog
http://Cinibox.blogspot.com
@Mohammad Mustafa Ahmedzai
Its simple Just add Below the post body ie
Hello , It works fine , but let me know how to add facebook standard like button to my blog instead of blog count..
www.Cinibox.blogspot.com
Is there a way to allow the like button to like each individual post? I have a like button on my blog, and now I put it at the bottom of each post, but if someone likes a post, they can't like another post because the like button is greyed out once you like one post.
You can see what I mean.... www.fightondmv.blogspot.com
Not working
Its very nice. Working in my Islamic blog:
http://iloveislamarticles.blogspot.com/
you are the boss.....
how can i add twitter face book , Google and a share button just like your sites...
not work.........my blog : www.bdraphiphop.blogspot.com
how to get the the comment box above(prev. home next) in my blog WWW.TECHCAFE.TK plz mail me josepaul99@gmail.com
hey nice it's working see my blog www.techmodules.blogspot.com
Thanks Mohd.. I have applied it to my blog but tweaked it & it gives excellent result. Also, provided with complete graphical presentation "How to DIY". I have also solved the problem of not having Like Page ID. Have a look at my Blog & let me know what do you think of the same.
http://www.yourbloggingtips.com/2012/03/facebook-like-box-widget-for-blogger.html
thanks for this it worked well for me...but till the date blogspot changed to .in.....the facebook share button is not showing the number of shares is there anyway i can fix that??
Thanks Mohammad for this tutorial. I also wrote a post about it with some details. Check it out. Visit ShineMat
Thanks for the tip! You saved me so much time! I was a little nervous to edit the HTML, but it worked!!! Yay!
You have blanked the href field. I just wonder it's work I have used data:blog.url instead of it. Look at adding Facebook send button to blogger
Good one. Keep rocking man
Tamil Movies Online @ Asiantamil.com
Thanks for this post.
You can learn easy ebay shopping now.i'm teach you well.join with me.you can buy your mobile,laptop,camera,vehical,cloths,foods and every thing from here.
www.infogrant.blogspot.com
you can download apps and games for your mobile free.
@diegotataYou can learn easy ebay shopping now.i'm teach you well.join with me.you can buy your mobile,laptop,camera,vehical,cloths,foods and every thing from here.
www.infogrant.blogspot.com
you can download apps and games for your mobile free.
Hi...
I saw some blogger-site's that had, beside send and like buttons, ... one button that "report a probleme" with post (dead links, dead imagine etc...) i thought it's very usefull this button for us... can you make a tutorial of implementing this button on blogger?
Nice Post.
Click Here For Latest Blogger Tricks And SEO Tips (http://fullbloggertricks.blogspot.com)
thanks for your tutorial,,nice utorial for my blog
It's usefull. I tried it and look good. Thanks.
http://pk-galler.blogspot.com
Hello, get free facebook likes, twitter followers, Youtube views and much more through this amazing site
http://freefanlovers.mylearnia.com
Apply this cupon(for first 50 users only) and get amazing cupon of
50 Coin Cupon Code:9630-7497-1376-5600
Thanks for the post. I had been looking for something related and found your web site in the process.. I will definitely be back for more.
web tutors
How do you add a space between the final paragraph and the like button. Right now it is just showing up directly below the final sentence which is not as aesthetically appealing.
Thanks,
Elijah
www.basesandbaskets.com
Hello, get free facebook likes, twitter followers, Youtube views and much more through this amazing site
http://freefanlovers.mylearnia.com
Apply this cupon(for first 50 users only) and get amazing cupon of
50 Coin Cupon Code:9630-7497-1376-5600
hello, I have tired the trick but this isn't working for me
Hi! i add already this one on my wife's blog Lady And Her Sweet Escapes but it is also appearing on other pages like the about me page,blogroll,etc. How can I let them appear only in every post?
Its nice... but I want to put Like but for Blog post..
So when any one hit like button then that notification should be post on wall...
Can we put link of blog post instead of fp page for like ?
http://female-modeling-photos.blogspot.in/2013/02/very-beautiful-sexy-model-photo-in.html
this is link i want to put... so is it possible?
Oh sheat i add your facebbok icon and all od my post were deleted
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