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.
Quite interesting stuff Sanjay, will give a try 🙂
Thanks for providing the code, keep sharing it!
Thank you for being here. M happy you like my work. keep visiting for more useful stuffs.
This is really something! Nice idea! Thanks a lot sharing these easy steps for creating one and I will install it in mine blogs too one of these days. 🙂
Thank you Narda be in touch for more updates from a1bloggerseo
Yet another great widget for bloggers, nice share. Keep sharing the good stuffs.
thanks bro for being here and liking my Work
I’m using your like box right now! Thanks for the code and post.
M happy Sri Ram brooo for liking my work.!
Hey Sanjay,
looks too good man. Would you please mind sharing exact difference between this and the original one provided by Facebook?
Hi Sanjay,
This is the second tutorial that i am going to follow for my website. Thanks for sharing again 🙂
Hey Sanjay!
You said it Blogger/WordPress, where’s the procedure for WordPress? Or the code or the widget? I did not find any way!
Pawan this one is different and unique fb like box. as you can see this widget in my blog.
Thanks brooo for being here and liking my work. stay connected with me for more useful updates.
Hello suresh i have given a link in the bottom side of this post. you need to follow that link. or simply go here at https://sanjaychoubey.com/2013/06/how-to-add-thirt-party-widget-in.html