How to Add Facebook Like Box to Your WordPress Manually

Many bloggers have facebook page to inform facebook users about their blog update and to indicate how popular the blog. More people like the page, more popular the blog is. Now, facebook provide social plugin that called Like Box plugin, the plugin will facilitating bloggers to make visitor see how many people like their facebook page. In addition to, people can give their appreciation directly via the Like Box plugin added in the blog.

Facebook Like Box WordPress

Actually there are many Facebook Like Box WordPress plugin to make wordpress bloggers add this feature in their blog easily. But, sometimes we need to add facebook Facebook Like Box in some places that the template does not provide the place to add it via Dashboard like in index page, archives page, or the other pages.
By learning and practicing this tutorial you will able to add Facebook Like Box without using a WordPress Plugin.

See Live Demo

Now, let’s begin to create it by following steps below.

I. Creating Facebook Like Box Code

In this tutorial, we assume you already have Facebook Page before. If you have not had it, you can create first in here. But before that, you need to login with your facebook account.

Step 1.
To create Facebook Page code, first, you have to find your Facebook Page URL, in this case we use DynamicWP Facebook Page and the URL is http://www.facebook.com/pages/DynamicWP/267739437572

Step 2.
After you found it, now you are ready to create the code by visiting this page.

Step 3. Let’s begin to make your Facebook Like Box.
In this case we will add Facebook Like Box at the sidebar of our themes Upside Version 1.1. You can get this theme, here: Free WordPress Theme: UpSide.

How To Add Facebook Like Box WordPress

You can see at the picture above, at the left is options for Facebook Like Box setting and at the right is the preview.
The options are :

  • Facebook Page URL
    This option is for URL of your Facebook Like Box. In this case we fill it with https://www.facebook.com/pages/DynamicWP/267739437572.
  • Width
    It option is for the width size of the Facebook Like Box box. In this case we fill it with 267.
  • Height
    It is for the height size of the Facebook Like Box box. Like in the picture above, we fill this size with 367.
  • Color Scheme
    There are two options for color scheme. They are light and dark. You can choose one according to your theme color. In this case we choose the light one.
  • Show faces
    This option will show photos of people in the facebook who like your facebook page. If you prefer to show those, you can check it like in this case. But, if you do not, you not need to check it.
  • Border Color
    It is for the border color of the Facebook Like Box. If you do not fill it, the system will give default border color. You can fill it with hexadecimal character indicating of the color starting with character“#”. In this case, we fill it with #BDBDBD like the Free WordPress Theme: UpSide sidebar color.
  • Stream
    It option is to show profile stream set for viewed by public. Because we do not need to show it, we not check the checkbox. But, if you prefer to show those, you can check it.
  • Header
    It is for showing the header bar “Find us on Facebook” at the top of Facebook Like Box. You can show or not show that with check or not check the checkbox.

Step 4. Generating the code.
After you have finished setting the options and feel comfort with the Facebook Like Box preview, you can click the “Get Code” button to generate the code.

Then the code will be appeared after that, like on this image below.
How To Facebook Like Box WordPress

II. Adding Facebook Like Box at Your Theme

After you create the Facebook Like Box code, you can add it in the theme. To do that you need open the theme code.
In the picture above, you can see there are two kinds of code. The first code (code number 1) is the code including Javascriot SDK. You have to add it (by copy and paste) after

tag once. And the second code is for showing your Facebook Like Box according to the options you have set.

In this case, you will practice adding the code in the sidebar of the Free WordPress Theme: UpSide. So. Let’s do the following step.
Step 1.
Open file the header.php of Upside theme.

Step 2.
Copy the first code after

tag (after line 61).
How To Facebook Like Box WordPress

Step 3.
Open file the sidebar.php of Upside theme.

Step 4.
Copy the first code after

tag (after line 76). You also can add code needed to make your Facebook Like Box more appropriate with your theme. In this case we add code to show title like the other widgets at the sidebar:
<h2 class="sidehead">Facebook Like Box</h2>

Below is all of the code that has added
How To Facebook Like Box WordPress

Now, let’s see the result – DynamicWP Facebook Like Box have been added at the sidebar.
How To Facebook Like Box WordPress

III. Other Variation Places for Facebook Like Box in Upside Theme

We have practiced adding facebook Like Box at the sidebar of Upside theme. We also can add Facebook Like Box at the footer with change the last options with the following options:

  • Width : 312
  • Height : 290
  • Color Scheme : dark

How To Facebook Like Box WordPress

In this case, we will add Facebook Like Box at the footer – right side. So, add the second code created by clicking “Get Code” button in the footer.php file in line 17 combining with codes for showing custom title and CSS class to make the view is more appropriate. Before that, you need to remove the last code (line 17 and 18).

Let’s see the result – We have added Facebook Like Box at the footer – right side.
How To Facebook Like Box WordPress

You can also add Facebook Like Box to homepage, archives page, or anywhere according your need.

IV. Other Variations of Facebook Plugins

Beside Facebook Like Box you can use and add more Facebook social plugins provided in here.

How To Facebook Like Box WordPress

You can see there are 11 social plugins providing by Facebook that can be added into your blog and can make your blog more interesting. One of those plugins is Like Button plugin having similar functions with Like Box plugin but more simple.

You can also request to write how to add the other plugins for the next tutorial. Or if you need help in adding this Facebook plugin, you can ask by leaving question in the comment below. :)

See Live Demo

9 Comments to “How to Add Facebook Like Box to Your WordPress Manually”

Add Comments (+)

  1. Paul says:

    Nice tutorial. I’ve just made a WordPress widget for this it should be available on the plugin directory soon.

  2. Thanks for covering detailed info to customize facebook like box in this post.

  3. mr_alfan says:

    @Paul and @TextureTaddka, Thanks for the comment. We hope this tutorial useful for you :).

  4. Nice tutorial. I’ve just made a WordPress widget for this it should be available on the plugin directory soon. thanks for shearing!

  5. لپ تاپ says:

    Great work as usual Alfan. So simple to implement and useful.

  6. Thanks for this very easy and detailed post. It’s really nice of you to show so much detail for the different FB like boxes and the images. All users can get a feel of the Fb like box before they even go try the code on their websites.

  7. alfannotes says:

    Thanks @Paul and @tectureteddy

  8. alfannotes says:

    Thanks for the all : @لپ تاپ , .@SerradinhoServices,  @BestWebServices, texturetaddka  We hope this tutorial useful for you :).

  9. Hartomo says:

    This is what i want, thanks Alfan

Trackbacks/Pingbacks

  1. A trebuit - Bucur Blog

Leave a Reply

 

Amazingly Beautiful WordPress Themes