kosmar

Some time ago Facebook changed the way to embed their popular Like Box for Facebook Pages. Until then you could link to a specific css-file to change the look of your box. This seemingly is no more. The deprecated code might still be supported for now, but I consider it a bad idea to build on stuff that will explode sooner or later.

Discussing a website layout with a client, the question came up, in which way the look of such a box could be manipulated. I had to google more than usually to find a hint, quite a layout-hack actually.

The bad news: It seems one cannot do much about the looks, speaking of colors, fonts and all inner elements of the iframe – no wonder considering it being an iframe, right? You possibly can or cannot do more to the XFBML-version of the code, but i didn’t really look into that one. So this is just for the iframe thing.

The good part: You can hack the appearance of background and border. Better said, you can obscure the border of the Like Box and render your own border over it. Changing the background is no big thing, as the allowTransparency-attribute of the iframe is set to be true by default.

The trick is done by a wrapping div, negative margins and some adjustment to the width and height of things.

Finally, here is an example document where you can see it in work and check out the code modification. I used inline CSS for illustration purposes, of course i recommend to use external CSS-files for several reasons, you hopefully know yourself.

And, yes, did just created a Facebook Page for this blog to use it in the example. Well …

As always, handle code with care. Hints and critisism welcome.