How to – Add Facebook LIKE button to WordPress Posts

Article Last Updated: 30^th Apr 2010
Posted by Ruhani Rabin in PHP, Wordpress | View Comments |

Facebook introduced more social interactions with their new “Like” or “Recommend” Button. This Facebook button enables the user to interact with a site or page. Additionally share it with his/her friends at their own Facebook profile.

Well, Facebook does made it pretty easy to Implement the “Like” button code on your site. The complexity comes when it is not a single page website. How about a blog Post? This is where you will need this hack to make it work!

Do not use the code provided by Facebook because that will not work on Blog posts. Here is the hacked code designed for WordPress!

Open up your single.php and look for the_content(). Paste the code you see below… either before or after the_content()..

1
2
3
4
5
6
7

// start of fb like code

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px"></iframe>

// end of fb like code

<?php the_content(); ?>

Optional Settings:

If you like to show the faces of your friends, change the part “show_faces=false” to “show_faces=true”

If you like to show the label of the button as “Recommend“, change the part of the code “action=like” to “action=recommend”

I hope this will help you to implement the “Like” button on your WordPress Posts! Have fun and drop me a line at twitter or you can click on the “Like” button on the top of this post

Resources (Plugins for WordPress):

Thanks to my Readers

Facebook Like plugin including support for Open Graph (XFBML)
Facebook Like Plugin from Smoking Gunn (Features Live Preview, Thanks Stefan to introduce that).
Alternatively … Kouguu FB Like WordPress Plugin with Configurable Admin Screen

Those who doesn’t want to do code hacking, this one is for them

This is how to Implement in Thesis WordPress theme

And.. I’m spent…

Don’t forget to rate the post too!

GD Star Rating
loading...

About Ruhani Rabin

Ruhani Rabin is the original owner and author of this blog. He also reviews web 2.0 startups at Tech2all.com. Largely interested in web 2.0 apps & Social Media. Currently the Vice President of MOL Access Portal (MOL is owner of Friendster.com). Also he is Web 2.0 & Social Media Researcher and a Total fun Geek!.. There you have it ;)

Twitter Profile: http://twitter.com/ruhanirabin

Cherry Rahtu
Hi Robin,yes , it does work well , both like button and comment box are shown, but how can i move it right after the content and before the related post and vote button in my blog. you can see the example post here http://t.co/EyqlPt3, i will appreciate if you could help me out . thank you.
Virgil Anthony Warren
Thanks very much for your short tutorial. Been looking all over for something like this. Now I feel stupid after realizing how simple it was. This will make my website that much better.
Info
Thank you a lot of. It's help for me :) http://www.Howitwork.info
Facebook Apps
I have the like button a couples of days after they announced it, but How the hell can I implement the open graph in my wordpress?? Thats the question I want an answer for
thegirlinthecafe
Thanks a lot for this, very useful!
GLenn
thumbs up sir, i have just click the like button at the top! :)
Sms for Mobile
Wonderfull post contains great usefull information thanks for it
Matt Halfhill
Thank you a ton for the help! I tried a number of plugins, but didn't like that there were very few options of exactly where you could place the button.

Thanks again for sharing this helpful tip!
Ronald Lejeune
Thanks so much for the how to. I think my readers will enjoy this feature..

http://videolinkx.com
Steve Patterson
I found this plugin: http://wordpress.org/extend/plugins/like/