2 Re-Designed Facebook Likebox for Blogger/Wp

Posted on August 18, 2014 by 
2 Re-Designed Facebook Likebox for Blogger
Facebook likebox is a must have widget in all types of blogs. This likebox what provided by Facebook it's pretty much simple, but this likebox is customizable, so you can reshape it however you want to. Here is method I used make a widget box than putted the default likebox in there. These two custom likeboxes are made of HTML, CSS and CSS3. Let's see how them looks like and how to add and configure;

Shadow Style Facebook likebox


Preview-
Shadow Style Facebook likebox

 Demo- (Click Here)

Codes for copy-

<style>
    .ks-faceboo{
      width:96%;
      margin:10px 0px;
      border:1px solid #b9b6b6;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      box-shadow: 10px 10px 10px #e3e3e3;
      height:155px;
      width:280px;
      overflow:hidden;
    }
</style>
<div class='ks-faceboo'>
<!--crawlist.net widget starts-->
   <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/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="https://www.facebook.com/crawlistblog" data-width="280" data-height="280" data-small-header="true" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/crawlistblog"><a href="https://www.facebook.com/crawlistblog">Crawlist</a></blockquote></div></div>
<!--crawlist.net widget ends--></div>

Blue shadow + Hover effect style Facebook likebox


Preview-
2 Re-Designed Facebook Likebox for Blogger
Live Demo- (Click here)

Codes for copy-

<style>
.ks-lb {
    border: 1px solid #09F;
    border-radius:0px 0px 0px 0px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    background: #fff;
    width:280px;
    height:155px;
    margin:auto;overflow:hidden;}
.ks-lb:hover {
    border: 1px solid #06F;
    border-radius:10px 10px 10px 10px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    background: #fff;
    -moz-box-shadow:1px 1px 10px 1px rgba(1,1,400,1);
    -webkit-box-shadow:1px 1px 10px 1px rgba(1,1,400,1);
    box-shadow:1px 1px 10px 1px rgba(1,1,300,1);overflow:hidden;}
</style>
<!--crawlist.blogspot.com widget starts-->
<div class="ks-lb">
<!--crawlist.net widget starts-->
   <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/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="https://www.facebook.com/crawlistblog" data-width="280" data-height="280" data-small-header="true" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/crawlistblog"><a href="https://www.facebook.com/crawlistblog">Crawlist</a></blockquote></div></div><!--crawlist.net widget ends--></div>

How to add this widget in Blogger
  • First log in to your Blogger, select your Blog, 
  • Go to 'Layout' tab then click 'add a gadget'  
  • Select 'html/javascript' from pop up menu. 
  • Copy following codes and configure

How to add this widget in Wordpress
  • From dashboard hover mouse on 'appearance' tab, 
  • From 'appearance' menu select 'widgets', 
  • Then drag and drop 'Text' content box in widget area, 
  • Copy following codes and paste into 'text' box, 
  • For new dashboard click on 'Text' add it to sidebar and paste following codes and configure

How to configure
  • Collect your Facebook fanpage's direct address link, and paste in 'https://www.facebook.com/crawlistblog' 3 times.
So represent a unique art with your Facebook likebox. Don't forget to mention what you thinking about these by comment. Goodluck