Picture
I have to admit, I'm not a programmer nor a web developer. I don't know much about framework schemes and databases. But I know just enough Cascading Style Sheet (CSS) form and Hypertext Markup Language (HTML) to make my print design function for the Web.

Facebook offers their own language too: Facebook Markup Language (FBML). It is a great branding tool for any business. I still don't understand the language completely, but I was pretty much able to make it work by adding <fb:fbml> and </fb:fbml> tags to my HTML code. There are a few resources online that explain FBML in detail. As a print designer, I prefer to leave the details to trained programmers.


5 Tips:

Luckily for us print designers, imitating print design on the web is becoming increasingly popular. Here are a few tips I can offer to other transitioning print-to-web designers like myself.
  • Add the Static FBML application to your Facebook Fan Page. (Static FBML is not available for personal pages). I believe Facebook recommends the app for most fan page categories. If it is not in your apps or recommended apps, type "Static FBML" into your Facebook search bar to add the application to your page. Once you can access the app, you will see the field to enter the a tab title and a field to enter your FBML code.
  • Use tables. Purely by observation, I noticed that FBML ignores my spacer.gif images that Photoshop renders for in-between slices. So instead of using <td> cells throughout the code, I bypassed the limited HTML help that Photoshop could offer and used CSS for a background image and simple tables to position my Design Gallery images. The maximum canvas width is 760 px.
  • Photoshop your background. The key to producing a branded look is to carefully design your background image. I didn't really take a lot of time to plan out this example. In fact, I was so eager to try FBML that I quickly took a stock photo and superimposed my face just to create an effective image for the purpose of my tab "All about d*." And it's not even me. Ah, the beauty of photo manipulation.

Picture
  • Minimize code. FBML does not read relative links, so store your images on a low-character server name. You might also have noticed that I didn't space out the gallery images. This is because I am under the impression that pages created using FBML have a maximum character limit. Again, I'm not completely sure of a limit, but it is good practice anyway to keep your codes as short as possible without sacrificing load time. Of course, if spacing is a priority in your design, go ahead and put spaces.
Picture
  • Lastly, consider your audience. Chances are, you are using a Facebook Page as a feed to your real website, so you want to use your custom tab as an opt-in initiative to your primary site rather than some confusing visual for your brand. You can also change your wall settings to default to your new FBML custom tab as a landing page. There's nothing like making a first impression with a snazzy opening.
Take it or leave it, but these are my novice tips on FBML. I will explore iFrames, Javacript, and Flash soon, so I will have more to shed on the topic later. Also check out some useful tools on www.vegasproeditors.com.

Me ke aloha,
~d*




 


Comments

04/23/2010 10:12am

Hey great start and best wishes as you push deeper into FBML. One note, although it isn't policy now, Facebook will be redefining the minimum width to 520px. So, if you're about to design something -- you might consider making it 520px now rather than having to remake it later. Cheers.

Reply
donya
04/26/2010 6:12am

Thanks. Do you know why they are reducing it?

Reply
Paul
04/29/2010 1:39pm

Hi there.

I have a question.

I too only today found out about this FBML thing... and find it intersting.

How did you get from photoshop... to background in Facebook?
Is it possible to have some kind of way that users can fill in a few questions, especially with radio buttons.

Email me back, thanks.

Reply
donya
05/05/2010 2:51am

Paul,

At first I used the slice tool in Photoshop and saved it for web (Alt-Shift-Ctrl-S on Windows or Option-Shift-Command-S on Mac). But I found that FBML ignored the spacer images that Photoshop generated. So instead of slicing the design, I saved the background as one image, imported as a background into Dreamweaver, added a table for controlled formatting, then inserted my gallery images.

Then, I added <fb:fbml> and </fb:fbml> before and after the HTML code, and copy-pasted it into the FBML field on the FBML app.

Dreamweaver generates radio buttons and form fields, as well, but I have not tried it. Theoretically, it should work like any HTML website design. Let me know if this helps.

Reply
05/26/2010 7:10am

Donya, you saved my life! Thank you so much for this post. I've been trying to do an FBML tab using slices and I was literally about to jump out a window - it would work in Firefox, but not in IE or it would work in an old version of IE but not in the new version! Then I found your post and your 5 simple tips solved my issues. Thank you Thank you Thank you!!!

Reply
06/09/2010 5:11am

I see that even FBML page templates are appearing :) but's there are a few atm.. for instance here - http://www.flashmint.com/show-type-facebook.html

Reply
06/30/2010 8:44pm

donya,

I'm having a problem getting photoshop slices to show up as well.. tried out your method with pulling the background into dreamweaver but I'm lost on how to recreate it with tables and post it up. Do you think you could post the final code or a snippet from it? Thanks so much..

Reply
Emma
07/20/2010 11:57am

Hey!! I need heeelp...
I'm trying to insert a background in my facebook fan using fbml but it just simply doesn't work!!
First, i did all my page on dreamweaver (Beforehand, I did my background on photoshop). Then, i copied/pasted codes on my fbml box and removed all useless ones on fbml ( <html>, <body>, etc.) But still, my background doesn't appaer on my page, only my dreamweaver text appear on it!
PS: I've also CSS code in it, and the picture (background) is host by photobucket... I tried pretty much everything and nothing works!!
If someone has an idea that will be helpfull...
Thanks!!
Emma

Reply
Donya
07/31/2010 11:04am

<table width="760" height="933" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" rowspan="3"><img

src="http://inmanproductions.com/dsinelabfb/images/index_02.jpg" width="94" height="101" /></td>
<td colspan="3"><a

href="http://www.facebook.com/dsinelab?!/photo.php?pid=3593095&id=308728713304" onclick="(new

Image()).src =

'/ajax/ct.php?app_id=2353941073&action_type=3&post_form_id=a66de44c40dacb980da53f

42be49b84f&position=3&' + Math.random();return true;"><img

src="http://inmanproductions.com/dsinelabfb/images/index_03.jpg" border="0" /></a></td>
<td colspan="3" rowspan="3"><img

src="http://inmanproductions.com/dsinelabfb/images/index_04.jpg" width="24" height="101" /></td>
<td colspan="2"><a

href="http://www.facebook.com/dsinelab?!/photo.php?pid=3593375&id=308728713304" onclick="(new

Image()).src =

'/ajax/ct.php?app_id=2353941073&action_type=3&post_form_id=a66de44c40dacb980da53f

42be49b84f&position=3&' + Math.random();return true;"><img

src="http://inmanproductions.com/dsinelabfb/images/index_05.jpg" border="0" /></a></td>
<td colspan="2" rowspan="3"><img

src="http://inmanproductions.com/dsinelabfb/images/index_06.jpg" width="23" height="101" /></td>
<td colspan="4"><a

href="http://www.facebook.com/photo.php?pid=3593052&id=308728713304" onclick="(new

Image()).src =

'/ajax/ct.php?app_id=2353941073&action_type=3&post_form_id=a66de44c40dacb980da53f

42be49b84f&position=3&' + Math.random();return true;"><img

src="http://inmanproductions.com/dsinelabfb/images/index_07.jpg" border="0" /></a></td>
<td colspan="3" rowspan="3"><img

src="http://inmanproductions.com/dsinelabfb/images/index_08.jpg" /></td>
<td colspan="3" rowspan="2"><a

href="http://www.facebook.com/photo.php?pid=3593137&id=308728713304" onclick="(new

Image()).src =

'/ajax/ct.php?app_id=2353941073&action_type=3&post_form_id=a66de44c40dacb980da53f

42be49b84f&position=3&' + Math.random();return true;"><img

src="http://inmanproductions.com/dsinelabfb/images/index_09.jpg" border="0" /></a></td>
<td colspan="3" rowspan="3"><img

src="http://inmanproductions.com/dsinelabfb/images/index_10.jpg" /></td>
<td colspan="3" rowspan="2"><img

src="http://inmanproductions.com/dsinelabfb/images/index_11.jpg" /></td>
<td colspan="2" rowspan="2"><img

src="http://inmanproductions.com/dsinelabfb/images/index_12.jpg" /></td>
<td colspan="4" rowspan="2"> <img

src="http://inmanproductions.com/dsinelabfb/images/index_13.jpg" /></td>
<td colspan="3"><img src="http://inmanproductions.com/dsinelabfb/images/index_14.jpg"

/></td>
<td rowspan="8"><img src="http://inmanproductions.com/dsinelabfb/images/index_15.jpg"

/></td>
<td colspan="5"><a

href="http://www.facebook.com/dsinelab?!/photo.php?pid=3593067&id=308728713304" onclick="(new

Image()).src =

'/ajax/ct.php?app_id=2353941073&action_type=3&post_form_id=a66de44c40dacb980da53f

42be49b84f&position=3&' + Math.random();return true;"><img

src="http://inmanproductions.com/dsinelabfb/images/index_16.jpg" border="0" /></a></td>
<td rowspan="2"><img src="http://inmanproductions.com/dsinelabfb/images/index_17.jpg"

/></td>
<td colspan="6"><a

href="http://www.facebook.com/dsinelab?!/photo.php?pid=3597663&id=308728713304" onclick="(new

Image()).src =

'/ajax/ct.php?app_id=2353941073&action_type=3&post_form_id=a66de44c40dacb980da53f

42be49b84f&position=3&' + Math.random();return true;"><img

src="http://inmanproductions.com/dsinelabfb/images/index_18.jpg" border="0" /></a></td>
<td rowspan="2"><img src="http://inmanproductions.com/dsinelabfb/images/index_19.jpg"

/></td>
<td colspan="4"><a

href="http://www.facebook.com/dsinelab?!/photo.php?pid=3593079&id=308728713304" onclick="(new

Image()).src =

'/ajax/ct.php?app_id=2353941073&action_type=3&post_form_id=a66de44c40dacb980da53f

42be49b84f&position=3&' + Math.random();return true;"><img

src="http://inmanproductions.com/dsinelabfb/images/index_20.jpg" border="0" /></a></td>
<td colspan="2" rowspan="2"><img

src="http://inmanproductions.com/dsinelabfb/images/ind

Reply
ruffy
09/09/2010 2:51am

isnt something missing from the code?
there seems to be no end:
img src="http://inmanproductions.com/dsinelabfb/images/ind............?
thx!

Reply
Maile
11/08/2010 9:23am

Awesome article Donya! I too am a newbie to fbml, but am learning for clients so I am glad to get your expertise on this. I'll holler when I need more insight from you for sure!!

Reply

Great article.

Reply

Serious fan of the website, lots of your articles have truly helped me out. Awaiting up-dates!

Reply
08/25/2011 6:05pm

I just stopped in to tell you I really appreciated the read and shall be dropping by from time to time now.

Reply
taimoor
09/07/2011 3:00am

hi

i need a help for you because i have an error which became to me when i
save change my fbml setting the error was !!!!

This message contains blocked content that has previously been flagged as abusive or spammy


please help me ! !

Reply
shoes 2011
01/03/2012 1:31am

OA Computer System after a period amongst further <a href="http://www.nikeshoesoutlet-nba.com/shoe/vibram-five-fingers">Vibram Five Fingers Shoes For Sale</a>, already have moved into a great \"collaborative products\" point in time. Then Again gone through some people collaborative <a href="http://www.nikeshoesoutlet-nba.com/shoe/vibram-five-fingers">Vibram Five Fingers Shoes For Sale</a> and services, no more than come to experience collaborative OA in just a particular development in principle, the type this articles or blog posts is identical to the initial, collaborative platform and <a href="http://www.asicsdiscountshoes.com">Asic Running Shoes</a> is tough to state someplace specifically where will certainly be the discrepancy in price.

Reply
07/18/2012 12:45am

Tips are really helpful for designing page on facebook.

Reply
09/30/2012 10:41pm

Excellent tips. Really useful stuff .Never had an idea about this, will look for more of such informative posts from your side.. good job...Keep it up

Reply
10/25/2012 3:52am

I was unaware of much of what you wrote about in your article. Your information was very helpful and I hope others feel the same. Wonderful work.

Reply

This is a great inspiring article. I am pretty much pleased with your good work. You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post.

Reply
04/25/2013 6:05am

A great noble article. My organization is mostly very pleased of an individual's great work. A person basically very useful information and facts. Keep it up. Store running a blog. Wanting to looking through your up coming document.

Reply
05/06/2013 7:33am

www.jeremyscottadidas2013.net sale Cheap Jeremy Scott Adidas,Jeremy Scott Wings 2.0,Cheap Jeremy Scott 2013,Jeremy Scott Logo Men,Cheap Jeremy Scott Shoes

<a href="http://www.jeremyscottadidas2013.net/cheap-jeremy-scott-2013_284_1.html">Cheap Jeremy Scott 2013</a>
<a href="http://www.jeremyscottadidas2013.net/cheap-jeremy-scott-wings-2-0-men_274_1.html">Jeremy Scott Wings 2.0 Men Cheap</a>
<a href="http://www.jeremyscottadidas2013.net/cheap-jeremy-scott-wings-men_276_1.html">Cheap Jeremy Scott Wings</a>
<a href="http://www.jeremyscottadidas2013.net/cheap-jeremy-scott-logo-men_278_1.html">Cheap Jeremy Scott Logo Men</a>
<a href="http://www.jeremyscottadidas2013.net/cheap-jeremy-scott-2012-men_270_1.html">Cheap Jeremy Scott 2012 Men</a>
<a href="http://www.jeremyscottadidas2013.net>Jeremy Scott Adidas Wings</a>
<a href="http://www.jeremyscottadidas2013.net">Cheap Jeremy Scott Adidas 2013</a>
<a href="http://www.jeremyscottadidas2013.net">www.jeremyscottadidas2013.net</a>

Reply
05/06/2013 7:33am

www.nikefreerunwebs.com sale Nike Free Running,Cheap Free Run Nike,Cheap Nike Free Run 5.0/2/3,Cheap Nike Free 3.0,Cheap Nike Free 4.0,Cheap Nike Free 5.0.

<a href="http://www.nikefreerunwebs.com/cheap-2013-nike-free-6-0-spider_270_1.html">Cheap Nike Free 6.0 Spider/a>
<a href="http://www.nikefreerunwebs.com/cheap-nike-free-4-0-olympic-running-shoes_286_1.html">Nike Free 4.0 Olympic Running Shoes</a>
<a href="http://www.nikefreerunwebs.com/cheap-2012-nike-free-run-3-mens_272_1.html">2012 Nike Free Run 3 Mens</a>
<a href="http://www.nikefreerunwebs.com/cheap-nike-free-run-2-mens_275_1.html">Cheap Nike Free Run 2 Mens</a>
<a href="http://www.nikefreerunwebs.com/cheap-kids-nike-free-shoes_289_1.html">Cheap Kids Nike Free Shoes</a>
<a href="http://www.nikefreerunwebs.com>Nike Free Run Cheap</a>
<a href="http://www.nikefreerunwebs.com">Cheap Free Running</a>
<a href="http://www.nikefreerunwebs.com">www.nikefreerunwebs.com</a>

Reply
05/06/2013 7:34am

www.cheapnikefreerun.pw sale Discount 50% Cheap Nike Free Run,Nike Free Run 2,Nike Free Run 3,Cheap Nike Free 3.0 V3,Discount Nike Free 4.0 V2,Cheap Free RunningShoes,Cheap Nike Free 6.0 Spider,Nike Free 4.0 Olympic Running Shoes

<a href="http://www.cheapnikefreerun.pw/cheap-nike-free-run-5-0-mens_273_1.html">Cheap Nike Free Run 5.0/a>
<a href="http://www.cheapnikefreerun.pw/cheap-nike-free-run-5-0-v2-mens_291_1.html">Cheap Nike Free Run 5.0 V2</a>
<a href="http://www.cheapnikefreerun.pw/cheap-nike-free-run-2-womens_286_1.html">Cheap Nike Free Run 2</a>
<a href="http://www.cheapnikefreerun.pw/cheap-nike-free-4-0-mens_281_1.html">Cheap Nike Free 4.0 V2</a>
<a href="http://www.cheapnikefreerun.pw/cheap-nike-free-3-0-v4-mens_279_1.html">Cheap Nike Free 3.0 V4</a>
<a href="http://www.cheapnikefreerun.pw">Cheap Nike Free Run</a>
<a href="http://www.cheapnikefreerun.pw">Cheap Nike Free Running</a>
<a href="http://www.cheapnikefreerun.pw">www.cheapnikefreerun.pw</a>

Reply
05/06/2013 7:34am

www.cheappumashoe.net sale Cheap Puma Shoes For Men,Cheap Puma Cat,Cheap Puma Sneakers,Cheap Puma Shoes For Women,Puma Drift Cat,Puma Elye Light Shoes,Puma Speed Cat.

<a href="http://www.cheappumashoe.net/cheap-mens-puma-ferrari-futute-cat_270_1.htmlt">cheap puma shoes online</a>
<a href="http://www.cheappumashoe.net/cheap-mens-puma-drift-cat_290_1.html">Cheap Puma Drift Cat</a>
<a href="http://www.cheappumashoe.net/cheap-mens-puma-speed-cat_277_1.html">Cheap Puma Shoes For Men</a>
<a href="http://www.cheappumashoe.net/cheap-womens-puma-future-cat-low_294_1.html">Cheap Puma Shoes For Women</a>
<a href="http://www.cheappumashoe.net/cheap-mens-puma-drift-cat-ii_282_1.html">Cheap Puma Shoes</a>
<a href="http://www.cheappumashoe.net">www.cheappumashoe.net</a>

Reply
05/06/2013 7:35am

www.cheapfreerunnike.org sale Cheap Free Run Nike,Cheap Nike Free Run 5.0/2,Cheap Nike Free 4.0 V2/3.0 V4,Cheap Nike Free Running,Discount Nike Free Run

<a href="http://www.cheapfreerunnike.org/cheap-kids-nike-free-shoes_270_1.html">Cheap Kids Nike Free Shoes</a>
<a href="http://www.cheapfreerunnike.org/cheap-new-nike-free-run_271_1.html">Cheap New Nike Free Run</a>
<a href="http://www.cheapfreerunnike.org/cheap-nike-free-run-5-0-mens_274_1.html">Cheap Nike Free Run 5.0 Mens/a>
<a href="http://www.cheapfreerunnike.org/cheap-nike-free-run-5-0-womens_275_1.html">Cheap Nike Free Run 5.0 Womens</a>
<a href="http://www.cheapfreerunnike.org/cheap-nike-free-run-2-mens_278_1.html">Cheap Nike Free Run 2 Mens</a>
<a href="http://www.cheapfreerunnike.org/cheap-nike-free-run-2-womens_279_1.html">Cheap Nike Free Run 2 Womens</a>
<a href="http://www.cheapfreerunnike.org/cheap-nike-free-4-0-v2-mens_285_1.html">Cheap Nike Free 4.0 V2 Mens</a>
<a href="http://www.cheapfreerunnike.org/cheap-nike-free-4-0-v2-womens_286_1.html">Cheap Nike Free 4.0 V2 Womens</a>
<a href="http://www.cheapfreerunnike.org">Cheap Free Running Nike</a>
<a href="http://www.cheapfreerunnike.org">www.cheapfreerunnike.org</a>

Reply
05/15/2013 11:55pm

I am happy to found such useful post. I really increased my knowledge after read your post which will be beneficial for me.Your article absolutely worth looking through.I recently found the application well penned and then quickly logical.Your blog is very impressive!!Nice post.

Reply
05/17/2013 3:43am

I am extremely anxious from this interesting post. It has amazing information which a person wish to find. I learned a lot of new things which explores my acquaintance in various developments. So I must be pleased about your efforts on posting this information. And hope you will be keep posting such an informatics post.

Reply
05/17/2013 3:54am

I believe the things you whatever you have enclosed, all the way throughout the post are peaceful striking, good job and great hard work. I found it very striking and enjoyed reading all of it...stay it up, good-looking job. Thanks

Reply
05/17/2013 4:08am

I am extremely anxious from this interesting post. It has amazing information which a person wish to find. I learned a lot of new things which explores my acquaintance in various developments. So I must be pleased about your efforts on posting this information. And hope you will be keep posting such an informatics post.

Reply
05/17/2013 5:03am

Honestly saying, excellent work. Today I have learn a new information from Your article. Thank you for posting, I am so glad by finding this link.

Reply
05/17/2013 5:48am

All Data in your Article is complete and Informative. It includes so many interesting facts. I am realy impressed with your Grt job Keep it up, I am waiting for your next Updation

Reply
07/17/2013 12:31am

All the efforts you put in the blog post is appreciable. Entire blog is informative. Looking forward to read more blogs and contents from you. Wish you luck!

Reply
08/06/2013 1:11am

Though you'll need to have final blueprints drawn up, designing your own home is the best way to ensure that you get exactly what you want. Follow these steps to get a head start on building the house you've always wanted. Thanks.

Reply

The article is clearly written and every point is factual and is no-nonsense. I have surf the internet looking for topics such as these and it is here where I find it written and stated well.

Reply
10/30/2013 1:52pm

I would like to thank you for your nicely written post, its informative and your writing style encouraged me to read it till end

Reply



Leave a Reply

    Follow Donya on Facebook Donya on Twitter Donya on Pinterest Donya on LinkedIn d*Sine Lab RSS
    The Designer
    I am Donya -- my friends call me "d." I'm 31 years old, from the suburbs of Southern California. I used to want an office on the 42nd floor somewhere in Midtown East. After graduating and working at three multi-national corporations, I got laid off in 2008 like everyone else did. I then started d*Sine Lab as my freelance alter ego. It's been an eye-opening four years for me, including having  two kids and moving from California to North Carolina...far, far away from NYC.

    Categories

    All
    Contracts
    Free Downloads
    Inspiration
    Tutorials

    Archives

    April 2013
    October 2012
    September 2012
    December 2011
    January 2011
    March 2010
    February 2010
    October 2009
    September 2009
    December 2008
    September 2008
    May 2008

    Picture
    Picture
    Picture

d*Sine Lab
Google+ Copyright © 2008-2013 by d*Sine Lab. A division of Inman Productions. All rights reserved.