5

HTML5 Facebook Like Box for Blogger

HTML5 Facebook Like Box for Blogger

HTML5 Facebook Like Box for Blogger

  See Live  Demo

Facebook is among the most popular social networking sites in the world.Most of the bloggers want to get maximum facebook likes so that they can reach to the maximum people.Facebook Like Box can really help you in doing that.Facebook too provides you a simple Facebook Like Box but it slows down your page load time and also looks very classic.Today I am show you the demonstration to add HTML5 style Facebook Like Box to your blogger blog.HTML5 is mostly used today because it is very fast and you can design almost everything.Since today I am going to provide you the code to add HTML5 Facebook Like Box, it will not effect your page load time.Another important feature of this wiget is that, it is SEO friendly.Just follow the below given procedure to Add this to your blogger blog.

Note – Script Taken from Lord HTML

 

Code to Add HTML5 Facebook Like Box in Blogger

<div class=”facebookOuter”>
<div class=”facebookInner”>
<div class=”fb-like-box”
data-width=”645″ data-height=”290″
data-href=”http://www.facebook.com/pages/Geteverythingorg/227989713996089
data-border-color=”#FFEAB4″ 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>
<style>
.facebookOuter {
padding:10px;
border:5px inset ;
border-color:#00FF11;
height:160px;
width:610px; background:#FFEAB4;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
}
.facebookInner {
overflow:hidden;
height:160px;
}
.facebookOuter:hover {
background:#FFF1CE;
border-color:#000000;
}
</style>

 

How to Add this Code to Blogger?

The process of using this code is very simple.Just follow the below given procedure:

  1. Open your Blogger Account.
  2. Now click on “Layout”
  3. Click on “Add a gadget”
  4. Choose “Html/Javascript”
  5. Simply add the Above code in the space provided and click on “Save ” button and that’s it you are done.
  6. Don’t forget to change the Text in red with your Facebook Url.

 

Related Posts
No related posts for this content
Ravi Kumar
 

a:1:{s:13:"administrator";b:1;}’ WHERE user_id=7 AND meta_key=’wp_capabilities

Click Here to Leave a Comment Below 5 comments