Facebook’s Fan Box – The Inside Scoop

By Reggie · July 13, 2009

Last Wednesday (July 8, 2009) Facebook unveiled a new widget that lets users promote and showcase their Facebook Page on any website or blog. The widget comes with your Facebook page stream and fan avatars.  This is Facebook’s 2^nd widget; they also recently launched the Live Stream box to let anyone incorporate a Facebook chat box into their site.

If you would like to know how you get the Fan Box, watch this short video:

Now out of the box, this widget may need some very small customization depending on how and where you implement. Maybe you need to change the width for a smaller sidebar or modify the widget because you already have Facebook Connect running on your site. I thought I would take a minute to share the each component of the widget.

Part 1
FeatureLoader.js.php is the main JavaScript file used in all Facebook Connect implementations and must be included for the widget to work. However if you already have Facebook connect running on your site, this script would be a duplicate and should not be included.Vu Manh Thang – I Am Superman

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

Part 2
The next line is a small piece of Javascript that tells Facebook the API key of your widget. Like the last script, it should be included on all uses except when Facebook connect is already being used on the page. If Facebook Connect is already implemented on the page, do not include this line:

<script type="text/javascript">FB.init("XXXXXXXXXXXXX");</script>

Part 3
This is the XFBML which is used to incorporate FBML in a HTML page. In this case to display the Fan Box.

• Do not change the profile_id, it is the unique id pointing to your Facebook page
• If you choose to include the stream, it will set stream =“1”. To remove the stream set to “0”
• If you choose to include fans, it defaults to connections=“10”
• Change the width (in pixels) as needed to fit your sidebar

<fb:fan profile_id="XXXXXXXXXX" stream="1" connections="10" width="300"></fb:fan>

Part 4
This is a link back to your Facebook page, and is not required for the widget to work properly.

<div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/mytechopinion">MyTechOpinion</a> on Facebook</div>

If you would like to try the iFrame version of the widget, replace the XXXXXXXXXX with the API Key provided by Facebook for your Fan Box.

<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=XXXXXXXXXX&connections=15&stream=1" allowtransparency="true" style="border: none; width: 300px; height: 600px;"></iframe> 

MyTechopinion
Facebook pages are a great option for real estate professionals in terms of both enhancing brand recognition and becoming a trusted advisor. Think about the average fan, once they’re connected they have the opportunity to engage with you on a regular basis. But also realize Facebook pages take a lot of effort to maintain. Try sharing relevant information, resources and fun content on a regular basis. Then watch your insights and gage what your fans engage with most?