Blog & News Articles | The Mac Expert • Macintosh Support

Add a Facebook Fan Page Widget to your Website Using Facebook Web Integration Tools

July 9, 2010 | Author Russ

Thanks to Facebook’s new web integration tools, it’s easy to create a custom widget to connect your Facebook Fan Page to your website. It will easily plug into CMS-based sites like WordPress or Joomla, and also work with social platform sites like Ning and Spruz.

To do this, just add an HTML element/mod to your site (I recommend adding it to the global sidebar). Then paste in the following code:

<table border=”0″ cellpadding=”1″ cellspacing=”1″>

<tbody>

<tr>

<td style=”background-color: rgb(R, G, B); “>

<iframe frameborder=”0″ scrolling=”no” src=”http://www.facebook.com/plugins/likebox.php?id=FANPAGEID&width=250&connections=8&stream=false&header=false&height=260″ style=”border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; overflow-x: hidden; overflow-y: hidden; width: 250px; height: 260px; “></iframe></td>

</tr>

</tbody>

</table>

Be sure to change the RGB values to match your site, and change “FANPAGEID” to your fan page ID (the number in the URL when you visit the page).

Note that because the iframe code creates a transparent widget, I have nested the iframe inside a table so I can change the background color.

If you want to use the code generator in the Facebook site to create the code instead, go to:

http://developers.facebook.com/docs/reference/plugins/like-box