Build Online Store! | Penguin Panda Series - New! | 4 Rules To Make Money | SEO Settings | Facebook Popup 1, 2, 3 | Mashable 1 , 2


Monday, June 27, 2011

Add Facebook Like Button Below Post Titles - New


Pin It

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 »


Thanks for making this possible! Kindly Bookmark and Share it.
Technorati Digg This Stumble Facebook Twitter

41 comments:

Comment Page :
samsexy98 on 9:04 AM, June 27, 2011 said... #

Please Correct point no.4 :P

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

Dear mohammad
Correct The 4th Point
regards
hackerstips.tk

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

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

@Abhishek

did you receive the template pal?

Manisha.Rautela.Bisht on 10:43 AM, June 28, 2011 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 11:59 AM, June 28, 2011 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 4:09 AM, June 29, 2011 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 3:58 PM, June 29, 2011 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 4:46 PM, June 29, 2011 said... #

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

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

@shift

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

@Abhishek

My pleasure buddy. :)

cuteek on 10:15 PM, July 06, 2011 said... #

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

September on 11:01 PM, July 06, 2011 said... #

Thank you!

JaKenna on 9:46 PM, July 07, 2011 said... #
This comment has been removed by the author.
Debra on 5:22 AM, July 14, 2011 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 7:26 AM, July 17, 2011 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 6:37 AM, July 19, 2011 said... #

Great Stuff Mohammed. Just what I wanted!

vivek on 2:29 PM, July 26, 2011 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 9:10 AM, July 29, 2011 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 4:23 AM, August 24, 2011 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 1:46 AM, October 08, 2011 said... #

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

Paribartan Thapa on 8:12 AM, November 05, 2011 said... #

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

Jobs in Nepal on 8:56 PM, November 10, 2011 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 8:40 AM, November 20, 2011 said... #

thnks dude,, simple and useful

www.thyagu.co.nr

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

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

Domain Hosting on 6:50 PM, November 26, 2011 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 8:37 PM, November 29, 2011 said... #

how to create recommendations button? please reply!!

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

how to get like button for comments

Ratna on 11:28 PM, December 09, 2011 said... #

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

Kristin M. on 2:36 AM, January 15, 2012 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 2:38 AM, January 15, 2012 said... #

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

elvira on 5:38 PM, February 17, 2012 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 6:40 AM, February 19, 2012 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 3:50 AM, March 22, 2012 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 8:37 AM, April 07, 2012 said... #

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

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

learning a lot from your blog.

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

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

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

Great Job. Thanks a lot.

webeno on 12:11 AM, April 30, 2012 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 3:54 AM, April 30, 2012 said... #

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

darkness on 4:22 PM, May 01, 2012 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 6:14 AM, May 09, 2012 said... #

thanks http://btricksotips.blogspot.com/

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

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

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. Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
Mohammad

 

Recent Posts

Join Me On Facebook

8600+ Followers

Join The Team!

Licensed Under CC

Recent Comments

Follow Me On Twitter

2601+ Followers

My Blogger Tricks (MBT) © 2012. All Rights Reserved | Contact |