How to Add Facebook Like Box to Your WordPress Manually21st Mar 2012 | Posted by @lfannotes | 10 Comments
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.
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.
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.
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
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.
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.
It option is for the width size of the Facebook Like Box box. In this case we fill it with 267.
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.
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.
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.
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
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.
Open file the header.php of Upside theme.
Copy the first code after
Open file the sidebar.php of Upside theme.
Copy the first code after
<h2 class="sidehead">Facebook Like Box</h2>
Below is all of the code that has added
Now, let’s see the result – DynamicWP Facebook Like Box have been added at the sidebar.
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
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.
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.
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.