This evening I had a particular little bug come up with the normally simple task of creating and embedding a “Facebook Like Box” and thought I’d jot down a few words on it.

I was using Facebook’s options to customize a “Like Box” for a Facebook Page that I was then going to embed into a new website. All was well, I’d change the options and the preview would change accordingly.

Facebook "Like Box" optionsHowever, when I copied the code FB was giving me, some of the options I had chosen were stripped. Like, I didn’t want the Stream or the Header but it would display after I pasted the code.

Now being a tad bit lazy…. I thought “Maybe I should just do it again with Facebook’s custom form”…. and I tried 3 times (Yeah, I was being lazy). I then decided I should just look in the embed code and manually change some options.

So the FB code came out to:
<iframe src=”;width=292&amp;colorscheme=light&amp;connections=10&amp;stream=true&amp;header=true&amp;height=587″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:292px; height:587px;” allowTransparency=”true”></iframe>

I just had to adjust the height of the box, so obviously in the code, I adjusted the height in both places to the pixels width dimension that seemed appropriate to the layout. I wanted the dark color, so I change the “colorscheme=light” to “colorscheme=dark“.

I wanted a border, and since it was a dark background on the site, I changed “border:none;” to “border:1px solid #FFFFFF;” to give it a thin white border.

Changed “header=true” to “header=false” to remove the box header, changed “stream=true” to “stream=false” to remove the page’s stream and changed the “connections=10” to “connections=5” (which changes the number of profile pics in the “like box”).

Very easy process overall. Thought I’d post for those who may be looking for some help with this.

[ad code=1 align=center]