How to Add a Facebook Like Button to a FBML Tab

Due to Facebook’s restrictions on JavaScript and iFrames within FBML tabs Like Buttons were once considered a feature of the Facebook elite, namely: Canvas Applications and external websites. Thankfully this walled garden is no more, and through a little CSS trickery we can commandeer the fb:comments’ Like button and bring its power back to the people!

fb:comments' Like Button

As an added bonus this hijacked Like button can reference any OpenGraph object, including Fan pages and official metadata-created Like buttons, which isn’t possible with the standard Facebook Like button.

Using the fb:comment's Like Button to bring the Like button to a FBML tab.

Note: IE does not support CSS that is defined within a style tag in FBML, so as a best practice I’ve loaded the CSS from an external stylesheet. Ignore this step and bake the CSS right into the FBML if you don’t mind those silly IE users seeing your page render incorrectly. Besides, Facebook doesn’t support IE6, why should you?

External StyleSheet ‘likeHack.css’

/**
 * Hide the Comments component.
**/
div.comment_body { display: none; }

/**
 * Uncomment the line below if you'd like to constrain the width
 * of the Like component.
**/
/*div.like { width: 200px; }*/

/**
 * Uncomment the line below to disable the Friend Pile under
 * the Like button.
**/
/*div.connect_widget_sample_connections { display: none; }*/

FBML

<!--
Load external stylesheet.
-->
<link rel="stylesheet" type="text/css" href="./likeHack.css"/>

<!--
@property xid
Replace the xid property with the OpenGraph id of your choosing.
This can be an existing Like button, a fan page, or any
OpenGraph object.

@property returnurl
Specify the returnul as the page containing the
Comments component.
-->
<fb:comments xid="128836417130060"
	width="200"
	returnurl="http://www.facebook.com/pages/The-Code-Laboratory/128836417130060?v=app_4949752878" >
</fb:comments>