*Edit* – This method is obsolete. Showit pushed out an update that will do this for you automatically. Click here for more information.

fbembed_1http://www.facebook.com/pages/Houston-TX/Spilled-Milk-Designs/137013621744?v=app_4949752878

Facebook won’t allow you to embed your Showit site the normal way using the embed code.  We have to use Facebooks own coding language dubbed Facebook Markup Language or FBML. Luckily we’ve figured it all out for you and will explain how to embed your Showit site into your Facebook page.

*The particular Facebook app FBML mentioned in this post only works with Facebook Fan pages. Use the Facebook application My HTML for personal profiles.*

We’re going to assume that you already have the embed code provided to you by Showit, and we’re going to assume that you want to embed your entire site. The sizing inside the code doesn’t matter so don’t worry about it. If you have music on your site, you may want to duplicate the style group and embed one without music as to not surprise your visitor. Facebook doesn’t have ANY audio coming from it so it would be a shocker. :) Your code will look very similar to this one below:

<object width="800" height="540"><param name="movie" value="http://sites.showitfast.com/pl/site.swf"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="FlashVars" VALUE="sid=10803/715&sp=home-1&fw=800&fh=541&it=0&ip=1&pc=00000d&sc=00000d&cmp=1"></param><embed src="http://sites.showitfast.com/pl/site.swf" FlashVars="sid=10803/715&sp=home-1&fw=800&fh=541&it=0&ip=1&pc=00000d&sc=00000d&bc=d4d4d4&cmp=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="800" height="540"></embed></object>

There is only one line of code that you need; the site ID line which is in red above. This is different for everyone so please use yours unless you want to promote our site, in which case we are fine with that as well. :)

You’ll need to change the “800″ and “541″ to “760″ and “513″ in the code marked in red above. 760px is the maximum width of the canvas space on Facebook.

With your line of code handy, open up Facebook and find the place to browse for more applications. Search for FBML, and add it to your fan page. Next, go to the profile view of your Facebook page, and click the “edit page” link. Scroll all the way down until you see the Website-FBML application, and click on “edit.”

Rename the Box Title to Website or whatever you’d like, then copy and paste the following code into the FBML box:

<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:black;"
swfsrc='http://sites.showitfast.com/pl/site.swf?PLACE SITE ID HERE' imgsrc='IMAGE URL'
width='760' height='513' />

Where it says, “PLACE SITE ID HERE“, you’re going to paste the site ID line from above that you took from your embed code from Showit.  Make sure there is no space between the ? and the start of the site ID code.

You’ll need to give your visitors something to click to activate the canvas space. We’re not sure why this is, but hey it works. Take a screen snip of your site, and re-size it to 760×513. Upload it into Showit and grab the link to the asset. If you don’t know what that is then upload to Flickr or somewhere else. You just need somewhere to host the image. Replace the “IMAGE URL” with the URL to your loading image, then click on “save changes.”

Next, go to the profile view of your Facebook page, and click the “edit page” link. Scroll all the way down until you see the Website-FBML application, and click on “application settings.” It should be set to Box: Available | Tab: Added.

Good luck and if you run into any glitches just ask for help in the comments section. If it doesn’t work you did something wrong. :) If you like these little hacks then let us know!

*Updated*
Screencast tutorial here