How To Hide Facebook’s Like Box Border (updated)

Adding a Facebook Like Box on a website is kind of becoming the norm in my trade nowadays. I do not know about you but I am normally having trouble getting rid of the borders or the iframe that you require. These borders normally have a bad look in a rounded corners styled module in Joomla! and other popular content management systems.

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.

[UPDATE]

I compiled below changes into an easily installable Joomla module. So, find below a download link to the module for Joomla 1.7/2.5

Download JA Facebook Like Box Module with Remove Border Tweaks

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”.

image

Now, here goes the code to modify the like box to hide its borders

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 --->
<iframe
src=”http://www.facebook.com/plugins/likebox.php?id=315708125131457&width=300&height=300&connections=10&stream=false&header=false”
scrolling="no" frameborder="0"
style="overflow:hidden; width:300px;height:300px; allowTransparency:true;"></iframe>
<!-- 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 300 pixels to 304 pixels. This will increase the size of the Like Box by two pixels in every direction.

<div class="facebook-like-box"><div class="inner">
<!-- Facebook Plugin Code --->
<iframe
src=”http://www.facebook.com/plugins/likebox.php?id=315708125131457&width=304&height=304&connections=10&stream=false&header=false”
scrolling="no" frameborder="0"
style="overflow:hidden; width:304px;height:304px; allowTransparency:true;"></iframe>
<!-- End Facebook Plugin Code –>
</div></div>

 

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 300 pixels. This will hide the Like Box border under the outer div.

.facebook-like-box {
width: 300px;
height: 300px;
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.

image

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

Update

I have taken my own advise and used this tutorial to create a Facebook Likebox module with the above tweaks in the module. It is a simple module fashioned off  Joomlart’s JA Facebook Likebox Module for Joomla 1.7 – and I suppose 2.5 too! So seeing as this is a simple hack, I will not rebrand and try to submit all the code as mine coz frankly speaking, all I did was tweak one or two things here and there.

So, find below a download link to the module for Joomla 1.7/2.5

Download JA Facebook Like Box Module with Remove Border Tweaks

Things to Note:

  1. Seeing as I simply edited the original code, this module will NOT co-exist with the original Joomlart JA Facebook Like Box module. You will be required to uninstall the Joomlart version and install this tweaked one.
  2. I will not tweak a version for Joomla 1.5 simply because that system is coming to end of life sooner than I can say OMG and Joomla 2.5 is an LTS (Long Time Support) release so, it is about time we all made the shift to the newer code base.
Share

1 comment

  1. Hi – Thanks for this, awesome! I’m a real newcommer to WordPress so sorry if this is a silly question.

    When you say

    “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 300 pixels. This will hide the Like Box border under the outer div.”

    Where do I find my ‘Style Sheet’?

Leave a Reply