October 2, 2015

How to add Facebook Like Box to Your Website

How to add Facebook Like Box to your site
How to set up a business facebook page  and add it to blogger widget sidebar? You can go facebook official login page and create one facebook page before you start with this tutorial.

Most the people like using facebook for their business marketing tool, personal and for entertainment and especially for social network around the would. So if you have a business facebook page or facebook page and you need to place it your blogger or your WordPress website.
 has the idea to show you how to do it with some guidance as below.

How to add Facebook Like Box to Your Website ? 

Step 1: Login your blog then go to "Layout"

Blogger Layout

Step 2: Login your Facebook Profile Account

Step 3: Type the Facebook developer using URL: https://developers.facebook.com

Step 4: Click on menu "Docs" after that click "Social Plugins" which located at the left-hand side.

Facebook Plugin 

Step 5: Click on "Page Plugin" 

Facebook Plugin Like Box 

Step 6: You will get the form that allows you to customize your facebook like box such as what size you need, show your fan face and some option. Just place your Facebook URL in the URL form then it will appear your page.
Facebook URL

 Step 7: After that you need to click on the "Get Code" bottom

Generate Facebook Like Box Code

Step 8: Then you will get two different code 
    a) Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.
    b) Place the second code for your plugin wherever you want the plugin to appear on your blog or website widget sidebar. 

Blogger: If you using the Blogger you could place the second code to your blog widget sidebar >> Layout that I ready login and the click on Add a Budget then add one HTML/JavaScrib then place the code inside them click save. 
Blogger HTML JavaScribe

Wordpress: You also can use this Facebook plugin code that just follow the guidance Number 8. Login your Wordpress site then click on "Appearance" >> Then click "Widget" and Add one TextBox and Place the code inside it. Then press save. That's it.....

Importance: If you do not want to us above instruction, I have the another way and easier that copy and paste to your side.  

The below code is allow you to copy and paste it to your widget sidebar, that is okay. But you also need to change the Facebook ID to yours. 

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/theblogsupporter?fref=ts" data-width="300" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>

Change the facebook page ID to your personal facebook page ID "theblogsupporter".

The width size "300" require changing if you need to fit your blog sidebar space.

Was this article helpful?

Thanks! Your feedback helps us to improve blogsupporter.com
Keo Sopherth Professional Blogger

Offer a blogger blog, WordPress website development tutorials, and simple search engine optimisation tip with love.

- Advertisement -
Advertise Here (330 x 280)
- Advertisement -
Advertise Here (330 x 280)


Your comment will be removed if it is a Spam or a comment with a link.