How to Remove the Facebook Likebox Border

Facebook provides a nifty little likebox widget that can be customized to display your facebook pages current fans (or likers), but the widget comes with an ugly blue border that cannot be overridden with css because it is in a facebook iframe.

The Solution: Wrap the likebox in an extra div (with a border color set to your pages background color, and position the wrapper to overlap the likebox). Code below.

The HTML

{code type=html}

{/code}

The CSS

{code type=cssl}
#likebox-frame{
border:2px solid #F0F9F4;
width:894px;
z-index:10;
height: 156px;
overflow: hidden;
position:relative;
top:-1px;
left:-2px;
}

#likebox-frame iframe{
left:-5px;
overflow:hidden;
position:relative;
top:-1px;
}
{/code}

40 thoughts on “How to Remove the Facebook Likebox Border

  1. thank you so much adam, you did a great job, I’m the lover of css codes, I just reached here by google search I got problem. Your code help me to done my pixel perfect project, thanks again.

    P.S: however I did a lots of tries to style entire element of iFrame but I didn’t get success, is there any possibilities that designers can style iFrame as they want or there is no freedom😦

    -Usman

    Like

  2. I had to make the following changes to get it to work
    #likebox-frame iframe{
    top:-10px;
    }
    and
    #likebox-frame{
    border:2px solid #fff;
    width: (facebook widget width – 14)
    height: (facebook widget height – 10)
    }

    Like

  3. Apparently FB changed the markup of the like-box. If you have trouble removing the border in IE (or it suddenly is visible again without you changing anything) try applying the overflow:hidden to the div with class “fb_iframe_widget” like that:

    .fb_iframe_widget {
    overflow: hidden !important;
    }

    Like

  4. Why not set border:none on #likebox-frame ? That works for me, I had a gradient background and setting the border to a color was not a solution for me.

    Like

  5. Thanks for your help! The right side and bottom were still showing so I just reduced the height and width size by 10px or so, problem solved!

    Like

  6. Wow,

    Had been looking to remove the border for long time and today I got it right. BTW, how to change the color if I don’t want to remove it entirely? TIA

    Like

  7. You can even directly use the facebook Likebox generator’s option of border color
    Set the border color #FFF, if your background is white !
    in case if image as background, problem may occur.

    Like

  8. I can’t make any of that work.:/

    I don’t think I know how to wrap. I can make about anything else I’ve attempted, happen though!

    Can I email somebody my file and email it back?😉

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s