How to Add Facebook Like Button to WordPress

How to Add Facebook Like Button to WordPress

As a feature of social network services from Facebook, the like button is an efficient way for the promotion of WordPress websites by encouraging people to click the button showing their favor for the content of the sites such as photos, comments, status update, and so forth. If you still haven’t got a clear idea of how to promote websites at Facebook, this post includes some helpful tips including the utilization of the like button.

In below, we are to lay emphasis on the point about how to add Facebook like button to WordPress websites by keeping the following tutorial simple and concise with the help of which you are capable of complete the process within few minutes.

What Benefits Can Facebook Like Button Bring?

As the second largest most visited websites around the world, Facebook serves for people to own news feed with which they are capable of seeing updates of their friends, people their friends add, the links their friends favor, and so on.

So, how exactly the like button works? Specifically, if you are named as Lucy with 500 friends and click the like button of one post, synchronously, it is shown to all of your friends through showing text like what has been shown in below.

Your Friend Lucy likes HowsHosting.com’s link: How to Add Facebook Like Button to WordPress.

Undoubtedly, we cannot emphasize the significance too much of like button which plays a key role in publicizing and promoting your websites by getting them visible in social networking. In the following, we clearly and concisely describe the procedures of completing the adding of this powerful button.

Step 1: Login to Your WordPress Account.

To begin with, navigate to your WordPress website after which login to your admin account entering the username and password.

Step 2: Click the “Plugins” Option.

There is a section of “Plugins” which can be sought in the left menu locating in your dashboard. Just hover your mouse on it after which you can see a list including “Installed Plugins”, “Add New”, and “Editor”. Now, click “Add New”. Then there appears a search box for “Search Plugins”. Afterwards, fill in “Facebook like button plugin” and hit enter.

Step 3: Install Facebook Like Button Plugins.

After the above step completed, there pops a list beneath where you can find “Facebook like button”. Then, click “Install Now” to install the version 2.15 through choosing “OK” in the dialogue box after which the install will run. Finally, click “Activate Plugin” in the next page which redirects you to the plugin pages in your WordPress websites.

Step 4: Complete the Settings of Installation.

settingsClick the “Settings”. Afterwards, you are bound to see a webpage requiring you to fill in your Facebook ID in “Facebook Button Options”. Now, you may ask how to seek this ID. Actually, it is quite simple. Firstly, just open a new tab and navigate to www.facebook.com. Then, type email or phone, and password to login the account. Right there at any blank area of the page, just right click the mouse, then click the “View Page Source”.

After the above procedure done, a webpage is destined to open where you can find a long number besides the text “user”. Then, copy this number and paste it to “Facebook Button Options” box. Afterwards, set the “Display Button” to “Like”. The final step is to click the “Save Changes” button.

Step 5: Have a Check and Make Sure The Adding Is Done.

Eventually, navigate to your WordPress website again after which click on any post. When the webpage appears, you are shown a like button below the post like the following picture. This means you have already successfully added Facebook like button to your WordPress websites.

Add Facebook Like Button Manually

Facebook never make this a hard job. You firstly need to log into this Facebook developer page for the like button using your Facebook account. Then, you can see a configuration chart as the image showed in the following.

like button code

From this chart, you need to enter your domain name into the first blank space with the “http://’ integrated. Then, you can decide the width and layout of the button, and choose whether to display users’ faces and the share button or not.

In fact, Facebook has updated recently. In the old version, you can also configure the font and color scheme directly from this page. At present, however, you need to configure these from the button code using some particular attributes.

Now, you can check how the like button looks like in your website from the preview area. Then, simply click the Get Code button. Note that you’d better choose the HTML or JavaScript version as you can make some modifications about the appearance easily.

Button HTML Code

How to Modify the Button Code

The default coding stuff is composed of some small settings including the data action, data link, data layout, and data width. Among the four components, the first two are pre-determined that cannot be changed, but the rest two can be modified based on your needs. Even, you can add more attributes to change the button appearance better.

Color Scheme

Color Scheme Code

Layout

Layout Code

Width

Width Code

Here, we have to mention that the minimum width of different layout is not the same. According to Facebook documentation, the minimum width of the above mentioned layouts is 225 pixels, 55 pixels, 90 pixels, and 47 pixels. In addition, the default height of them is 35 pixels, 65 pixels, 20 pixels, and 20 pixels respectively.

Share Button

Share Button Code

Users’ Profiles

Users’ Profiles Code

Now, you can copy and paste the final code to any webpage you want the button to appear. If you want to see all of your posts have this like button attached, then you need to create a new widget and put it into your sidebar.

Here, we simply take WordPress – the most widely used CMS on the web – as an example. After logging into the dashboard, simply go to the Widget section from the Appearance tab. Then, drag a text widget and drop it into the sidebar area. The modified button code can be pasted into the blank space of this new widget. Don’t forget to click the Save button.

text widget

Facebook Alternative Buttons

At present, there are multiple Facebook buttons that are ready to be used by you. All of them can indicate your participation to Facebook obviously and allows people you follow your account, share your posts, and show their favorites on your words directly from your webpages.

The process of adding them to your website is just the same as you have done to the Facebook Like button.

  • Share Button – This button can increase the exposure of your sites or posts in front of Facebook users, for it can make the sharing thing an easy task. People can share your posts to their own followers only by clicking this button. Besides, they can even send their personalized messages with the sharing.
  • Send Button – This is another useful button used to share your content. If people like your words and want to share with their friends via Facebook message or email, this is a great option.
  • Follow Button – This button allows people to follow your Facebook account directly from your webpage, without the need to login the Facebook website to find you.