How to Create Facebook FBML Page, Part 2

This is a second part of our tutorial on creating a FaceBook Template from the scratch. In this part we will convert our .psd file into HTML page. This is not an “HTML/CSS for Dummies” tutorial, so it will not explain everything in detail, however we’ll cover the overall structure of our code.

1. Before we start coding we need to slice all the images we may need. Open the .psd file and turn off all the layers except for the background picture. Save it as bg.jpg

Note: It is suggested that you use “Save for web & devices” feature, to optimize images for web.

2. Turn off all the layers except for the picture of the camera and save it on a transparent background as camera.png

Note: Images with transparent background should be saved in .png format.

3. Save in the same way the rest of the images that require transparent background: logo.png, welcme.png, recent_photos.png, latest_news.png, contact_info.png, points.png:

4. Turn all the layers on, cut the rest of the images and save them as: like.jpg, icon1.jpg, icon2.jpg, icon3.jpg, icon4.jpg, img1.jpg, img2.jpg

   Here is how the slices look like:

FaceBook does not read neither “html” nor “body” tags, but it does support CSS both withing the code and the external one. I prefer using styles right within the code, as we have only one page and that is a lot easier in this situation.