Helpful hints in creating a custom facebook FBML page

Five Helpful hints when making an FBML facebook page. Hopefully this will save you some time in creating your own custom fan landing page.

Facebook page Icons: 200x200 pixels in size max. Different sizes get cropped unexpectedly so trial and error is the only way to determine what to do.

1. When the tiny icon is made, a 200x200 image gets cropped to around 165x165 then shrunk to the icon size. If you want a border around your subject, you need to make the subject smaller than 160x160 to preserve it.

2. Image artifacting. Any background color but black and white seems to cause artifacts around detailed edges. If you have text or fine

detailed vector graphics on a background, keep the background either black or white..or really busy so the artifacts look like part of the image. It also seems to preserve smoothing, so you can really blur the image if you want by setting smoothing to 8 (photoshop/fireworks)

3. a bunch of weird crap happens with IE that isnt testable outside of facebook:
-stylesheets have to be external or IE wont read them (use <link rel="stylesheet" href="http://www.mywebsite.com/myStyles.css?v=1.0" type="text/css"/>[/code] at the top of the facebook page)
-div tags cause spacing problems in tables, so if you create a table use span tags, not div tags. For some reason the div spacing issues cant be overcome with setting padding/margin/border to zero. Technically divs add a linefeed and spans dont...so perhaps thats it. Divs work fine in IE, Chrome, Safari, and Firefox outside of facebook, but not in a facebook page.

4. You cant link directly to a youtube .flv anymore (easily) so to embed youtube videos you need to link to the .swf file.

<span class="videoWindow">
<table width="240" height="145" border="0" cellpadding="0" cellspacing="0">
<tr> <td><fb:swf swfbgcolor="000000" imgstyle="border-width:0px;" swfsrc='http://www.youtube.com/v/VIDEO_ID_GOES_HERE?autoplay=1&egm=0&border=0&showsearch=0&showinfo=0&iv_load_policy=3&rel=0&color1=0x111111&color2=0x000000' imgsrc='http://www.mySite.com/images/videoLanchGraphic.png' width='240' height='145' /></td> </tr>
</table>
</span>

This will provide a simple youtube player. There are arguments you can pass are documented here:

http://code.google.com/apis/youtube/player_parameters.html#ExampleUsage
To hide the annotations and stuff, rel=0 is the most important, some of the other ones like iv_load_policy dont work without that.

4. as with all style sheets, make absolutely sure the final semi colon is at the end, any code written after it will be ignored
<style>
.myRef1{
}
.myRef2{
};
.myRef3{
}
</style>
In this case myRef3 class is ignored.


5. In the page editor, sometimes if you have code that exceeds the size of the browser window (unavoidable) after a save the window gets small and there are no scroll bars to get to the rest of your code. in firefox you can press Ctrl+a to select all and this enlarges the window to accomodate all your code.