*Edit* – This method is obsolete. Showit pushed out an update that will do this for you automatically. Click here for more information.
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
It appears this is only possible with FAN pages, and not your personal page. There is no place to “edit page” on your personal page only FAN page. Is that correct. Also, did everything as about and after I completed there was nothing. I can’t even find where the application was added to my fan page. Kevin Keefer Photography. Please help.
Thanks,
Kevin
Hi Kevin,
Actually this does work on profile pages, but you’ll need to use the My HTML application. We’ll update the post to include that the FBML app only works for Fan pages.
is there a way to rename the tab so it does not say my html?
same problem here….
as far as my researches are, there is acutally no way…
If there wasn’t a way to do it we wouldn’t have posted the instructions. It works for us and many others just fine.
I got the code from showit but no where does it show an “sid”. I see something that says id but thats it. Can you tell me if I am doing this incorrectly? Thank you.
Hi Sam,
The code is there. Every Showit site user has a unique site ID (sid).
great tip! Thanks!…but I’m having trouble getting the “activate jpg” to show up…the site loads fine and looks great once it’s clicked on…but I’ve been trying a variety of things to get the jpg to show…I do host my html and have tried both codes in Showit. Here’s the last part of the image code I’m using including part of the sid;
22&bc=000000&cmp=1 ‘http://sites.showitfast.com/13383/3377/facebookdanddscreenshot.jpg'width='700‘ height=’472′ />
Fan Page Address: http://www.facebook.com/DDWeddings
Any ideas?? Thanks!
- Darrin
Darrin,
Try this:
&cmp=1 imgsrc=’http://sites.showitfast.com/13383/3377/facebookdanddscreenshot.jpg’ width=’760′ height=’513′ />
yay! Finally got the Jpg to load too…
http://www.facebook.com/DDWeddings
I’m getting the following error when I click in my -website- following the instructions and placing this in the FBML in my fan page.
The requested URL /site.xml failed to load properly.
Please follow the link below for support if this message persists.
Same problem here. The JPG preview shows up fine, but once I click it I get the “Load Error.”
I am getting the same load error…?? Any ideas why?
Here is a link to the FB page http://www.facebook.com/pages/Anderson-Creative-Weddings/234062258227
hmmm….I’m sure you did but did you publish the site before you snagged the embed code? Try to republish and see if that works. You may also try to reupload your html pages (your hosting yourself correct?). For some reason it’s not pulling the xml file.
I tried as you requested and that does not seem to work. Would it be ok to post the FBML code here so you can look at it?
and yes I am hosting my own site.
Ok I got the sites to show but now the PNG I created with a screen captures is not showing?
Ok I got it to fully work. However why is the right side cut off with the jpg still and the actual site?
http://www.facebook.com/pages/Anderson-Creative-Seniors/341134470460?v=app_7146470109
Hey Ken,
The maximum width of that content area in Facebook is 760px.
It works… you guys rock.
beyond awesome!
I cannot get the jpg to show up. I only get the ? icon. I have the screenshot as a separate page on my ShowItSite (http://chaneysignaturephotography.com/facebook-jpeg). The website comes up great just can’t figure out how to get the URL to work. Any help is greatly appreciated.
Thanks,
Tim
Tim,
Use the hard coded link to your asset and not the custom link. Ex: sites.showitfast.com/xxxx/xxx/facebook.jpg. Your link above doesn’t even signify it as a single jpg image. It’s for that reason along we never recommend using the custom link to your assets.
After several tries I got it to work! Thanks much!
)
http://www.facebook.com/pages/Sarah-Bohl-Photography/50985704908
help, i’m trying to figure out how to “take a screen snip” of my site and then resize it and upload it to my showit media library? i’m sure it’s really easy, but i can’t figure it out. help
Hi Beca,
Try Jing. It’s a free screencast software that will allow you to take snips of your screen.
I followed the instructions, and have my screenshot on flickr. The screen shot shows up fine, but when I click on it, the site is too big for the embed window. Please, can someone tell me how I can resize it so that the site fits?
Hi Christine,
You’ll need to resize the embed to 760px wide.
Right…I was asking how I do that
Yay! I guessed…..I found the numbers in the ‘sid’ line of code and figured I would try it.
Thanks!
Christine,
In the embed code you get from within Showit it specifies the size of the embed in two places within the code. The first is at the very beginning when it begins with <object width=800…..just change all the 700 numbers in the code to 750, and all the 472 numbers to 522.
will this work for non-showit sites?
Showit is the only tool that allows you to embed parts of your website, so no this won’t work for non-showit sites.
ok. thanks!!! i’ll get right on learning again how to build a showit!
THAT ROCKS!!!! THANKS A LOT! facebook.com/Bildkombinat
Great Hack! After tooling around a little bit, I was able to figure the hack out.
In case you’re keeping a running total of who has used this hack, here is my site:
http://bit.ly/67Ft88
Thanks!
Russ
Awesome! Glad it worked for ya! Yeah it is VERY finicky. We’ve spent a few more hours on it and Static FBML app works for Facebook Fan Pages, and the Profile HTML app works for personal pages. Only bummer about the profile HTML app is that you can’t change the name of it. Still searching for a better way for personal pages.
Where do I find the embed code in Showit?? I have looked everywhere…
never mind! I knew as soon as I asked I would find it!
I followed the directions above and it worked perfectly. Well, almost perfect. Regardless of the changes that I make to the size parameters, the embed version cuts off a portion of the right hand side and the bottom. But, I think I noticed the same thing on Dane Sanders display as well? Regardless, this is a neat option. Thank you!
Hi Jake,
There’s a line in the code that still gives the parameters of “800″ and “541.” Those need to be changed to 760 and 513. Dane must not have gotten my last message.
HOLY MOLY! Everyone must be trying this right now because Facebook is made of molasses!
Can’t wait to put it on and thanks for the info!
Drea
I almost gave up but did get it to work on my ROBIN K WEDDINGS Fan Page and on my personal page. Thanks for the research and development of this piece of Facebook flair,
Robin
Actually, there is a glitch. When I load the page on my personal page, the links at the bottom of the website are there and are usable. When I load the exact same thing on my fan page, the links on the bottom of my website are cut off and I cannot click on any of them. Any reason why it would work with MY HTML but not with FBML?
Hi Robin!
It sounds like the sizing is off on one of them. Make sure there are no numbers that say 800 or 541. If there are make sure to change them to 760 and 513
And for 2010, I will follow directions better. Yes, I forgot to reset the dimensions the second time. It works great now. Thanks.
I’m stuck. I have the “Brides Only” tab to work on my fan page and I inserted the html code (see below) but it’s not working at all (Fan Page link below). Where did I go wrong?
Here’s the link to my Facebook Fanpage.
http://www.facebook.com/StudioofLove?v=app_10531514314
M.J.
MJ it looks like that clip is linkable to your newsletter. Did you place the code in the FBML box? I don’t even see the script loading on that page.
here is the code i put in on the facebook tab…what am I doing wrong? I still can’t get it to work.
<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:black;"
swfsrc='http://sites.showitfast.com/pl/site.swf?sid=16547/6540&sp=splash&fw=800&fh=541&it=0&ip=0&pc=555555&sc=222222&cmp=1' ‘
width=’760′ height=’513′ />
You have an “800″ and “541″ than need to be changed to 760 and 513
Still no worky. – M.J.
Here’s the code.
Can you tell me what’s wrong with my code please? It’s not working.
Thanks.
I got it to work.
NOTE To EVERYONE: We must make sure the coding is exact. No extra spaces, periods, etc.
- M.J.
OK, I changed that…and now i just get a little black box in the top left corner. here is the new code
<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:black;"
swfsrc='http://sites.showitfast.com/pl/site.swf?sid=16547/6540&sp=splash&fw=760&fh=513&it=0&ip=0&pc=555555&sc=222222&cmp=1' ‘
width=’760′ height=’513′ />
for some reason..it doesn’t all copy and paste. here is the part that is after the 1′
‘
width=’760′ height=’513′ />
omgosh, it just doesn’t want to show up on here
I’m hoping as soon as I post this I will find the embed code just like Angela did. Can you direct me on where to find the embed code in Showit?? Thanks!
i haven’t given up yet…but sadly i’m close. i just went thru the tutorial…and i have everything where it looks like it should go. i uploaded the screenshot thru jing…and i still have a red x in the top left corner
Maddie I just took a peak at your site. It looks like you embedded the entire object embed code and it’s only the “sid=” line that you need. Your final code should look exactly like below. DO NOT forget to put in the at the end of the code below. I had to do this on this comment so it would show the code. Also, your sid line and your jpeg line will look different. If that doesn’t work, upload a screenshot somewhere else to be hosted. I am not sure since jing doesn’t give the path to a .jpg it instead gives it a numerical path which may be fudging it.
fb:swf swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:black;”
swfsrc=’http://sites.showitfast.com/pl/site.swf?sid=10803/715&sp=home-1&fw=760&fh=513&it=4&ip=1&pc=00000d&sc=00000d&cmp=1′ imgsrc=’http://www.spilledmilkdesigns.com/cover_play.jpg’
width=’760′ height=’513′ /
i know it shouldn’t be this difficult, i have NO idea why i can’t make this work
fb:swf swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:black;”
swfsrc=’http://sites.showitfast.com/pl/site.swf?sid=16547/6540&sp=splash&fw=760&fh=513&it=4&ip=0&pc=555555&sc=222222&cmp=1′ imgsrc=’http://3.bp.blogspot.com/_VfLEgpzHS0A/SaxBvK6gQjI/AAAAAAAAAIY/qJ57rvEkbkQ/s1600-h/MPCLogo.jpg’
width=’760′ height=’513′ /
Under “Application Settings” on the FBML application, is it set to BOX: AVAILABLE TAB: ADDED? It looks like you have both up there.
i had both as added…i’ve changed it. still nothing
fixed it!!! had to grab the image from showit, once i figured out how to do that…it works just fine. thanks so much for all the help
On my facebook, in edit FBML window, where is supposed to be facebook code to edit, there is no code at all. What did I miss?
You get the code from our blog post, along with your sid code.
Ok !! … call me dumb but i just can’t get this to work … i’m no computer genius …so here goes… this is what i have in my facebook, obviously this is wrong cause i cant get anuthing to show up anywere … plz help !!
hmm didnt show up
why can’t i copy paste the stuff i put in my facebook ? hard to get help if i can’t post it…or is it posted and i just can’t see it ?
found the video tutorial !! All is up and running !! Thx guys you rock !!
For those of us who are new to this, could you give some details on how to find the code to embed?
Bad assumption:
“We’re going to assume that you already have the embed code provided to you by Showit”
Thanks!!
This is not a bad assumption if you already have Showit. Please watch the tutorial that was posted.
what tutorial ?
Yes, if you could point me to that tutorial it would be very much appreciated. Sorry if you have to dumb it down for me…
found it .. its at the bottom of the blog just click on the link . Got mine up and running after the tutorial..my problem was i had put in the wrong sid code since there are 2 and i used the 1st one (wich is the wrong one)
Holy Moses, I did it!!
http://www.facebook.com/pages/Washington-DC/Madilun-Photography/158132363680?ref=ts
Thanks Nick & Lucas!
Thank You. It Works !!!
Happy New Year
WOW! Was the video helpful or WHAT! Great job, guys. Thanks.
http://www.facebook.com/pages/Gray-Photography-GrayPhotographcom/32412633826?v=app_4949752878
Has anyone ran into a problem with Firefox not working, but IE works? Right now my wife’s works in IE, but can’t click or see anything with Firefox.
http://www.facebook.com/pages/Khristen-Powell-Photography/191597984637#/pages/Khristen-Powell-Photography/191597984637?v=app_4949752878&ref=nf
Best Regards,
Estel Powell
Could you please do the same for a Showit Web slideshow? With the code etc? The Showit app won’t work on my page so I need a workaround to show my slideshows on FB without having a million links all over the place (and figuring out how to get my link box back on the left column is an entirely other story)….Thanks!
Hm, I left a comment on here but it disappeared. Would it be possible to do something similar for putting a Showit Web slideshow on a static FBML? As in what code to use? I can’t use the Showit app on my page and I am trying to find a workaround to get my slideshows/slideshow link on my page without it looking messy (ie, a million slideshow links all over the wall). Thanks.
Hi Rose,
I’m not sure how to answer that question. The app you mention works for us and others for Showit Web shows.
Nick, as always you are the man!!! followed the instructions and worked great – must go add you on FB now and give some love to spilled milk designs
Can someone send/tell/direct me where to look for my SID #?
Thank you.
did you find where the sid# is? because i have to idea where to begin looking…
Amber,
Showit now includes this feature. Our method is now obsolete.
AMAZING! simply AMAZING! You guys rock!
When I get to the FBML portion on Facebook, my Facebook doesn’t have a FBML coding. Question: Do I cut-n-paste the WHOLE clipboard Showit coding into Facebook? My Showit coding is as follows:
What am I doing wrong? Help!
Hi, everything works great except the right side and bottom are cropped, i know u already answer that, here is the code
I dont see any wrong numbers …
What do i have to change ?
Thanks for ur help
Stephane!
A MUCH easier way is being introduced today. Stay tuned!
Thanks so much for this tutorial! It’s awesome! The problem I’m having is that my site is looking really tiny. It’s not filling the whole width that’s allowed in the box. I double checked my code to make sure I got the sizes correct, and I think I do. Here’s a link to my facebook page:
http://www.facebook.com/pages/Burbank-CA/Heidi-Ryder-Photography/44543983753?v=app_4949752878
and here’s the code I used:
any ideas? Thanks in advance for your help!