Quantcast How to easily remove the border of your Facebook Page Like Box ← BLOG404

How to easily remove the border of your Facebook Page Like Box 9

I find it fascinating how important Facebook has become in todays society . The Facebook like button is an important innovation that it deserves to be. More and more people are turning towards facebook and creating pages to share their business and build a closer relationship with Facebook users . The idea behind ‘like’ marketing is simple. The more the likes, the better you are doing . Facebook also provides a nifty little likebox widget that can be customized to display your facebook page current fans on any webpage, but the widget comes with an ugly black/blue border that cannot be overridden with css because it is in a Facebook iframe.

The fix :

This tutorial will show you a trick to hide the border around the Facebook Like Box. It takes advantage of negative margins and the overflow property of CSS to hide the border of the Facebook Like Box under a container div.

This is what the Facebook Like Box looks if you apply the plugin code directly to your site without any modification. Note that I set “header” to false so it does not display the text “Find us on Facebook”.

Facebook Like Box with Border

First, wrap the plugin code in two divs. Here I called the outer div “facebook-like-box” and the inner div “inner”.

<div class=”facebook-like-box”>
<div class=”inner”>
<!– Facebook Plugin Code —>
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>
<fb:like-box href=”http://www.facebook.com/blog404″
width=”250″ height=”250″
colorscheme=”light” show_faces=”true”
stream=”false” header=”false”></fb:like-box>
<!– End Facebook Plugin Code –>
</div>
</div>
Next, increase the height and width of the Facebook Like Box by four pixels. In this example, I have increased the height and width from 250 pixels to 254 pixels. This will increase the size of the Like Box by two pixels in every direction.

 

<fb:like-box href=”http://www.facebook.com/blog404
width=”254″ height=”254″
colorscheme=”light” show_faces=”true”
stream=”false” header=”false”>
Finally, update your style sheet with the following modifications. Set the width and the height of the outer div to the original width and height, not the increased width and height from the step above. In this example, the original plugin code specified a width and height of 250 pixels. This will hide the Like Box border under the outer div.

 
.facebook-like-box
{
width: 250px;
height: 250px;
overflow: hidden;
position: relative; /* For IE7 Compatibility */
}

.facebook-like-box .inner
{
margin: -2px 0 0 -2px;
}

 
Once the aforementioned modifications are applied, you should end up with something that looks like this.

Border Removed after Coding

You can adjust the width and height according the space where you want to place the box.  There could be other approaches too.

9 thoughts on “How to easily remove the border of your Facebook Page Like Box

  1. Reply Becca Jan 30,2012 3:49 pm

    I feel excited when I read your title post cos I know how to create facebook fan page like box. My problem is
    I don’t know how to customized it and make a little changes. Glad found your site..thnak much!!

  2. Reply Rajib Kumar @ Money on Youtube Feb 7,2012 10:28 am

    Nice tutorial on superb topic. Few days ago I tried to remove facebook fan page like box border. But, I failed. Now, I can do this. Thanks for share.

  3. Reply Raj Mehta Feb 7,2012 11:14 am

    Nice tutorial for facebook users who wants to customize their facebook like box

  4. Reply Ramazan Feb 9,2012 4:08 pm

    Facebook also provides a nifty little likebox widget that can be customized to display your facebook page current fans on any webpage, but the widget comes with an ugly black/blue border that cannot be overridden with css because it is in a Facebook iframe.

  5. Reply Auren @ Tips and Tricks Blogger Feb 13,2012 10:10 am

    Nice tips. what I do is I copy background color code and apply it as facebook border so when the like box embed on your sidebar you will not see any border 🙂 he he check out my blog.

  6. Reply Lisa Donaho Feb 21,2012 8:11 pm

    It is very important tips for me. Because i am trying to learn facebook page design. Now i am going to use your tips. Thanks

  7. Reply carolina Feb 24,2012 2:49 am

    Wow I had no idea you could do that… good to know! I’m definitely going to have to try that out. Thanks for sharing!

  8. Reply Nickty Feb 25,2012 11:09 am

    very effective information. I’m going to do it on my facebook page.

    Regard
    Nickty

  9. Reply Abe@Baltimore Marketing Mar 24,2012 8:34 am

    Great tip, we will have to try this on our next project. Thanks again!

Leave a Reply