Most of us are using Facebook Like box to increase the count of Likes. The default like box can be customized to different style using CSS. The complete tutorial on how to add, customize and stylify your Facebook Like box / Fan box to your Blogger blog.

Facebook like box is very common in most of the blogs. Most of the bloggers use this like box, sometime called as Fan box, to increase the subscriber count. Facebook provides a very good customization tool to make our own box, but the problem with this tool is we can’t customize the style of the box. Most of want a box which has same style of our Blog template, right?.
The default style of Facebook like can be changed by adding some CSS to your template. I prepared a demo of 4 types of customizations. You can view these by visiting this link. Demo
We are beginning this tutorial with default Facebook like box.

The default Facebook like box

default facebook like box
The default Facebook like box

Visit Facebook customization page, they are providing 4 different methods to add Like box. Out of these, I am following the first one, HTML5 compatible. In this method, we have to add Javascript SDK to our blog template.

Steps

    1. Where do you want to add the Like box. If you are adding it in sidebar or footer, go to the Layout > click on Add Widget. Add the HTML/Javascript box, add the following code to it and save it.
<div class="fb-like-box" data-href="http://www.facebook.com/blogger.how" 
data-width="292" data-show-faces="true" data-stream="false" data-header="true"></div>

Possible customizations are: change width by changing 292 (minimum is 292), turn off faces by changing true (blue color) in to false, show posts from pages by changing false (red color) to true and Remove the “Find us on Facebook” header by changing true (yellow color) in to false. Don’t forget to change the Facebook page address (violet color).

  • Go to Template, Use the Ctrl+F to find the <body> tag and add following code just before it.

 

<div id="fb-root"></div>
<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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

 

  • Save the template and preview changes. You are done

 

Adding the customized version

I have prepared some customized versions to teach you how to do it. The steps for adding each version is almost same. Follow the steps

    1. Use Ctrl+F to find ]]><b:/skin> and add the CSS just before it. Choose any of the below style and add the corresponding style here
    2. Same step as above. If you are adding it in sidebar or footer, go to the Layout > click on Add Widget. Add the HTML/Javascript box, add the following code to it and save it. Don’t forget to change the Facebook page address (violet color).
<div class="BloggerHowFB">
 <div class="FBWrap">
  <div class="fb-like-box" 
      data-width="245" data-height="290" 
      data-href="http://www.facebook.com/blogger.how" 
      data-border-color="#F4F4F4" data-show-faces="true" 
      data-stream="false" data-header="false">
  </div>          
 </div>
</div>
    1. Go to Template, Use the Ctrl+F to find the <body> tag and add following code just before it.
<div id="fb-root"></div>
<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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
  1. Save the template. Now choose the CSS from the below list or make your own..

Different Customizations

Please see the demo to view different customizations.. Demo

Customization 1

facebook like box 1
Another color combination

Add following CSS (step 1) as I told in “Adding the Customized version”. Corresponding CSS is

 .BloggerHowFB {
    background-color:#F4F4F4; 
    width:250px; 
    padding:10px 0 10px 10px;
    height:250px;
    border:1px solid #CCCCCC;
    border-radius:10px;
  }
 .FBWrap {
    height:250px;
    overflow:hidden;
  }

Customization 2: One row of subscriber images

facebook like box 2
1 row of subscriber images

Corresponding CSS is

.BloggerHowFB {
    background-color:#F4F4F4; 
    width:250px; 
    padding:10px 0 10px 10px;
    height:140px;
    border:1px solid #CCCCCC;
    border-radius:10px;
  }
 .FBWrap{
    height:140px;
    overflow:hidden;
  }

Customization 3: Another color combination

facebook like box customization 3
Blue color combination

Corresponding CSS is

 .BloggerHowFB {
    background-color:#D6E0FF; 
    width:250px; 
    padding:10px 0 10px 10px;
    height:250px;
    border:1px solid #6666FF;
    border-radius:10px;
  }
 .FBWrap {
    height:250px;
    overflow:hidden;
  }

Customization 4: Adding shadow to the box

Facebook like box customization 4
Add shadow to the Facebook like box

Corresponding CSS is

.BloggerHowFB4 {
    background-color:#D6E0FF; 
    width:250px; 
    padding:10px 0 10px 10px;
    height:250px;
    border:1px solid #6666FF;
    border-radius:10px;
box-shadow: 4px 4px 0px rgba(0, 0, 255, 0.45);  
}
 .FBWrap4 {
    height:250px;
    overflow:hidden;
  }

By comparing above codes, you can style your own. If you have any problem, let me know in comments..


Get free updates in your mailbox..

Share this article