How To Add Facebook Like Button To WordPress Website?

add facebook like button to wordpress

Facebook doesn’t need an introduction. You all know that it’s one the most popular social media networks. Millions of users are there.

People add Facebook share button to their websites to increase the social engagement. Along with the share button do you know how to add Facebook like button to WordPress website?

There are many benefits of adding the like button. People may procrastinate while sharing but they won’t do that while liking the blog post.

In this tutorial, you will learn how to add Facebook like button to WordPress website below every blog post. People use plugins but you can add it without using any.

Generate And Modify The Code To Add Facebook Like Button To WordPress Site?

You can add Twitter follow button, the LinkedIn share button to your website. And to add Facebook like button, you can get the code from Facebook. But it would be for your homepage or your Facebook page.

How would you show the like box for every single blog post of your website? Here is the solution for you. You just have to modify the code you get from the Facebook code generator.

The code would consist the IFrame which can be added to your theme files. Let me provide you the code for my official facebook page.

<iframe src=”https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggingluv&width=450&layout=standard&action=like&size=large&show_faces=false&share=false&height=35&appId” width=”450″ height=”35″ style=”border:none;overflow:hidden” scrolling=”no” frameborder=”0″ allowTransparency=”true”></iframe>

Let me show you the output.

But you can’t add such type of code of your page to like below every post. You have to modify this code.

Instead of using the URL of the Facebook page, a WordPress code is required which would pick up the URL of your blog post.

Just replace the page URL with the code shown below.

<?php echo urlencode( get_permalink( $post -> ID ) ); ?>

The final code you have to use consists the permalink code and the remaining code geneated before.

<iframe src=”https://www.facebook.com/plugins/like.php?href=<?php echo urlencode( get_permalink( $post -> ID ) ); ?>&width=450&layout=standard&action=like&size=large&show_faces=false&share=false&height=35&appId” width=”450″ height=”35″ style=”border:none;overflow:hidden” scrolling=”no” frameborder=”0″ allowTransparency=”true”></iframe>

Add the above shown code in the single.php file of your WordPress theme. The code should be added inside the loop which is showing the output of the post.

You want to add Facebook like button to WordPress site below each post, so just add this code below the post.

How to Customize Facebook Like Button Manually?

As you can see, there are many options in the code. You can change the values manually.

Width

Height

border

show_faces

style

You can choose the values for all the options. In the above code, the faces of the friends who have liked the page haven’t shown.

To show the faces, you can set show_faces=true.

And the value of the width and height can be given in pixels. If you’re aware of HTML then you can use the inline CSS to modify the button.

Copy And Paste The Code To Add Facebook Like Button To WordPress Site Below Every Single Post.

WordPress has many features and you can use its functions to modify the code. Here, the code generated by the Facebook plugin has been modified.

You can do that with many other codes. But here, only the need was to add the like button. So just picking up the URL of the blog post is enough.

Add Facebook like button to WordPress website and get more likes.

by Ravi Chahar

A blogger, web developer, and designer who intends to guide his readers about WordPress, Blogging, Web Development, Web Design and more. I have expertise in WordPress theme development and customization. I can set up and redesign the Thesis themes. I have been working in this field for years now.

8 comments

    1. Hey Usman,

      Facebook can help you to get more readers to your blog. Adding the like button would help you to increase the value of your posts. And it won’t require much time to click on a button.
      Thanks for stopping by.
      Have a nice day.
      ~Ravi

      1. Exactly Ravi !

        There are many other plugins available but they are alot of code, this simple tweak is easy to use can get alot of hits on the like button 🙂

        Thank you for the reply.

        1. Hey Nasir,

          For a WordPress user, plugins are there. But why would you use any plugin if you can do that without any?
          It’s always good to add the codes.
          Thanks for your comment.
          Enjoy the day.
          ~Ravi

  1. Hi Ravi,
    As someone who has struggled with this very thing in the past, I am so happy that you have posted such clear and easy to follow instructions.
    Currently, I don’t have a facebook like button on my website – but I might add one soon. And I will definitely be coming back here to figure out how to do it!

    1. Hey Neena,

      There are many people who are still struggling to get the Facebook like button below their each post. I am glad that you found it helpful. It’s always good to know that someone is happy to read.
      Thanks for taking the time to comment.
      Have a wonderful day.
      ~Ravi

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge