As all know Facebook Page is easiest way to get traffic on our blog. Facebook Provide Facebook Like box for blogger. but it have very simple look. Sometime it very awkward to have simple like box along with Stylish cool blog.
So in this I am going to Provide cool Facebook Like box for blogger and WordPress. This Facebook Fan/Like Box is used by Very popular Blogs, such as Labnol.org . So just follow the below steps :
STEPS
1. Access to the Blogger
2. Then Move to the Blogger | Dashboard
3. Go To Layout And Click on "Add a Gadget"
4. Now, Add HTML/Javascript
5. Copy and Paste below Code into it.
<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/tricbuzz"
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>
5. Save it.
CUSTOMIZATION
1. Replace tricbuzz with your facebook Page Username.
0 comments: