How to Add Facebook Like Button in WordPress without Plugin?

Users desire Facebook’s like system instead of a rating system for conveying their willingness to like or dislike a content. Adding a like button to your WordPress site is a symbol of convenience you offer your users to express their interest in liking your content. Like button works in a cyclic mechanism with a huge potential to drive traffic to your content. When a user likes your content, Facebook display it in the timeline of the user as well as in the News Feed of all the networks of the user. Interested users can again like the content or come to your site to look for more in detail.

Add Facebook Like Button in WordPress

Adding like button consists of the following four steps and you need to install a plugin for this purpose.

1. Accessing Like Button Configurator
2. Customizing Facebook Like Button
3. Getting the Code
4. Embedding in WordPress Site

We have explained each step in detail in the following sections.

1. Access Like Button Plugin

Facebook offers many Social Plugins for embedding comments, Page, share button, etc. Like button is one of the Social Plugins in Facebook developer’s site that you can use for free. You can also opt to include Share button along with Like button is required.

• Login to your Facebook account and then click here to access the Facebook developers page for creating social plugins.
• Scroll down the page and locate the configurator section to find a configurator form. Earlier the form was looking like in the below picture:

• However, Facebook changed the form and it will look like below in the recent version.

Both type of configurator forms offer similar set of customizing options that we will explain next.

2. Customizing Your Like Button

Fill the fields in the configurator form and the instant preview of your like button will be shown besides the form.

• URL to Like – Enter the URL of your site in the text box, you can also enter Facebook Page URL to get more likes. Later if you want to select XFBML format for getting your button code then the current page where the button is added will be defaulted in this field regardless of whatever the URL you enter here.
• Layout Style – You can select one out of four layout styles available from the drop down list.
  • Standard Layout – In this format the text is shown right to the like button and friends’ profile photos are shown below the button.
  • Button_count – This format shows the total number of likes right to the button.
  • Box_count – This format shows the total number of likes above the like button.
  • Button – This option displays only like and share buttons.
• Width – Adjust the width of your like button to suit your site’s layout.
• Action Type – You can choose to show like or recommend actions on the button.
• Button Size – Select the size of the button as small or large.
• Include Share Button – Select this checkbox to display share button along with like button.

Below options were only available in the previous configurator and removed in the latest version.

• Send Button (not available in latest configurator) – You have an option to add Send button along with like button only if you are going to use XFBML code later. Otherwise ensure you unchecked this option.
• Show Faces – Check this box to show the profile picture of the person who likes under the like button. Photos will be shown when more than two users click the like button.
• Font – Choose the Font to display the text on the button from the drop down list.
• Color Scheme – Two options for color scheme – dark and light – are available to choose.
• Verb to Display – Select the word Like or Recommend to be shown on the button from the drop down list.

3. Get Like Button Code

After filling all the details in the configurator form click on the “Get Code” button. You will see the embed code of your customized like button in a pop-up window. Earlier, there were four methods to get the code – HTML5, XFBML, IFRAME and URL option.

However, the laster like button social plugin only offers two methods – JavaScript SDK and IFrame. IFRAME method is a simple and common method supported by most of the hosting service providers.

4. Embed in Your Website

Click on the IFRAME option and copy the button code.

You can easily insert this code anywhere like footer, sidebar and content area on your WordPress site using Custom HTML block. For example, go to “Appearance > Widgets” section and insert a Custom HTML block in your sidebar as shown below.

Paste the button code inside the block and you can preview the widget to check the button looks as per your configuration. If everything looks fine, click on “Update” button to publish the changes and make your like button live. Similarly, you can insert the buttons in your content area using the same Custom HTML block. Below is how the live like and share buttons will look:

You can adjust the widget’s width in the configurator based on your site’s layout.

Note: Facebook also calls like button as a plugin while you have plugins in WordPress as well. Therefore, do not confuse with Facebook social plugins with WordPress plugins.