Facebook Like Box – A closer look at the code

Click the buttons to highlight parts of the code.[tweetmeme]

By:Martin Ove

[Update 22.10.2010: Id-number is no longer used by Facebook. It has been replaced by url. Read more here] The code behind the Facebook Like Box is easy to modify manually without having to go back the Facebook site. Here's a rundown of "what does what" in the iframe code: [stextbox id="grey" float="true" align="right" width="180"] Get the code from Facebook Developers Read more in the Step-by-step guide [/stextbox] Page id - The 12 digit number defines which page, the Like Box will grab the contents from. You can obtain your page id by opening your page in your browser and look for the id number in the url bar. Connections - This is the number of fans, which are displayed in the bottom part of the Like Box. The code says "connections=10" as default. This will show 10 fans, and you can change the number by just replacing the number 10 with another number. The stream - The stream shows the activity on your Facebook Page, and you can choose to show or not show it by altering the piece of code, that says "stream=true". If you type "stream=false" instead, the stream will not be shown. The header - The header can be activated in the same manner as the stream. Find the piece of code that says "header=true" and replace "true" with "false" to turn it off. Width and height Customizing the width and height of the Like Box can be done manually in the code too. Both width and height appears twice in the code each. To change the width, you will need to find the pieces of code that says "width=292" and "width:292px;". To change the width, you just need to change the number "292" in both places to the number you want. The same thing goes for the height. It appears in the code in the same manner as width does, and to change it, just do as with the width. Changing the dimensions require some trial and error. Start by checking out, how it looks on your site. Is it too slim? Too wide? Change the width, reload the site and then see if it looks better. Then adjust again, that's how to do it. The same goes for the height. Make sure to adjust the height, so that half of your fans pictures aren't cut off. It happens often and it just looks slobby. That's it. Thanks for reading.