All we need to place a beautiful facebook like box in our blog so that one can easily like the page and get connected with your blog posts. Recently i have posted an article regarding how to add facebook official like box in Blogger. Although this widget is widely used and also its an official like box so many of bloggers recommend it. But some times it does not suit with the template and we need a good looking widget which can enhance the overall Blog beauty.
 |
| stylish facebook likebox for Blogger |
Why to choose this widget ?
- Simple coding with better Look.
- Flexible in size, means one can easily customize the size by increasing or decreasing length and width.
- Easy installation process
How to Install :
- Go to Blogger Dashboard
- Click on Layout
- Click on Add a Gadget
- Select Html/Javascript
- Place the following code and then after click on save
<style>
.facebookOuter {
width: 270px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.facebookOuter, .facebookOuter:before, .facebookOuter:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.facebookOuter:before, .facebookOuter:after {
content: “”;
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.facebookOuter:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
.facebookInner {
height:155px;
overflow:hidden;
}
</style>
.facebookOuter {
width: 270px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.facebookOuter, .facebookOuter:before, .facebookOuter:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.facebookOuter:before, .facebookOuter:after {
content: “”;
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.facebookOuter:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
.facebookInner {
height:155px;
overflow:hidden;
}
</style>
<div class=”facebookOuter” style=”float:left;”>
<div class=”facebookInner”>
<div class=”fb-like-box”
data-width=”300″ data-height=”179″
data-href=”http://www.facebook.com/a1bloggerseo”
data-border-color=”#F4F4F4″ data-show-faces=”true”
data-stream=”false” data-header=”false”>
</div>
</div>
</div>
<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>
- Change http://www.facebook.com/a1bloggerseo with your facebook page url.
- You are done . Feel free to drop a comment if you like this widget or you having any issue.
Know How to install this Facebook widget in wordpress.
