Home » Blog » Tutorials » How to Add Facebook Like Button in WordPress

How to Add Facebook Like Button in WordPress

Posted on May 2nd, 2010 by Editorial Staff in Tutorials | 149 Comments

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.

Note: Sometimes, Facebook doesn’t show the right thumbnail image, or the right title by default. To prevent that issue, you should add Facebook Open Graph Meta Data in your WordPress.

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)); ?>&amp;layout=standard&amp;show_faces=false&amp;
width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px;">
</iframe>

You can also use the XFBML method which we highly recommend because it allows you to receive further insights on your likes. Here is how to do it:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo get_permalink(); ?>" show_faces="true" width="450"></fb:like>

Subscribe to our Newsletter, and see how you can get analytics from the Facebook Like Button.

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.