24
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.
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 © 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!
Great tutorial
Great tutorial, Thanks its helped A lot
Danny
Thanks for u r information
its very useful
Does the “like” buttion really work? how’d you make that happen??
I have created a tab and wish to add a “like” button for the post (just like liking a photo or a notes) is that possible? how could this be done?
Thanks in advance!
pls i need someone to send me tutorial web desige
Great tutorial. But it does not cover the method of integration our html code into the FBML which I\’m in dire need of. Can any one here guide me for that. Thanks in advance.
You may want to move all your style sheets into a separate style sheet since FB does not display or allow inline style in the future.
really nice work
Thank you for sharing it and that was a great help for those using a facebook. Another idea if considering a custom web design is, just have a template made incorporating the website theme. You can then, if you have the skills, recycle the template theme to create the web pages for your website.
Good,thanks for sharing!
I wish you happiness every day!
Aaah.. beautiful template
A very useful tutorial. Thank you for sharing
Thank you for sharing it and that was a great help for those using a facebook. Another idea if considering a custom web design is, just have a template made incorporating the website theme. You can then, if you have the skills, recycle the template theme to create the web pages for your website.
Very useful tutorial. Exactly what I was looking for. Thanks!
How to link the “LIKE” button…
the whole implementation part is left out.
The slicing option in Photoshop is nothing special.
The question arises why not easily save the sliced image as HTML output and copy the text with the modified image-adress to facebook?
Good article.
Wow. You don’t really see a lot of facebook pages taking on this must customization. This is something that more and more pages will be doing i’m sure.
there is verry nice sample… Thanks for all
Wanted to say thank you. Excellent post.
Thank You Very Much.. !
I am having trouble with the coding… I am new to HTML but I\’ve been following step by step your code and it is not working for me. The header is going below the logo and I don\’t know how to fix it. I assume from trial and error that the padding dictates the location of the images but my padding for my header (facebook like icon and other icons) is 0,0,0,0 and padding for the logo is 24,0,24,0.
Any help would be greatly appreciated.
I am having problems with .png transparency on some IE versions. Does anybody knows how to fix it?
In some versions it shows correctly but in some it shows a white background.
http://www.facebook.com/staffmakeup
thanks for the tutorial!
what is this….is it a site for photoshop developers…how do we link the facebook to access the third party for the pictures…
this is what I need… great tutorial and very helpful
thanks for share, I wil try to create FBML page on my own Facebook Page.
hi i am following your code but for some reason there are horizontal spacing in my rows after the pictures. any help you can give me would be greatly appreciated and thank you for the tutorial
Hi,
useful tutorial
but can u help me how do u know that a table containing a like button and social icons padding must be
I know css,html and little about slicing but since i m new into slicing that’s why asking silly question
Very nice tutorial – I have used FBML the last year or so – and the conversion rate at my FB Page has been much bettter since I get a customized landing page
What is wrong with you guys? I mean, you ARE a Webdesign blog. So the usual suspects around here are kind of, well at least “script kiddies”. I really don’t think, that not a single one of them isn’t aware of slicing a design and doing simple html coding.
In the intro, you told that “this is not going to be an html tutorial. we assume, that you know some.” But what is it?
You could have saved yourself a lot of time by simply posting: “Well, do a mockup in PS, slice it and script some HTML”.
What people really need is some information on getting that HTML online on the Facebook servers. Don’t know why you didn’t go over that. The whole tutorial is completely meaningless without that part. My 1 year old daughter knows that much about webdesign =D .
Sorry for being a bit rude, but i read and read and read and i noded and i noded and i noded and then i got to the end and completely freaked out. Sorry.
kind regards andy
Hi,
It’s a great tutorial. Even though it says its not for dummies, I’m learning I know html, but I’m trying to learn fbml. And I did everything as the tutorial says but in the step 4 where it says “how the slices look like” I don’t see the blue lines etc so I realized I might have done everyhting wrong. Could someone let me know what should I learn to finally reach this. I’m willing to learn but just need to know where to start.
Thanks.
how put the code on facebook?
Andrea! I would recommend you to use hostfb.com if you do not have your own hosting to store the fan page code.
ok, forget.
http://www.youtube.com/watch?v=zzE09G4gtAc
i have a host, thank you