Customizing Facebook Like Box Widget

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

The Like Box is a social plugin that enables Facebook Page owners to attract and gain Likes from their own website. Almost every blogger is using bunch of Facebook plugins on their blog, which is the easiest way to attract new fans to your Facebook page.

Don't you just hate that default Facebook like box design, which really sucks with that header and footer. Do you want to remove it? Yupp, Digital Inspiration (Oppa Labnol Style! ) has found an amazing way to customize your simple like boxes with some CSS touch.

So, I found two amazing customized Facebook like boxes from Digital Inspiration, which are really great. Below is an image of default Facebook like box, which is so common.

Default Facebook Like Box:

Now, as you can see in above image, which is an image of default Facebook like box, it really sucks. I guess, it's only for blue and plain sites. However, you can generate your page's like box widget at this link. You'll find millions of like boxes around the internet.

Custom Facebook Like Box Style #1:

Finally, we got rid of that ugly header and footer. Also, you can check a pic of mine in above widget, which is located at first block. Me and Eminem (Photoshop Rocks!!!). Anyways, copy the code below and paste it anywhere inside your blog or website:

<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/bwidgetz"
      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>

 Replace bwidgetz with your Facebook page's username.

Custom Facebook Like Box Style #2:

This one is even more better. As you can see in above image, this widget is customized very well with some beautiful CSS. Also, you can again see an image of mine with Eminem :p

Finally, it's time to share code of this beautiful like box. Copy the code below and paste it anywhere inside your blog or website:

<style>
.facebookOuter {
width: 280px;
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/bwidgetz"
      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>

Replace bwidgetz with your Facebook page's username.

More Customization:

The default background color of both Facebook Like boxes is #F4F4F4 but you can use any other web color. Also, if you want to have a more wider or taller Like box for your website, you can need to change the width and height values. All credits on this amazing work goes to Digital Inspiration.

Also, I used Purple Purse fonts on images for this article. Don't forget to leave your comments...

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.