Jun
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 &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!

http://www.webdesign-tutorials.com/blog/wp-content/plugins/sociofluid/images/digg_16.png http://www.webdesign-tutorials.com/blog/wp-content/plugins/sociofluid/images/stumbleupon_16.png http://www.webdesign-tutorials.com/blog/wp-content/plugins/sociofluid/images/delicious_16.png http://www.webdesign-tutorials.com/blog/wp-content/plugins/sociofluid/images/furl_16.png http://www.webdesign-tutorials.com/blog/wp-content/plugins/sociofluid/images/technorati_16.png http://www.webdesign-tutorials.com/blog/wp-content/plugins/sociofluid/images/facebook_16.png

About the author: admin

View all posts by admin

32 Responses to “How to Create Facebook FBML Page, Part 2”

  • Kim Tetzlaff says:

    Great tutorial

  • Danny says:

    Great tutorial, Thanks its helped A lot

    Danny

  • web design says:

    Thanks for u r information

    its very useful

  • Silvia To says:

    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!

  • planner says:

    pls i need someone to send me tutorial web desige

  • Ishwor Manandhar says:

    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.

  • Sebastian says:

    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.

  • Va Infotech says:

    really nice work

  • webquick says:

    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!

  • JMW says:

    Aaah.. beautiful template
    A very useful tutorial. Thank you for sharing

  • News says:

    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!

  • Simon says:

    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?

  • josh says:

    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.

  • internethink says:

    there is verry nice sample… Thanks for all

  • Christina says:

    Wanted to say thank you. Excellent post.

  • Thank You Very Much.. !

  • Travis says:

    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.

  • Rodrigo says:

    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!

  • zaifox says:

    what is this….is it a site for photoshop developers…how do we link the facebook to access the third party for the pictures…

  • hendrabozzie says:

    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.

  • emma says:

    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

  • geeky girl says:

    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 :)

  • andy says:

    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

  • Leyla says:

    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.

  • Andrea says:

    how put the code on facebook?

  • admin says:

    Andrea! I would recommend you to use hostfb.com if you do not have your own hosting to store the fan page code.

  • Andrea says:

    i have a host, thank you ;)

Leave a Reply

Security Code: