{"id":660,"date":"2016-10-11T00:00:00","date_gmt":"2016-10-11T00:00:00","guid":{"rendered":"http:\/\/blog.hostinger.io\/hostinger-tutorials\/uncategorized\/wordpresshow-to-add-facebook-like-button-to-wordpress\/"},"modified":"2026-03-09T19:20:13","modified_gmt":"2026-03-09T19:20:13","slug":"how-to-add-facebook-like-button-to-wordpress","status":"publish","type":"post","link":"\/ng\/tutorials\/how-to-add-facebook-like-button-to-wordpress\/","title":{"rendered":"How to add a Facebook like button in WordPress: coding or a plugin"},"content":{"rendered":"

Searching for a way to attract more traffic to your WordPress website? Why don’t you try Facebook Like buttons? With a click, your visitors can like and share your content on their Facebook accounts.<\/p>

In this article, we will provide you with a comprehensive tutorial on how to add a Facebook Like button to your WordPress site.<\/p>

\n\n\n\n<\/p>

Why do you need a Facebook Like button on your site?<\/h2>

You can’t deny the power that Facebook holds – it has over 3 billion<\/a> monthly active users, and over ten million<\/a> businesses advertise on this platform.<\/p>

However, you don’t have to use ads to promote your business on Facebook.<\/p>

Expand your audience reach by using a Facebook Like button. Thanks to the platform’s Open Graph<\/a>, your site’s link will be posted on a visitor’s news feed each time the button is clicked. It’s an easy way to get people to share your website.<\/p>

How to add a Facebook Like button<\/h2>

There are two methods you can use to add a Facebook Like button to your website – inserting code to your theme’s template files or utilizing a WordPress plugin.<\/a><\/p>

Manually adding the code<\/h3>

Here are the steps to manually add the button to your site:<\/p>

    \n
  1. Access the Facebook for Developers<\/a> page and click Like Button Configurator<\/strong>.<\/li>\n<\/ol>
    \"Facebook<\/figure><\/div>
      \n
    1. Fill out the URL to Like<\/strong> field with your site’s link or the URL of your Facebook page.<\/li>\n\n\n\n
    2. Adjust the settings – width, layout, and size – to fit your preferences. You’ll see how the button looks like inside the preview window.<\/li>\n\n\n\n
    3. Click Get Code<\/strong>, and a popup box will appear.<\/li>\n<\/ol>
      \"Like<\/figure><\/div>
        \n
      1. Copy the first code snippet from the JavaScript SDK<\/strong> tab.<\/li>\n\n\n\n
      2. Open your WordPress dashboard directly or access it from your WordPress web hosting control panel and head over to Appearance<\/strong> -> Theme Editor<\/strong>.<\/li>\n\n\n\n
      3. Select the header.php<\/strong> file under the Theme Files<\/strong>, and paste the code below the <body> tag. Click Update File<\/strong>.<\/li>\n<\/ol>
        \"WordPress<\/figure><\/div>
          \n
        1. Go back to the JavaScript SDK<\/strong> tab and copy the second code snippet.<\/li>\n\n\n\n
        2. Navigate to Theme Editor<\/strong> again, and select one of the theme files where you want to display the button. For instance, you can choose single.php<\/strong>, page.php<\/strong>, and footer.php<\/strong>.<\/li>\n\n\n\n
        3. Click Update File<\/strong> and check your website to see the changes.<\/li>\n<\/ol>
          \"\"<\/a><\/figure>

          Using a plugin<\/h3>

          Another way to add Facebook Like button to your site is by using a WordPress plugin.<\/p>

          There are plenty of plugins<\/a> available, but we recommend using WP Like Button<\/a>. It is compatible with all the best WordPress themes<\/a>, provides four different responsive button layouts, and can display a Share <\/strong>button along with the Like <\/strong>button.<\/p>

          Here is how you use the plugin:<\/p>

            \n
          1. Once you have installed and activated the plugin, open your WordPress dashboard and select WP Like Button<\/strong> menu.<\/li>\n\n\n\n
          2. Use “Where to display?<\/strong>” setting to choose where you want the button to be displayed.<\/li>\n<\/ol>
            \"WP<\/figure><\/div>
              \n
            1. If you do not want to show the button on particular pages, select the Exclude specific pages and posts<\/strong>. A dropdown menu will appear where you can pick the posts you want to exclude.<\/li>\n\n\n\n
            2. Scroll down to the Preview<\/strong> section to customize the looks of your button.<\/li>\n\n\n\n
            3. Hit Save Settings<\/strong> — and you’re done.<\/li>\n<\/ol>
              \"WP<\/figure><\/div>

              Alternatively, the plugin also allows you to manually add the button by inserting the [fblike]<\/span> shortcode to your WordPress editor.<\/p>

              If you want to disable the Like<\/strong> button, simply switch the On\/Off<\/strong> toggle located at the bottom of the settings page.<\/p>

              Conclusion<\/h2>

              All in all, Facebook Like button is an important tool to boost your website traffic. The more readers like and share your content, the bigger the possibility that your website will thrive.<\/p>

              In this tutorial, you’ve learned two methods to add Like buttons to your site. The first one requires you to get a certain code from Facebook for Developers, while the other needs you to use a plugin.<\/p>

              Which method do you prefer? Let’s discuss it in the comment section below.<\/p>

              \n
              \n \n \n <\/svg>\n

              \n Learn What Else You Can Do With WordPress <\/p>\n <\/div>\n

              How to Login to WordPress<\/a>
              \n              How to Duplicate Pages and Posts on WordPress<\/a>
              \n              How to Delete WordPress<\/a>
              \n              WordPress Taxonomy Guide<\/a>
              \n              Guide to WordPress Revisions<\/a>
              \n              How to Add Related Posts in WordPress<\/a><\/p>\n <\/div>\n \n<\/p>\n","protected":false},"excerpt":{"rendered":"

              Searching for a way to attract more traffic to your WordPress website? Why don’t you try Facebook Like buttons? With a click, your visitors can like and share your content on their Facebook accounts. In this article, we will provide you with a comprehensive tutorial on how to add a Facebook Like button to your […]<\/p>\n

              Read More…<\/a><\/p>\n","protected":false},"author":37,"featured_media":145430,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"2 Ways to Add Facebook Like Button in WordPress: Step-by-Step","rank_math_description":"Want to attract more traffic to your website? Check out our comprehensive guide on how to add Facebook Like button to your WordPress site.","rank_math_focus_keyword":"facebook like button in wordpress","footnotes":""},"categories":[22637],"tags":[],"class_list":["post-660","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-add-facebook-like-button-to-wordpress","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-add-facebook-like-button-to-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-add-facebook-like-button-to-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-add-facebook-like-button-to-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-add-facebook-like-button-to-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-add-facebook-like-button-to-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-add-facebook-like-button-to-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-add-facebook-like-button-to-wordpress","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/660","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/comments?post=660"}],"version-history":[{"count":21,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/660\/revisions"}],"predecessor-version":[{"id":145429,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/660\/revisions\/145429"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/media\/145430"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/media?parent=660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/categories?post=660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/tags?post=660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}