How To Add Stylish Facebook Like Box To Blogger
Being the largest
social media in the world, Facebook lets you promote your sites in its platform.
People spend more and more time on facebook. So it is a big chance to market
your blog posts to them. Furthermore, a beautiful and stylish facebook like box
beautifies blogs and make your blog look more stylish.
Facebook Like Box widget helps your visitors like your facebook page without leaving the site. It increases your facebook fan page likes quickly and ensures more readership.
Facebook Like Box widget helps your visitors like your facebook page without leaving the site. It increases your facebook fan page likes quickly and ensures more readership.
Add Stylish Facebook Like Box Widget To Blogger Blogspot
This post gives you
step by step process to add cute and beautiful custom facebook like box gadget
in your sidebar of the Blogger blogspot blog. Just follow the steps -
1.
Go to Blogger dashboard.
2.
Click on Layout (left side).
3.
Press Add a Gadget (A window opens & you will see a list of
available gadgets)
4.
Select HTML/JavaScript Gadget.
5.
Write the following codes in the content section.
<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/proseoland"
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>
6.
Replace http://www.facebook.com/proseoland with your Facebook page
id.
7. Save
Done!
Share your thoughts
(ideas or problems) about this widget.
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteYou're absolutely right on social plugins, certain it can help improve site publicity in social medias, However, what about the loading speed of the website. I strongly believe the scripts in those plugins can affect the loading speed of the website. Does top plugins insure that flaw?
ReplyDeleteSocial skips