June 27, 2011

Widgets

Add Facebook Like Button Below Post Titles - New


Like buttonI previously shared a Facebook Like button that included a send button by default. One of the problems I noticed with it was the load time. I then shifted to this new like button which loads like a flash at my internet connection speed. If you wish to add this new like button code just below the post titles of your blogger blogs then follow these easy steps:

Adding Facebook Like Button To Blogger

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Click the "Expand Widgets Templates" Box
  4. Search for this,

<data:post.body/>

    5.    Just above it paste the code below,

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/>

     6.   Save your template and you are done!

 

Visit your blog to see it working just fine just below post titles. Feel free to ask any questions you may have. 




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 »

76 comments:

samsexy98 on Jun 27, 2011, 9:04:00 AM said... #

Please Correct point no.4 :P

Abhishek on Jun 27, 2011, 8:00:00 PM said... #

Dear mohammad
Correct The 4th Point
regards
hackerstips.tk

Mohammad Mustafa Ahmedzai on Jun 28, 2011, 1:28:00 AM said... #

thank you sam and abhishek for reminding that, I just corrected it. :)

@Abhishek

did you receive the template pal?

Manisha.Rautela.Bisht on Jun 28, 2011, 10:43:00 AM said... #

Dear Mohd I think your comment form for" Blogger help" is not accepting the cursor.I can only type in the individual post comment box .I have few queries .Where can I write them
wishes
Manisha

Bharat on Jun 28, 2011, 11:59:00 AM said... #

hi

I want the facebook like button for the blog and not for every post.
How can i do that

Mohammad Mustafa Ahmedzai on Jun 29, 2011, 4:09:00 AM said... #

@Manisha


Sis this is because I have closed comments on that page and it can be used as FAQ only. Feel free to ask me under any relevant post or if it is too off-topic then better email me.

@Bhahrat

Then paste the code inside a HTML/Javascript on your homepage. Or may be you will enjoy reading this tutorial -> Show hide Widgets

Shift on Jun 29, 2011, 3:58:00 PM said... #

i added that , also i added meta tags , it do show likes when you like something in your profile , but it's not seen in the home page for people

Abhishek on Jun 29, 2011, 4:46:00 PM said... #

Yes Mohammad I recieved the template thanks for asking me brother.
regards
abhishek

Mohammad Mustafa Ahmedzai on Jun 29, 2011, 6:29:00 PM said... #

@shift

Kindly read this to control the appearance of the like button -> Show hide widgets

@Abhishek

My pleasure buddy. :)

cuteek on Jul 6, 2011, 10:15:00 PM said... #

Thanks for this, mine had stopped working for some reason. Really appreciate it.

September on Jul 6, 2011, 11:01:00 PM said... #

Thank you!

JaKenna on Jul 7, 2011, 9:46:00 PM said... #
This comment has been removed by the author.
Debra on Jul 14, 2011, 5:22:00 AM said... #

Hi,

Thanks for this information! I'd like to add "like" to the end of my blog post, so people can "like" it after they've read it. How do I do that?

Thanks,
Debra

Hamlet's Lair on Jul 17, 2011, 7:26:00 AM said... #

Hi Mohammad,

I'd like to seek your help. I have the facebook like button on my photoblog for a while already and it used to work just fine. This week though I found that when you click 'like' an error appears and i was told i'm missing some metadata and namespace declarations. I wonder why it was working just fine before and now it's not when I didn't tweak my html or settings anyway. Would you be able to help? Thank you!

Sky

Jim Landwehr on Jul 19, 2011, 6:37:00 AM said... #

Great Stuff Mohammed. Just what I wanted!

vivek on Jul 26, 2011, 2:29:00 PM said... #

Hi,
i hav a problm wid my like button.. it shows same number of likes for all my posts.how to fix dis..?

Brian Wiercinski on Jul 29, 2011, 9:10:00 AM said... #

@vivekI'm having the same problem too. Any ideas on how to fix? I just want the like button to be located at the end of each post and only work for one post at a time.

Conor O'Brien on Aug 24, 2011, 4:23:00 AM said... #

I have added a facebook like button, as a gadget. to appear on top of my header.

Although I do not want it to follow me when I scroll, I want it to stay on the header.

Here is the code I used:
[div style='position:fixed; top: 50px; right: 276px;'/][iframe src="http://www.facebook.com/plugins/like.php?app_id=218516348198851&href=http%3A%2F%2Fwww.cobblog.com%2F&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true"][/iframe]
[/div]

http://www.cobblog.com/

Bajo on Oct 8, 2011, 1:46:00 AM said... #

Try IT HERE http://helpblog4u.blogspot.com/2011/10/facebook-like-button-below-every-post.html ;)

Paribartan Thapa on Nov 5, 2011, 8:12:00 AM said... #

Very helpful..<a href="http://merodiary143.com>MeroDiary143</a>

Jobs in Nepal on Nov 10, 2011, 8:56:00 PM said... #

i've tried it to my blog www.hotnepalijob.blogspot.com and it's working. but when someone likes the post, no notification shown in the facebook page about the like the post.

THYAGU on Nov 20, 2011, 8:40:00 AM said... #

thnks dude,, simple and useful

www.thyagu.co.nr

arhamvhy on Nov 22, 2011, 11:26:00 AM said... #

great man..!!! i appreciate your work.

Domain Hosting on Nov 26, 2011, 6:50:00 PM said... #

Before I have the problem with facebook like buttons below titles.Now I have clear idea, thanks for sharing this useful information.
Domain Hosting

sugeng tigefa on Nov 29, 2011, 8:37:00 PM said... #

how to create recommendations button? please reply!!

prince"sudheer" on Nov 30, 2011, 1:00:00 PM said... #

how to get like button for comments

Ratna on Dec 9, 2011, 11:28:00 PM said... #

http://sarkari-career.blogspot.com/

Kristin M. on Jan 15, 2012, 2:36:00 AM said... #

Thank you! This was very helpful. One problem, though: On some of my posts, there is a line break after the Like button, but on some posts, there is none-- so the text starts directly to the right of the Like button. Why is it like this on some posts but not others? (I would like there to be a line break after the Like button on every post.)

Kristin M. on Jan 15, 2012, 2:38:00 AM said... #

Here's the link so you can see what I mean...
http://www.anatomyproartifex.blogspot.com/

elvira on Feb 17, 2012, 5:38:00 PM said... #

Hi mohamed i have a problem with this likebox.
They shows me the like button only below page post not below
Blog post.
Look this : Thats a page
and this : Thats a normal (category) post
How to fix this is a new template have install it yesterday and it makes me a little bit problems with likebox they dont wqant to show it.
Can i send u my template or did u have a tip for me.
Thanks in advance !

jonnyhoot on Feb 19, 2012, 6:40:00 AM said... #

Hi Mohammad found this very useful but was wondering if you could help me. Basically I would like to have some control over the image that is used when something has been liked. At the moment when something is liked it just grabs a random image from the page. Can you help?

Nihit Dalmia on Mar 22, 2012, 3:50:00 AM said... #

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

Admin on Apr 7, 2012, 8:37:00 AM said... #

this script is working 100%. point 4 is ok...

abhijit on Apr 13, 2012, 12:31:00 AM said... #

learning a lot from your blog.

DESTINY on Apr 14, 2012, 3:15:00 PM said... #

Where I have To put my page link In the Program??

Faran Qazi on Apr 23, 2012, 10:16:00 PM said... #

Great Job. Thanks a lot.

webeno on Apr 30, 2012, 12:11:00 AM said... #

Unfortunately I can't make this work. I have applied the code correctly in http://webeno.blogspot.co.uk/, also updated the meta tags and the html definitions, still to no success. I also tried the standard like button that gave me an error of not having fb:admins, however I do have it setup correctly - this is also confirmed when using the Facebook Debug site: https://developers.facebook.com/tools/debug/og/object?q=webeno.blogspot.co.uk - no problems at all. Could you please help me sort this out?

Thanks a lot in advance.

Niharika on Apr 30, 2012, 3:54:00 AM said... #

hai ,
iam not getting facebook like button below the post , why ?
please help me

darkness on May 1, 2012, 4:22:00 PM said... #

Hi i pasted fb like code as u said below every post(for users ti like post) and in top of my page in website(to like page)---------but unfortunately if somebody likes ANY ONE OF THEM EVERY LIKES ARE UPGRADED BY ONE............pls help me with it Thank You in Advance

BLOGGER TRICKS "O" TIPS on May 9, 2012, 6:14:00 AM said... #

thanks http://btricksotips.blogspot.com/

Dipesh Timilsina on May 16, 2012, 11:51:00 AM said... #

help guys..... it didn't work for me.... help...
my blog....
gadgetneed.blogpsot.com

Janice Carrington on May 20, 2012, 1:26:00 AM said... #

Mohamed is there any way to have the 'like' button for individual posts?...by that i mean for each post to be liked separately...i have the like button at the bottom of every post but it just shows the like count for the entire blog no mater what page or post you like, like one post and the count increases for them all and for the blog as a whole. Also, as it stands, once a person has liked one post they can't like anything else...is there a way for each post/page to have it's own individual 'like' button so that it only registers the likes for that post...oh and i am using my own domain if that makes any difference @ http://www.janc.co.uk

Janice Carrington on May 20, 2012, 3:16:00 PM said... #

@Janice Carrington
i have been pondering over the problem i mentioned above with regards the like button at the bottom of each post...i think it has something to do with using my own domain, i have tested this on a separate blog which uses the blogger address and it works fine but on my main blog which uses my own domain it does not work...i think the problem is getting the like button to recognise my domain in the post data url instead of the original blogger url...hope that makes sense and hope you can help...thanks in advance.

Koti on May 20, 2012, 5:12:00 PM said... #

@Janice Carrington even i am facing the same problem it has nothing to do with the url because few of my friends use that single code for three websites it works fine but they are using blogger templates.I am using a custom made.you can check the problem at my site peepmore.com.
Hi admin if you the solution please mail me at peepmore[AT]gmail.com
Koti

Yateendra Sahu on May 29, 2012, 2:12:00 PM said... #

i could'nt find
..!
is this because i have changed template?

Ravi Ojha on Jun 8, 2012, 10:20:00 AM said... #

Fb like button changes to confirm.. Due to this people feel awkward and they dont confirm... How to fix this... Pls help me out... I googled the query... couldnt get the soln

PC TIP CENTER on Jun 8, 2012, 2:38:00 PM said... #

I CAN NOT FIND THIS TEXT

സഹാà´¯ി on Jun 17, 2012, 4:30:00 PM said... #

thanks my dear brother.....

crook on Jun 18, 2012, 4:14:00 PM said... #
This comment has been removed by the author.
crook on Jun 18, 2012, 4:16:00 PM said... #

I think this topic is interesting and quiet knowledgeable to me, i am impressed and also gonna share to my friends.
Facebook Development

LiveJobs Page on Jun 19, 2012, 7:37:00 PM said... #
This comment has been removed by the author.
Rikk's Heart Speaks on Jun 21, 2012, 4:13:00 PM said... #

Thanx a lot :) working properly

techdass.com on Jun 27, 2012, 12:53:00 PM said... #

Great Post, I just applied the code in my blog. It's working great.

AMINUL ISLAM on Jul 7, 2012, 10:46:00 PM said... #

Thanks for the nice tips. It will help me to add a FB like button in my blogger blog.
buy real facebook likes

Dharmik Shah on Aug 3, 2012, 10:45:00 PM said... #
This comment has been removed by the author.
Essa Khan on Aug 9, 2012, 8:17:00 PM said... #

Hi there,

My name is Essa. I am new to blogging. Its very good information you have shared with us here. I liked it .

Thank you.

brian on Aug 10, 2012, 9:43:00 AM said... #

Get a very useful Online Engineering Degree Programs which is dedicated to future Engineers and it has all the latest information you need to make informed decisions about your future. Visit Great Website and explore the information we have available!

nithin km on Aug 12, 2012, 8:52:00 PM said... #

that was great on my blog www.gadgettweet.com

MANOJ SINGH on Aug 20, 2012, 1:30:00 PM said... #

its not work on my blog.... when I click on the button its ask me to confirm but after confirmation it does not apear on my facebook account or like counter

udit gulati on Oct 6, 2012, 7:36:00 PM said... #

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

erotski on Oct 30, 2012, 6:51:00 AM said... #

super savjet

Regnum Financials on Nov 7, 2012, 6:26:00 PM said... #

There are 3 in my blog template :S where to paste the code??

joei ♥ on Nov 12, 2012, 1:20:00 PM said... #

With this button, is it possible to know the persons who liked your post?

DJ MR.CEE on Nov 15, 2012, 8:10:00 PM said... #

i have this but why does it re set the likes on some posts. i had loads of likes on a few posts but when i check again there is none? why does it do this

marshall on Nov 20, 2012, 6:15:00 AM said... #

This is a very good guide on putting facebook like button on blogger. Will sure gonna make it. Thanks! :)

facebook applications developers

Sidney Kikuta on Jan 5, 2013, 1:04:00 PM said... #

Awesome tips ... thanks for sharing :)

Empower4Network on Jan 13, 2013, 6:26:00 PM said... #

Learn here:

Where do you blog
How do you blog
How do you get a blog
How do you find a blog

Gayan Dulantha on Feb 11, 2013, 9:54:00 AM said... #
This comment has been removed by the author.
Gayan Dulantha on Feb 11, 2013, 9:57:00 AM said... #

There are some problems in this trick.
Do you want working one?
Just go to below link.
Add Facebook Like Button Below Blog Posts

rash rox on Feb 11, 2013, 1:04:00 PM said... #

this is working for me..
thank you.
How Earn FromBlogging

Muzzamil on Mar 24, 2013, 8:39:00 PM said... #

Just Click this Link and Surely get Unbelievable money HUGE AMOUNT

http://visitors2cash.com/ref.php?refId=79222

VNPP on Mar 29, 2013, 7:35:00 PM said... #

This is simple tips but very useful.
...▄▀▄▀▄▀▄ ▀ Blogger Tutorials ▀▄▀▄▀▄▀▄...

androidistsblog.blogspot.in on Apr 8, 2013, 12:51:00 PM said... #

this is not working in my blog please help me

bengeek.com on Apr 12, 2013, 9:07:00 PM said... #

it works for me Thanks a lot man !!

chicocbeats.com on Apr 12, 2013, 9:10:00 PM said... #

for peopel who saying don't work ... check out my blog posts it work

SREERAJ M on May 7, 2013, 10:27:00 AM said... #

Computer tricks , internet tricks, hacks and more.,

Click Here To add Comment

Confused? Feel free to ask

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

Support Us

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:-

or try a Beautiful Banner


Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |