How to Add Facebook Like Button in WordPress
Facebook and Twitter are going head to head in their attempts for web domination. Twitter released their Anywhere Platform which allowed users to use twitter just about anywhere on the web. Now facebook has released their “Like” button. The Facebook like button extends their like feature to other sites on the web. If the users are logged into their facebook account, then they can “like” or “recommend” a web page to all of their facebook friends as they are reading it from the site. In this article, we will share the advantages of Facebook like button and show you how you can easily add it in your WordPress posts, blogs, and sites.
Advantages of Facebook Like Button
Facebook is world’s 2nd most visited site according to Alexa. Everyone from age 11 to 77 are on facebook. Each user has a news feed where they see updates from their friends. This news feed shows the link their friends like, people their friend added, pages their friends became a fan of and much more. Now if a user has 410 facebook friends, and he clicks “like” on your post, then it will be shown to all of his 410 friends. This is the best free word of mouth advertising you can get. But this does not end here. It gets better. Lets say, Amanda likes a link from one site, and David also click like on that same link. Muhammad who is a mutual friend of both David and Amanda will see a text like:
Your Friends Amanda and David liked WPBeginner’s Link: How to Add Facebook Like Button in WordPress
This is powerful because not only does this do an excellent job of Word of mouth advertising, but by mentioning two friends liking this post Muhammad is twice as likely to click like on your link. Now imagine this happening with 15 mutual friends and then increase all the way up to thousands of users. This like button can be the single most important factor in making your article go viral on facebook.
How to Add the Facebook Like Button in WordPress
Now that you know that this facebook button is very useful, lets add this in your WordPress post. First open your single.php file in your theme’s folder. Then paste the following code inside your post loop:
<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>
Once you paste the code, you are done. You should see something like what we have at the top of our post. (Click on the button to see its functionality 
):
There are other parameters and options for this plugin.
If you want to show the friend icons under the button, then you should use the parameter:
show_face=true
If you want to display the simple button with only the count and nothing else, then you want to use the parameter:
layout=button_count
If you want a darker color scheme for your button, then you need to use the parameter:
colorscheme=dark
If you want to change the text from Like to Recommend, then use the parameter:
action=recommend
You can customize the width of the iFrame as you like.
If you have any questions, then feel free to ask in the comments. We also recommend that you look at our Smart Sharing Plugin to add a floating share box with retweet, facebook share, digg, and stumbleupon buttons.
Additional Resources
Comments
45 Responses to “How to Add Facebook Like Button in WordPress”Share Your Opinions
Tell us what you're thinking...
and if you want a pic to show with your comment, then get gravatar!
Please make sure that you have read our Comment Policy.
Thanks for this tutorial.
I really looking how to implement it and found the answer here.
Great!
Just what I was looking for. Thanks
Love the article but I have encountered some problems. I don’t know where to find the single.php file? lol. Could you guide me? I use wordpress.com and I’m not sure if that makes a difference.
Thanks!
This is for Self Hosted WordPress blogs not WordPress.com themes.
Here’s the WordPress plugin:
http://wordpress.org/extend/plugins/like
No coding necessary, you can customize the look and placement of the button in the settings interface.
Been noticing this Facebook like button appearing on more and more sites lately and think it’s a great idea. Time to see if I can implement this now… WITHOUT completely destroying my blog (you’d be surprised how close I’ve come multiple times once I start messing with the code – programmer FAIL).
Unfortunately, I don’t have a single.php file in my Atahualpa theme. I’m not sure where else I could put the code. Any ideas?
Don’t know a lot about Atahualpa theme very much. Please ask in their support forum, or you contact us via email and we can take a closer look at your site.
Re: Atahaulpa – I had the same issue as Heather. Solution: In Dashboard, go to Appearance – Atahaulpa Theme Options – Style and edit center column. Paste it in “The LOOP” section. Works like a treat!
Is there a way to make it display at the bottom of the post instead of the top?
Yes just add it after the_content php part of your post … At the bottom of the loop. It can be added anywhere in the loop .. doesn’t have to be at the top.
I have noticed many sites have added the button to the top of the page. But isn’t it a better idea to place the button at the bottom of the page, allowing readers to click without scrolling up after they have finished reading the article ?
It is entirely up to the blogger. You can try it on your blog and see which placement works best for you
Finaly iam found plugin like the float stuff in your site. Thanks for your share.
just placed one on my blog
Hey,
What about adding the site’s URL after the post title? Something like this: X likes Y on Z.com
You don’t get to control that. It is facebook who is doing that, and they only display page title.
Hi to everyone,
I see more blogs use only the button and the number of persons who like without the phrase “be the first….”
how is it possible?
thanks
You need to change the layout parameter to button_count as mentioned int he article.
I added the code however if you go to the individual post it gets apage that only shows the facebook “like” button and does not take the viewer to the actual post. So now if a viewer goes to the post they lose it. Any suggestions?
Have no idea what you are talking about. Please use our contact form and show us what you are talking about by linking to your site.
Works great! I narrowed the height to get rid of some white space it caused, but that was the only tweak.
The like button is the best little added feature to a site thanks for the lesson.
This is probably a stupid question, but are the instructions you gave relative to the small “thumbs-up” graphic and text (showing 184 people liked this. Be the first of your friends) at the top of this post? Or are they for the larger square graphic appearing to the left of your post (the one appearing underneath your tweetmeme button that says 45 shares).
I’d like to just have that larger square graphic on my blog and have it appear next to my tweetmeme button and I’m wondering how to go about that? Is there a tutorial you can direct me to?
Thank you so much for any guidance!
This tutorial is about the like button. Just use the search button on this site and look for Facebook Share button and you will find the tutorial for that.
Thank you – I did as you suggested and found that tutorial and left you a comment on it as I was unsuccessful in getting it to work.
I have added the code on single.php , but the button doesn’t appear on all my post.
If I add the code on every post (from HTML tab), the button appear but encountered problem.
Why this happen? Is it depend on the theme?
It will appear on all single post pages. If you mean that you want to show it on all pages in your category pages or your index pages, then you would need to paste the code in your index.php inside the post loop.
No, I mean doesn’t show in my posts not pages. Or maybe I placed in wrong part of single.php. Is it possible to paste the code in any part of single.php?
Thanks.
thanks for the good tutorial Facebook Like Button in WordPress
helped me very much!
Thanks for sharing. How did you make your retweet and facebook share buttons to remain permanent on your blog?
We are using a plugin called Smart Sharing. Do a search on our site and you should be able to find it. It is exclusive for WPBeginner users.
I addedd the button to my code and it appears in my blog posts. however when I poke it, my facebook profile does not reflect that I like it? Am I doing something wrong? I should see that I like it my feed, am I correct?
Yes you should see that you like it in your feed. Are you pasting the code inside your loop?
I posted it in my style.php so I am not sure if that is what you mean by putting it in my loop?
sorry single.php file is rhe one I changed
Is there a way to show on the sidebar which posts have the most likes on Facebook. I think it would be neat to see which ones are shared most often.
Fantastic! I know this may seem like a useless comment, but I really am thrilled to find this tutorial. Much appreciation.
Dude, what loop? What is a loop? I don’t get what that means. I tried pasting the code in the single php page but got nothing.
Loop is the code which says if is post…http://codex.wordpress.org/The_Loop
thank you very much, i am starting to learn wordpress…and here i found your site very helpfull for begginers…keep it up…
All I know is that I tried putting in code for the like button and now I get double posts.
Thanks for the tutorial and great tips inside the comments. Just installed on Atahualpa theme. Great!
This seems to not working on my site. It showing error after clicking the Like button.
What can i do now?
We are using this code on our site, so don’t know what could be causing the error. Can you please specify what error it is.