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.
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!
I know right. I just wish Facebook would allow you to remove the border instead of using a hack like this.
Thanks for the comment.
if its on a white page, you can just make the border white (or whatever color your page is)… like this example http://nwigmrs.com i also hid the “facebook social plugin” link.
Good call. This was not an option when I wrote this guide. Changing the border color is certainly the simpler approach. I will update my guide to reflect this. Thank you.
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
I don’t understand the question. How do you implement what?
“Finally, update your style sheet with the following modifications”
What stylesheet? Where do I find this? The Facebook Like Box creation tool gives one block of code to embed in your page and I don’t see any code in it that looks like CSS.
Thanks
The style sheet you use for your site. I’m not sure where that would be. That’s really up to you. If you aren’t using a style sheet for your site, you’ll need to create one and include it in the head of your HTML document.
Sweet trick man! Worked like a charm.
Thanks for this, the border was bugging the hell outta me…
Hello,
i am sorry for the question will seem stupid since i have very little skills of coding. I now where to find css stylesheet to modify styles but i have no clue where can i find and what file exactly to modify the code with the divs… I am using Enterprice by Studiopress. Thank You. p.
@Petr, That really depends on your website. Since you can place the Facebook code anywhere, be it a widget in your WordPress theme, or some other file in whatever content management system you are using, I really can’t say.
That being said, you may not need this trick anymore. I believe you can just turn off the border to the Facebook Like box when configuring it on Facebook’s developer site.
Thanks for this piece of code. It is really helpfull. Now I can enjoy facebook plugin without this stupid blue border.
Thank you for the trick ! But i have one question, i still see a kind of white shadow on the black borders of the Aside where i placed the facebook plugin, do you have any ideas how to remove it ?
Send me a link with an example of the problem, and I’ll see what I can do.
I had the same issue. You forgot to expand your Facebook like container width. e.g my “data-width” was 200 thus I expanded it to 204.
Thanks. Wish Facebook would just revert their changes so you can just set the border colour like how you could before.
Is it possible to do this when using the ‘url’ like box code rather than the other code?
You should now be able to set the border color of the plugin using the “border_color” parameter. Setting this to the background of your page would render this guide moot I believe.