Lyang Hsueh's Blog

The journey is the reward.

Adding a Facebook Live Stream Box to Your Site

Facebook launching a new feature for webmasters to post a stream of relevant Facebook updates in real time. called a Live Stream Box.

With the Live Stream Box on your website, users log in using Facebook Connect and share updates that appear both within the Live Stream Box and on their Facebook profiles and in their friends’ home page Streams. Each post includes a link back to the Live Stream Box on your site so users can discover the live event and immediately join based on their friends’ recommendations. The Live Stream Box includes a tab to see updates from everyone who is posting on the event from across the Web as well as a filter for a user to view just their friends’ updates.

If you have your own site where you want to implement a Live Stream Box (like here), you need to add some JavaScript code to the page where you want the box to appear.

First, download a cross-domain communication channel file, then upload it to the directory with the file that will reference the Live Stream Box. This file will allow your site and Facebook to send data back and forth.

Edit the HTML file where you plan to reference the Live Stream Box. Within the <html> tag, add this attribute: xmlns:fb="http://www.facebook.com/2008/fbml", as in:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

Next, add the following code to each file where you want a Live Stream Box to appear. Replace YOUR_API_KEY_HERE with the API key you received earlier, set the height and width for the box, and include the path to xd_receiver.htm.

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<fb:live-stream width="<widthInPixels>" height="<heightInPixels>"></fb:live-stream>
<script type="text/javascript">

FB.init("YOUR_API_KEY_HERE", "<path from web root>/xd_receiver.htm");

</script>

Note: You can create multiple Live Stream Boxes to cover multiple events. Add xid="EVENT_NAME", specifying a name to uniquely identify the event (EVENT_NAME can include only numbers, letters, and underscores). The default XID is xid="default".

Developers and site owners can visit Facebook's Live Stream Box page to learn more. For websites that don't require real-time user interaction, Facebook still recommends their Comments Box, released earlier this year. The Comments Box also allows users to connect through Facebook Connect, but content generated is archived, asynchronous, and searchable.