Customize Facebook Like Box With Css Part1

 

Facebook is the best social network to monetize our website traffic and also Facebook plugin are very useful to increase fans at our Facebook page.Facebook like is the plugin to show how many fans are subscribed at our Facebook page with their Facebook accounts.When ever we publish the posts the subscribers can see the link on their Facebook wall.Maximum 90% of all websites use Facebook like box on their website with default colors and model given by Facebook app developers.But bloggers made the customization of this Facebook like box with Css which matches colors to your templates by using java script.

Customize Facebook like Box with css Part1

1.Login to blogger.

2.Layout (or) Page elements >>Add a Gadget >> Html/Java Script.

 

 

 

3.Add below code in the Html/Java Script box

<style type="text/css">

.facebookOuter {

background-color:#F4F4F4;

width:250px;

padding:10px 0 10px 10px;

height:250px;

border:1px solid #CCCCCC;

}

.facebookInner {

height:250px;

overflow:hidden;

}

</style>

<div class="facebookOuter">

<div class="facebookInner">

<div class="fb-like-box"

data-width="245" data-height="290"

data-href=”http://www.facebook.com/bloggertricksand tips”

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.Customize all above highlighted colored text.

6.Save and done successfully.