HOW TO EASILY CUSTOMIZE HTML5 VERSION OF FACEBOOK LIKE BOX WITH CSS

n our previous post you learned how to add HTML5 version of Facebook like box to Blogger. Previously we could customize the like box with custom CSS stylesheet but now the HTML5 version do not use or allow any external CSS stylesheet for customizing the Like box. But we can still customize the HTML5 version to some extent by wrapping the official code inside another div tag.
Today in this tutorial we will learn how to remove the official border around the like box and add our custom border and change the background color of the like box. We will also learn to hide the Facebook social plugin logo at the bottom of the like box. You can change all the values as per your wish to match the theme of your blog. Before we get started with the tutorial, see the custom Facebook like box in action.

Live Demo On My Blog@Right

The HTML:

Paste the following code where you want the like box to appear.

<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>
<div class="ihcustomlb">
  <div class="fb-like-box"
      data-width="245" data-height="275"
      data-href="http://www.facebook.com/coollokjeeth"
      data-border-color="#F4F4F4" data-show-faces="true"
      data-stream="false" data-header="false">
  </div>      
</div>

You might have noticed an extra div tag; <div class="tbicustomlb">; have been added to wrap the official code. We will apply the CSS to this additional div tag to change the border, background color and for hiding the Facebook social plugin logo.

Replace http://www.facebook.com/coollokjeeth with your Facebook page URL
Alter data-width and data-height to change the width and height of the like box respectively

The CSS:

• Go To Blogger.com -> Template -> Edit HTML -> Proceed
• Search For ]]></b:skin> (Tip:- Use Ctrl + F to search)
• Just above ]]></b:skin> paste the following code and Save template.

.ihcustomlb {    margin: 10px auto;    background-color: #F4F4F4;    width: 251px;    padding: 10px 0 10px 10px;    height: 240px;    overflow: hidden;    -webkit-transition: all 0.5s ease-in-out;    -moz-transition: all 0.5s ease-in-out;    -ms-transition: all 0.5s ease-in-out;    -o-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;    border: 10px solid #FF9F00;}
.ihcustomlb:hover {    border: 10px solid #008000;    -webkit-transition: all 0.5s ease-in-out;    -moz-transition: all 0.5s ease-in-out;    -ms-transition: all 0.5s ease-in-out;    -o-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;}

We have used a pretty basic and simple CSS for customizing the like box. The main part in the CSS is the overflow property which is used to hide the Facebook social plugin logo. We have used the term 'hide' because we do not actually remove the logo; we just hide it with CSS. Apart from that we have once again used the CSS3 transition property for giving a smooth feel while hovering.

Change the following as per your blog's theme:

Alter the code highlighted in blue to change the background of the like box
Adjust the height and width attributes according to the size of your like box
Alter the code highlighted in orange to change the color of the border
Alter the code highlighted in green to change the color of the border when hovered