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
 |
| 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
- 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
- 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
- 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>
- 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. 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
 |
| 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
 |
| 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
 |
| 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
 |
| 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..
If you enjoyed this post, share this with your friends..
Get updates straight in your inbox for free
|
|
Use this site Free Likes to promote every pages of your website on Facebook Google, Twitter and LinkedIn.
ReplyDeleteVery nice article on blogging. I am new to blogger and want to learn more from your articles. Thank you very much!
ReplyDeleteHi, I am new here and this was really interesting !
ReplyDeleteDo you know if it's possible to remove the number of members from a like box, so you only have the faces?
Thanks !
Mu
Facebook Like Box won`t show timeline streams for ONE SPECIFIC PAGE. All the other pages I tried work perfect. Privacy and all the other settings of the page are identical with the settings of my own page (that WORKS). It finds the page, but it doesn t stream the feeds!!! ONLY FROM THIS PAGE!!!
ReplyDeletethanx in advance !!!
ReplyDelete