facebook like box external css

Question

I need to customize the layout for the Like box, the problem i am getting is i coud not find any way to do it in following iframe,

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%platform&width=700&connections=5&stream=false&header=false&height=180&css=http%3A%2F%2Flocalhost%2Fq.css" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:700px; height:180px;" allowTransparency="true"></iframe>

The earlier facebook like box had option to load external css, i tried it but it is not getting uploaded with th above iframe options.

WHere can i find the solution

Please help me setting external css to this.

Thanks, Rohit

Solution 1

I tried linking a Likebox to a local css file and was unsuccessful. In researching this question somewhere on the Facebook fora I read an admin's post saying Facebook wants to maintain consistent formatting across Like boxes so only a few properties can be adjusted, and those are the standard ones you get in the initial Like box code. Facebook's documentation leaves a lot to be desired.

Jim

Solution 2

You can still use the css option but you have to use a different iframe URL:

http://www.connect.facebook.com/widgets/fan.php?href=FACEBOOKPAGEURL&width=185&colorscheme=light&show_faces=true&border_color&stream=false&header=true&height=280&css=CSSFILE

Edit 14-3-2013

This workaround no longer works.

Comments

[Ciantic]

Note: All attributes are same, so the poster is right, substitute http://www.facebook.com/plugins/likebox.php with http://www.connect.facebook.com/widgets/fan.php and it just works.

[Cheeso]

yes, that uses the old fanbox. The CSSFILE thing that you specify should be a publicly accessible URL. Facebook then injects into the html source for the iframe, a <link> to that css stylesheet. In my experience, it is not a direct link, but it is a link to http://...fbcdn.net/fbml_static_get.php?... which is a PHP app that retrieves your publicly-accessible CSS, then massages it and caches it. But FB said that all FBML endpoints would die on June 1 2012. developers.facebook.com/roadmap . Therefore, probably this approach will work for only a few more months.

[Cheeso]

It's easy to work around the cache. You need to specify a different CSS URL each time the page loads. One way to do it is to echo the CSS from a PHP program. For the CSS URL you give to facebook, pass the URL to the PHP program, with a dummy query parameter and a randomly generated value associated to it. http:.//example.com/generateCss.php?_=309339. Because this is a unique URL each time, FB will not cache the CSS. But this approach may stop working anyway, because it depends on a FBML program on the FB side, and FBML is being turned off on June 1 2012.