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); js.id = id;
 js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
 fjs.parentNode.insertBefore(js, fjs);
(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>

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>'); ?>
 </header>
 <div class="fb-like" data-href="https://www.linuxbabe.com" 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(); ?>
 </div>

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.

How to Add Facebook Like Button to WordPress Site