How to Create Facebook FBML Page

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.

Slicing images:

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:

Coding:

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.
1. Start from creating a main div with 520px width and a bubbles picture in the background:

<div style="width:520px; padding:0px; margin:0px auto; background:url(images/bg.jpg) no-repeat left top; font-family:Tahoma; font-size:11px; color:#000000; text-align:left">

2.Create another div inside it, with a photo camera in the right top corner of its background. This one will contain the rest of the divs inside it:

<div style="background:url(images/camera.png) no-repeat right top">

3. Put a div for the header, with a table containing a like button and social icons. Set the proper width values to the table cells to organize the images in the header:

<div style="padding:10px 5px 10px 10px">
 <table cellpadding="0" cellspacing="0" border="0">
  <tr>
   <td width="68"><img src="images/like.jpg" alt="" border="0" /></td>
   <td width="326"  style="font-family:Tahoma; font-size:10px;"><div style="font-size:10px; font-weight:bold">Don't forget to become a fun!</div></td>
   <td width="28"><a href="#"><img src="images/icon1.jpg" alt="" border="0" /></a></td>
   <td width="29"><a href="#"><img src="images/icon2.jpg" alt="" border="0" /></a></td>
   <td width="29"><a href="#"><img src="images/icon3.jpg" alt="" border="0" /></a></td>
   <td><a href="#"><img src="images/icon4.jpg" alt="" border="0" /></a></td>
  </tr>
 </table>
</div>

4. The next div contains nothing but the logo.

<div style="font-size:0px; padding:22px 0 24px 0"><img src="images/logo.png" alt="" width="297" height="90" border="0" /></div>

5. Then the div with the “Welcome…” heading:

<div style="font-size:0px; padding-left:13px"><img src="images/welcome.png" width="252" height="65" alt="" /></div>

6. This one is a bit more complex as it has 2 indented divs inside it:

<div style="padding:13px 10px 0 15px">

First indented div with “Recent Photos” image:

<div style="font-size:0px; padding:26px 0 28px 0"><img src="images/recent_photos.png" width="152" height="23" alt="" /></div>

Second will contain a table with the images and the scroll for them:

<div style="width:495px; overflow:auto">
 <div style="padding:0px 0 14px 0">
  <table cellpadding="0" cellspacing="" border="0">
   <tr>
    <td width="210"><img src="images/img1.jpg" width="210" height="115" alt="" /></td>
    <td width="10"><img src="images/spacer.gif" width="10" height="10" alt="" /></td>
    <td width="210"><img src="images/img2.jpg" width="210" height="115" alt="" /></td>
    <td width="10"><img src="images/spacer.gif" width="10" height="10" alt="" /></td>
    <td width="210"><img src="images/img1.jpg" width="210" height="115" alt="" /></td>
    <td width="10"><img src="images/spacer.gif" width="10" height="10" alt="" /></td>
    <td width="210"><img src="images/img2.jpg" width="210" height="115" alt="" /></td>
   </tr>
  </table>
 </div>
</div>

7. Now we need a div which will contain four indented floating divs inside it: one for news, one for contacts, one for the line in the center and one to clear the floating:

<div style="padding:30px 20px 30px 18px">
    <div style="width:219px; float:left">
     <img src="images/latest_news.png" alt="" />
     <div style="padding:10px 0 3px 0; color:#6d6d6d">12/05/2009</div>
     <b style="color:#f5634a">Sed ut perspiciatis</b>
     <div style="padding:0px 15px 0 0 ">Voluptatem accusantium doloremque lveritatis et quasi architecto bsunt, expli-<br />cabo. <u>nemo enim ipsam</u></div>
    </div>
    <div style="width:2px; float:left; font-size:0px; padding-top:6px"><img src="images/points.png" alt="" /></div>
    <div style="width:235px; float:right">
     <img src="images/contact_info.png" alt="" />
     <div style="padding-top:18px">9870 St Vincent Place, Glasgow, DC 45 Fr 45.<br />
     <span style="padding-right:11px">Free Phone:</span>+1 800 559 6580<br />
     <span style="padding-right:16px">Telephone:</span>+1 800 603 6035<br />
     <span style="padding-right:48px">Fax:</span>+1 800 603 6035<br />
     <span style="padding-right:33px">E-mail:</span><a href="mailto:#" style="font-family:Tahoma; font-size:11px; color:#000000; text-decoration:underline">mail@companyname.com</a></div>
    </div>
    <div style="font-size:0px; clear:both; height:1px"><img src="images/spacer.gif" alt="" /></div>
   </div>

8. And the last div we have contains the footer:

<div style="padding:8px 0; font-size:10px" align="center">John Marley &copy; 2009-2010. <a href="#" style="font-family:Tahoma; font-size:10px; color:#000000; text-decoration:underline">Privacy Policy</a></div>

Note: As far as this code will be inserted into FaceBook FBML application, you need to upload the all the pictures to the third party host and use the full http:// paths to the pictures in your code, so that FaceBook could pull them out.
Now you have a nice FaceBook template, which can be easily embedded into your FBML application. Hope you’ve enjoyed this tutorial. Good luck!