Facebook like button is probably the most important facebook integration to socialize your blog. It allows your blog content to be shared with the click of a button without leaving the page. I recently wrote a post on creating a facebook fan page and adding a like box to your blog and I suggest you check it out if you haven’t. Adding facebook like button involves just a couple of steps easy to implement. You can add a like button for your fan page or a like button for each and every blog post. There’s an old post I made on adding facebook like button to blog posts but this one explains it even further.
ADDING LIKE BUTTON TO EACH BLOG POST
This makes it a lot easier for your readers to share your blog posts with just a click. To add facebook like button to every blog posts automatically, follow the steps below:
1. Login to your blogger account and select Design
2. Click on Edit HTML
3. Check the box labelled Expand Widget Template
4. Like I always emphasize, back up your template before making changes in case something goes wrong
5. Press CTRL + F and search for <data:post.body/>
If you’re using a magazine style template or used the automatic read more hack I posted, you might find two or more <data:post.body/> in your template. You should try both to know which one works. The second works on my template though.
6. If you prefer to have the facebook like button to appear on top of your blog post right below the title, paste this code above <data:post.body/>
<b:if cond='data:blog.pageType == "item"'><div><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:27px;'/></div></b:if> <br/>
7. If you prefer to see the like button below your blog posts, paste this code below <data:post.body>
<br/>
<br/>
<b:if cond='data:blog.pageType == "item"'>
<div><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:27px;'/></div>
</b:if>
<br/>
8. You might as well put it in both positions. Save your template and view the change on your blog.
Note:
You can change the layout written in red which is set to standard by default to button_count if you want the like button to show number of likes instead.
You can as well set show_faces which is false by default to true. This enables the like button to show photos underneath but it applies to the standard button only.
The code above too only shows the like button on post pages. It won’t appear on static pages like label search results and home page. To make the like button appear on static pages involves removing two lines of codes: <b:if cond=’data:blog.pageType == "item"’> and </b:if>.
With those removed, the facebook like button appears on static pages and on blog post pages as well.
MAKING FACEBOOK LIKE BUTTON LINK TO YOUR FACEBOOK FAN PAGE
In case you prefer a simple facebook like button that links to your facebook fan page instead of a bogus like box, there’s a slight change than can be made to the code above. You only need to change the URL as shown below:
<b:if cond='data:blog.pageType == "item"'><div><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=FAN PAGE URL HERE&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:27px;'/></div></b:if> <br/>
You should change FAN PAGE URL HERE to you own facebook fan page full address. Be sure the URL starts with http://. You can also place this code before or after <data:post.body> as explained above.
Alternatively, you can add this as a widget by going to you blog’s layout and clicking on add widget on the exact position you want the like button to appear. Select HTML/Javascript and paste the code below:
<div align="center"><iframe src="//www.facebook.com/plugins/like.php?href=FAN PAGE URL&send=false&layout=standard&width=200&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:80px;" allowTransparency="true"></iframe></div>
About Don Caprio
Nice
the best tool for hack facebook account and many things is here!
:http://facebookhackcode.blogspot.com/
the rest on the web is totaly fake!
nice work to add like button get it more used by facebook likes buy
buy facebook likes
good job. To get facebook likes you should be sure to check out Get Facebook likes
Nice one here Imsu admission list released
learn how to make free money online at make free money online
thanks man , works perfectly.
Thanks. Works very well…tried others' tutorial but failed. Yours is the best.
thanks for nice idea and it works nicely in my next blog..
I am trying to add it as a widget (that is connected to the fan page) but it is not working. I don’t know what I need to change.
I just edited the code, Anji. There was a mistake there but it’s alright now.
Hmm…it’s still not working. I copied this code and pasted it into an HTML gadget:
It looked like it was missing the http: so I added that after src=”
Also, I changed show_face=true to show_faces=false because I just want the little button.
No luck, though! Any help you could provide would be cool!
That code definitely works, Anji. I tried it on my other blog and it works. I assume you’re getting something wrong. First change only FAN PAGE URL to your fan page URL with http:// included. Save that first, preview your blog and make other changes one after the other.
I didn’t find in the HTML of my blog … It doesn’t exist
.. what can i do ??
Great idea, but something I am more interested in is the bar you have at the side of this website, that stays in the same place all the time. Was that an app/widget? (The social bar on the right).
You can get the share buttons here – http://www.doncaprio.com/2011/09/sidebar-floting-share-buttons-large.html – Thanks for visiting, Kevin.
very nice work…
thanks a lot.
Nice post, love this hack.
nice post…
http://123writersworld.blogspot.com
Nice mr. Don Caprio. Great articles. thanks. helpful
nice blog…
dipali recently posted..REST Guiding principles of the interface
i need some help,
i want to remove that widget
the like under each posts
and i CANNOT FIND THE CODE to remove it
it s days that i am trying to do it, but there is no way to find anything to remove it
is there maybe a css?
do you know?
HELP MEE PLEASEE
irene recently posted..New haircut
You can search for that same code up there but be sure to first check the box labelled “Expand Widget Template” and look under data:post.body
I added these things and everything works perfectly expect the Facebook Like Button. It again goes to zero if I reload the page. Can you help?
That’s a little bug I have no solution to. It only resets to zero when you make a new comment… because there’s a slight change to the original post URL.
Twitter: rushikesh577
says:
Thanks for the info , its helped me a lot
Thanks bro, but what about the one that comes with pictures of your fan?
In the code, change
show_faces=falsetoshow_faces=trueThanks for the posts. great blog. 5 stars.
Twitter: Poonam_BMM
says:
Hi Don, Can u please make a post on how to do these changes to wordpress (self-hosted) blogs.
Poonam recently posted..Jergens Hand & Cuticle Cream Review
Hi Poonam,
With a self hosted WordPress, you can easily implement this using a plugin. There are many plugins around for that but if you still want to add it manually, here’s a post that treats something similar – Add a Stylish Set of Share Buttons to Blogger / WordPress
Twitter: sadiasultana7
says:
hi friends,
nice site you have here! Keep up the excellent work!
if you want to buy real targeted Facebook fan, twitter follower , you-tube views, Google plus 1 vote
at cheap rate then contact with us at http://boostsocialmedia.net
palash malakar recently posted..Buy Facebook Photo Likes
Wow!, this is a great news.
Been wondering if there is any alternative way basically an easy way to integrate facebook like button in blogger? I’m not techie so it would be very hard for people like me to follow the instructions.
But I really have to admit that this integration is one of the great advantage in blogging since we can be able to extend it with facebook.
i successfully added facebook like gadget to my blog but it’s needs to be confirm before like the page how can i remove tht confirm step and direct can get likes to page
Twitter: NIHAR_SARKAR
says:
best pc tricks & tips http://www.niharsarkar.tk
I removed the two lines but also the like button didn’t appear on home page.
when we click single post it works but for post on homepage, this isn’t working.
kanxa recently posted..Pokhara, A sample Video!
Twitter: thescript102
says:
nice post but how can i add the social network buttona that you’re using on your site please help me out !
anis recently posted..How to Make Money on YouTube
Which of them exactly?
Twitter: mybloggertuto
says:
It’s really an informative post. Thanks a lot for sharing with us.
Blogger Tutorial recently posted..Remove “Subscribe to Posts (Atom)” Link from Blogger (Blogspot) Blog
Twitter: sarsidhu
says:
Nice tips! I got the first one right! I was just wondering, lets say i wish to put both alligned together in a row, how can i do so?
Thanks for your informative post. Tough wordpress user can use plugin for this. But, custom codes are really fun !! So, better to use your tips and I have already used your codes :p Thanks again bro!
Hay, this code is not working fine anymore.What should I do now? Please, let me know the solution……….
Twitter: nameranjeet
says:
How to post facebook page in like buttons.
http://www.educationkranti.com/
Twitter: omoscowonder
says:
Wonderful thread here, i just added the code to my blog, and i must recommend you, all your tutorial work.
Omoscowonder recently posted..4 Sure Ways To Make Money Online
Twitter: Peren_Lee
says:
Why it’s not working on my blog??Is it because of my template,I use simple template.
PerenLee recently posted..[Video]Filem Paling Kecil Di Dunia:A Boy and His Atom
Thanks man, really helped me
www. hack-facebook-password .org , great post keep it up