Widgetbox + Facebook Page + static FBML box

So I finally got the time and mood to put a little bit work on this problem.

While there’s seem to be very few clear tutorial or some sort in google specifically for this matter, I thought it would be either too simple that no one bothers to give a tutorial, or simply too complicated that no one bothers to do it.

Widgetbox is a useful site that allow you to create some dynamic content to your website in widget form, or simply use those widgets that created by someone else. Every time you want to insert a widget in widgetbox, simply copy the embed code generated and paste to the place you want to add. It works like charm for most contents like blog, website, etc.

However, as its code contains external script and object tag, it simply violates Facebook’s terms of page contents… aka, it does not work with Facebook page, if you directly copy and paste those codes into that static FBML box (here’s some info about it). So this “new” Facebook page has banned most sort of external scripts and objects, so the generated embed code which consist of “object” and “script”

tags just simply doesn’t work on static FBML boxes.

“but Facebook says they support swf!”, Yes they support swf, in a weird way. First, you have to use FB:SWF to include the flash object, Second, it does not play on page load.

So the way to solve this problem is to convert that object tag and those variables into the fb:swf tag. Ya simple as that.

now here’s what you get from widgetbox “embed” button

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
 codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
 type="application/x-shockwave-flash"
 width="350px" height="523px"
 id="InsertWidget_883e1e81-33bf-42ba-a364-985360a915e3"
 align="middle"> <param name="movie"
 value="http://widgetserver.com/syndication/flash/wrapper/InsertWidget.swf">
    <param name="quality"
 value="high">
   <param name="wmode" value="transparent">
    <param name="menu" value="false">
    <param name="flashvars" value="r=2&appId=883e1e81-33bf-42ba-a364-985360a915e3">
    <param name="allowScriptAccess" value="sameDomain">
    <embed src="http://ycfreeman.com/wp-content/uploads/2010/04/InsertWidget.swf"
 name="InsertWidget_883e1e81-33bf-42ba-a364-985360a915e3"
 width="350px" height="523px" quality="high" menu="false"
    pluginspage="http://www.macromedia.com/go/getflashplayer"
 type="application/x-shockwave-flash" wmode="transparent" align="middle"
 allowscriptaccess="sameDomain"
 flashvars="r=2&appId=883e1e81-33bf-42ba-a364-985360a915e3" /> </object>

pretty much clear on how to convert here now 😄, just change embed tag to fb:swf, and delete some not allowed parameters, then convert those like src to swfsrc. And finally add a printscreen or something to be the "lid of your pot".

the converted code would be something like this:

<fb:swf
 imgsrc="http://ycfreeman.com/wp-content/uploads/2010/04/playbuttonm.jpg"
 swfsrc="http://ycfreeman.com/wp-content/uploads/2010/04/InsertWidget.swf"
 flashvars='r=2&appId=883e1e81-33bf-42ba-a364-985360a915e3'
 width='350' height='500'
 align='middle'
 wmode='transparent'
 waitforclick='false'
 scale='exactfit'
/>

update 19/02/2011: demo page no longer available, but there should be some fb pages with flash these days.

one more thing, you can always test those FBML codes at FBML test console before publish 😄

update: FBML test console is no longer working 😦

Have fun!