How to Add Facebook Like Button to WordPress Site

In this tutorial I will show you how to add a Facebook like button to WordPress Site. Instead of installing a plugin, we will do it manually. When people visit your site and click the Facebook like button then in their Facebook news feed, there will be a post says they like your site or page with a link pointing to your site and maybe a featured image. So all their friends can see the your website. This really helps your website to get free and viral traffic.

Add Facebook Like Button to Your WordPress Site

The first thing you have to do is go to the Facebook developer’s page where you can find the like button code. You do not need a Facebook developer account to do this. Click the like button tab on the left then scroll down to the Like Button Configurator section. Put your URL in the URL to Like field. The default width is good enough.  And hit the Get Code button. Notice that be default it include a share button as well.


You will see two piece of code. The first is mainly a JavaScript code. The second is HTML5 code.


What you need to do is copy the first piece of code. Then open the footer.php file under your WordPress theme folder and paste the code right above the </body> HTML tag like below.

<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); = id;
 js.src = "//";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Save and close the file.

After that copy the second piece of code. If you want the like button to appear in a sidebar widget then go to Appearance > Widget. And drag a text widget to the sidebar, paste the second piece of code to the content area of the text widget then save it. Now you can a Facebook like button will appear in the right sidebar of your website.


If you want the like button to appear in every single post of your website, then open up the content-single.php file under your WordPress theme folder. And past the second piece of code to where you like it to appear.

 <header class="entry-header clearfix">
 <h1 class="entry-title"><?php the_title(); ?></h1>
 <?php the_tags('<div class="entry-tags clearfix"><span>' . __('TOPICS:', 'mh-newsdesk-lite') . '</span>','','</div>'); ?>
 <div class="fb-like" data-href="" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
 <?php mh_newsdesk_lite_featured_image(); ?>
 <?php mh_newsdesk_lite_post_meta(); ?>
 <div class="entry-content clearfix">
 <?php the_content(); ?>

I pasted it right above the featured image so the Facebook like button will appear above the featured image of every post of my website.

Rate this tutorial
[Total: 0 Average: 0]

Leave a Comment

  • Comments with links are moderated by admin before published.
  • Your email address will not be published.
  • Use <pre> ... </pre> HTML tag to quote the output from your terminal/console.
  • Please use the community ( for questions unrelated to this article.
  • I don't have time to answer every question. Making a donation would incentivize me to spend more time answering questions.

The maximum upload file size: 2 MB. You can upload: image. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded. Drop file here