How To Hide Facebook’s Like Box Border

This tutorial will show you how 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”.

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/pages/mypage/18267678998894" 
        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/pages/zoltonorg/182677118445608" 
    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 ought to end up with something that looks like this.

If you have any questions about this tutorial, please feel free to leave a comment.

About Mark Zolton

Mark Zolton is a professional programmer working in higher education. He can be contacted via all the usual methods.
This entry was posted in Programming and tagged , . Bookmark the permalink.

Add a Facebook Comment

6 Responses to How To Hide Facebook’s Like Box Border

  1. Adam Thomson says:

    Nice little tutorial. I found it really easy to understand and execute. As soon as I read it I face-palmed for not thinking of that solution myself. I then went that little bit further and took down the div height another 20px or so to get rid of the ‘facebook social plugin’ footer. Thanks!

  2. Ann says:

    Glad to see the code. FB columns are currently ridiculous. How do I implement it? IE – Where do I edit to make the changes? I am using IE9.

    Thanks!

    Ann

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>