How To Add Facebook Like Button To WordPress Website?

October 19th, 2016 | by Ravi Chahar || 8 Comments |

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.

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.

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

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.