PHPMatters Help You Better Hosting Your PHP-based Sites
How to Add Facebook Like Button to Your Blog or Website to Promote Your Posts

How to Add Facebook Like Button to Your Blog or Website to Promote Your Posts

As the social media have become more and more important in people’s daily life, now almost all the webmasters choose to use these networking platforms to promote their personal blogs or websites. In addition to expanding the social networking followers, the utilization of some special buttons can also play a vital role in strengthening the link between your website and the social media.

Previously, we have told you how to add Twitter Tweet Button and Twitter Follow Button that are two of the most useful buttons offered by Twitter. In this post, it’s time for Facebook Like Button.

Why Facebook Like Button

Facebook Like ButtonAlmost all the social networking websites have a special function that allows users to display how popular their posts are. Facebook achieves this by offering the like button.

  • For Facebook users – This button can help people show their like on what you have published through a single click, and share your meaningful contents with their own Facebook groups with ease.
  • For website owners – People can hardly know whether your content is worth-reading or not. With this button, however, they can figure out how popular your words are by checking the “like” count. The more people like you, the better your post is.

How to Add Facebook Like Button

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 Code


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

Some Alternatives

This is the official method of adding a Facebook like button into your website. In fact, you can also make use of some related plugins or modules to achieve this goal. For instance, Facebook is a great option for WordPress site, JFB Connect is good for Joomla site, and Drupal for Facebook is perfect for Drupal site.