You are here: Home » Blog » Blog » Social Media » Facebook » Basic HTML code for your Static FBML pages on Facebook

Basic HTML code for your Static FBML pages on Facebook

by Karen

Here are some basic HTML tags you might want to use on your Static FBML custom Facebook Fan Page tabs, or anywhere else you need a quick snip of HTML.

To make a word clickable to another website:

<a title=”whatever the name of the linked page is” href=”http://www.whateverwhatever.com”>word you want clickable</a>

To insert a picture:

To insert a picture so that it is linked to a website:

To skip down to the next line:

To skip a whole line between items:

To center something:
<center>whatever whatever</center>

To make words BOLD:
whatever word you want bold

To make words ITALIC:
whatever word you want italicized (that is the etter “i“)

To change the font size (1 seems to be normal small font, go up from there by changing the number and saving, then checking it):

whatever word(s) you want larger

Note: You can add multiple tags to a section, but you must always have a beginning tag and a “closing“ tag (like </whatever>) in the reverse order in which you opened them, so that the pairs of tags (opening and closing) “hug“ the item. Ex: This is bold and italic!

So play around with it, always save your work, and TEST it out. You can always go back and edit to change it back or try something different.

Do you need to know any others? Let me know in the comments!

UPDATE: Facebook now has a limit of 520 pixels for any images/tables on a custom tab. If you’re having trouble getting something to load, make sure it is sized to less than 520. You can edit graphics free at picnik.com or your own image editor. (note that sometimes you need to rename the file to get it to work!)

ALSO if you’re having trouble when you copy/paste code from this blog post, paste it into a plain text document first – completely plain text – since the “curly quotes” I have on this blog do not work on Facebook!

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered by email or to your feed reader. In addition I'd love to keep you up to date through my email list. I'll send you a free report in return!

Tagged as: code, design, Facebook, FBML, HTML

{ 148 comments }

Next Comments →

Nicole Hore January 23, 2010 at 12:42 am: Thanks so much for doing this Karen.

People are charging to do this for others (around $25), and you have been gracious and generous enough to post how to do it here at no charge.

Your Fans will appreciate your thoughtfulness xox
Karen Follow me on Twitter: mybizpresence January 23, 2010 at 12:53 am: Thanks Nicole! Being a big do-it-yourselfer I believe in teaching people how if learning how to do it on their own is how THEY operate. Of course if someone wants me to do it for them, that works for me as well! Take care!
Karen
Lois Graham Follow me on Twitter: loisgraham January 23, 2010 at 7:32 am: Thanks for the helpful information Karen! You’re super!
Imran February 7, 2010 at 2:32 pm: Thanx Karen.. for sharing such a good info. Pls tell us more like… how to make background color and the background image ? Also pls tell me the commands used for making sub tabs( under Single tab).. Or if u want to share some more info with us… Pls Reply asap !!
B February 20, 2010 at 8:00 pm: great work karen! thanks for sharing this with all of us. im trying to set up something for a not for profit and this has been a great resource! would you be able to tell me how to use an image or a colour as a background? i’ve been playing around with creating boxes and text from the developer pages on fb, but can’t seem to figure out the background …

thanks,
Karen Follow me on Twitter: mybizpresence February 23, 2010 at 5:49 am: Imran I don’t know how to do sub-tabs, would love to see an example of what you are asking? B (and everyone) here is a page that gets into more customization of FBML and it may help!

http://www.hyperarts.com/blog/tutorial-facebook-pages-with-static-fbml-application/

Karen
Jurgen March 3, 2010 at 7:00 am: How do I set a background image?
Karen Follow me on Twitter: mybizpresence March 3, 2010 at 8:29 am: Jurgen, Imran and B – Great Question about background images! Here is the code, I tried it and it worked. You may have to mess with the height and width settings. Also this is set to NOT be tiled but you can eliminate the no- if you want the image repeated.

Replace the { and } with < and > after you copy this, and replace http://yourURLhere.jpg with your actual Image URL

{div id=”app0000000000_bgImage” style=”border:none; position:fixed; left:0; top:0; width: 755px; height: 720px; background-image:url(http://yourURLhere.jpg); background-repeat:no-repeat; background-position:top”}

Good luck! If it works let us know your page address and we will check it out and oooh and aahh!

PS: Background color is the same as in regular HTML:

{div style=”background-color:red;”} {/div} (Replace the { and } with < and > and replace red with whichever color or hex code you like!
Karen Follow me on Twitter: mybizpresence March 3, 2010 at 8:31 am: Here’s a super nifty page where you can TEST your FBML code! Hooray!!

http://developers.facebook.com/tools.php?fbml

Hit Preview at the bottom to see what it would look like before you install it in your page! Voila! Brilliant!
Scott March 4, 2010 at 11:22 pm: Karen,
I’m having trouble inserting a picture. Do they have to come from someplace like photo bucket or can I use one that is just a jpg file on my computer? ps. Glad I found your page. Its been a huge help!!
Karen Follow me on Twitter: mybizpresence March 4, 2010 at 11:40 pm: Great question Scott! For using HTML/FBML you need to have an actual URL for the picture – http://www.somethingsomething.com/something.jpg
The best way to do that is through something like photobucket or my personal favorite http://www.flickr.com It’s free and fairly easy to upload pictures there, then view the picture in “all sizes” and it will give you the URL to insert into your code as described above.
Let me know how it goes!
Karen
Hubezi March 9, 2010 at 2:34 am: U R Amazing! TNX )
Milan March 11, 2010 at 5:25 pm: Hi Karen,

It’s well past midnight and I’m sincerely thanking you for the instruction you put up. I’m having problems with the background image though. The code you gave us earlier, where abouts do you put it, at the beginning? end ? any advice will be very helpful.

cheers
Milos March 21, 2010 at 3:26 pm: how to position text or image?? beside: and ???
Karen Follow me on Twitter: mybizpresence March 23, 2010 at 8:39 am: I just came across another html code resource for FBML, it includes the {big} and {small} code:

http://johnhaydon.me/allowable-html-for-facebook-pages-a-cheat-she
Walter Day March 31, 2010 at 12:21 am: Thanks so much for this article! I’ve been googling for the past 2 days in an effort to add a background image to the page I’ve been working on ( http://www.facebook.com/pages/HeavenLee-Photography/10150139131100182 ) and finally got it to work after reading through your article and comments.
Walter Day March 31, 2010 at 6:14 am: Thanks for getting back to me, Karen, I was worried you’d seen my question and facepalmed in disgust haha… My eyes are burning from all the searching I’ve been doing.

I had already considered the idea of creating an image but I’m thinking that may just cause more frustration on my end… The tab (More of My Art) from the page I linked above is the one I wanted to use the style on, and it has images as links. Creating an image, of the images, will destroy the links I’ve created. I could maybe make it work anyway, by using the pink background and the text put together as the background, and just insert a bunch of line breaks… Hmm, I may do that, actually. I’ll let you know how it turns out.

Thanks again so much for the help. =)
Karen Follow me on Twitter: mybizpresence March 31, 2010 at 8:24 am: Walter – do you have access to an html editor thingee? If so you can create a table to load different images into cells across the page. That might help. In fact one of the easiest things to do is create the look you want in an html editor and then copy/paste that into FBML as long as there’s nothing too fancy.

That is what I did on this fan page: http://www.facebook.com/funfeltforkids?v=app_4949752878&ref=ts

In fact now that I look at it again I see I used a different font! So it can be done, I just forgot. LOL!

Try {font face=”fontnamewhateveritis”}text you want in that font{/font}

Replace { and } with < and > The only thing is it would need to be a common web-friendly font recognizable by most browsers. Try it out and have some fun with it like I know you will! hehe
Walter Day March 31, 2010 at 11:36 pm: Thanks for the tip, Karen. Although I can’t seem to use the font I wanted, at least it does work, so I can figure something out. Know of a good cursive or neat (read: girly? lol) font?

After hours of trying to keep my text from falling right on the wall of an image, I did use your idea of making an image for another tab, which encourages users to add a fan badge to their page. So far I have the badge on the top left, my image with the writing on the right, and a text box at the bottom, with the code enclosed. As it is, users can copy and paste the code from within the box, but I wanted to add a button to simply copy it over. Using code I found at http://www.htmlgoodies.com/beyond/javascript/article.php/3458851 I’ve tinkered with it quite a bit in an effort to make it work, but it has me stumped. The button doesn’t actually copy the contents of my text box, and if I put the badge code into the area it creates a second badge on the page. Do you have any suggestions?
RAKS April 3, 2010 at 1:11 am: How To Change the color of the font?
RAKS April 3, 2010 at 12:51 pm: Thanks Keren… 1 More question…
How To Leave Space From Starting And write after 4-5 spacings?
Pangph88 April 14, 2010 at 7:54 pm: Im still new here..how can make the FBML code ? thx
got any video clip or easy part to learn?
Jennifer April 22, 2010 at 9:43 pm: I would like to use a button I created and saved in Flickr and have it appear on my wall (left side) and link to website when clicked. Thank you so much for all your help.
Desperately Seeking Solution.
Jen
Karen Follow me on Twitter: mybizpresence April 26, 2010 at 11:30 pm: Hi Jen!

First you will need to add Static FBML to your page, then create a page for the item you want to add. (There are more instructions on that in the previous post).

Then when you are in Edit Page and editing that FBML page…

First go to your Flickr account and click Photo Stream. Click on the picture you want and then click the magnifying glass that says “All Sizes” then pick the size you want. Under it, there will be a URL you can copy and paste into the FBML code. You would use this code (changing the { and } to < and >:

{a href=”http://www.whatever.com/linktoexactpage.html” target=”_blank”}{img src=”http://www.flickr.com/picturename.jpg” alt=”whatever this is a picture of including a keyword or two” border=”0?}{/a}

Then save that FBML page.

Then go to your Wall on your Fan Page and click the + button on the far right of the tabs to add that page to the available tabs.

I hope that helps!
Karen
usbarlas May 1, 2010 at 4:58 pm: please help me.. i do not understand the font size part,….
usbarlas May 2, 2010 at 4:51 pm: i do not undersatnd..give me example
seyed May 3, 2010 at 1:12 pm: Dear Karen! i just tried to link my profile in a facebook page using your Example but it doesn’t work. i don’t know why. but its working as a broken link. if i click on it the same page not my profile.

here is that link (i just edited ur example)
Seyed Askar
georgia bott May 5, 2010 at 2:39 am: i have a facebook page. i have made a boxes tab with a text box and a picture box. i want the text to come up before they have become a fan. but i want the picture to come up after they have clicked become a fan. and not before
Robert May 6, 2010 at 3:25 am: Karen, huge favor to ask. I am trying to create a simple chart with 3 cells across (Beer, Style, Rating) then have it where I can have as many rows down as I want. Do you have a code for that? I found a link with one, but it was about 2 years old and will not work anymore. Thank You
Zam May 6, 2010 at 10:22 pm: Hey Karen,

“God Bless You”! I was struggling to spruce up my companies FB page and managed to get some info on FBML, but that’s where I got stuck. I had no idea what to do after I got the FBML tab in place. Thanks to you post here and the subsequent responses and comments from other users, most of my work is done.

Now comes the place, where I ask for help on something I have not been able to figure out, yet.

1. I have an image that I am trying to make as the background of my welcome page, and for some reason it’s just not happening. Please help

2. I would like the background color of my welcome page to be of a particular color. Any idea how to do that?

Really appreciate all your help and the questions raised by other users.

Cheers,
Zam
Zam May 6, 2010 at 11:30 pm: Hey Karen,

In addition to my earlier query, would also like to know:

1. How to bring in line spacing between two lines in the same paragraph?
2. How to justify a paragraph?

Cheers,
Zam
Lindy May 10, 2010 at 1:01 pm: Thanks very much- very useful for a non HTMl – er like me – managed to make my facebook FBML page look a little decent;)
Jennifer May 11, 2010 at 9:47 pm: Hi – Would you know the onmouseover fbml code? I have tried several ways and have not been successful. Thanks in advance for your help.

Jen
Robert May 12, 2010 at 8:45 pm: I tried the tips on the website you gave me to try to make a table in fbml. The html code though will not work in fbml. I am trying to find all the code that sets up the table, then I can use the html examples
Robert May 12, 2010 at 10:10 pm: I only need 4 cells across. How can I make the table spread all the way across the page to fill all of the blank space? Or add in some type of graphics to the sides? I know this is a little in depth. Thank you
Ashley May 13, 2010 at 7:45 pm: This is so wonderful! I am wondering if you could help me. I am trying to make an image a clickable link, but the link keeps linking back to facebook even thought I have the web address in the code. Here’s my code:

Any ideas?
DyaaBelal May 16, 2010 at 11:23 am: Hello Karen, thanx for this guidance.
but i do have a problem .. the code for the clickable word doesnt work with me ..

i did the same steps you said .. and Facebook always adds more to the link ..

(?_fb_fromhash=dada57494970f6fa992bb2982e7b2f7e) << it always add this .. so the link doesnt work ..
Jarelle Follow me on Twitter: Jaeila May 16, 2010 at 3:24 pm: how can i change the font and the font color?
Jarelle Follow me on Twitter: Jaeila May 16, 2010 at 3:25 pm: how can i resize a picture?
DyaaBelal May 18, 2010 at 12:38 pm: Karen, Am tryin’ to post my blogspot page. like most of fanpages do.
i have some troubles in dealing with (FBML), i could post an image but i couldn’t make a hidden content that appears after the member joins. – also the link that doesnt work ..

that’s the link
( http://opether.blogspot.com/2010/05/twenty-one-condom-ads-you-never-saw.html )

Thank you in Advance !
Alexa May 19, 2010 at 8:19 am: Hi Karen! Im trying to create a static FBML page and i was wondering how you would go about requiring people to like your fan page before they saw some special content like a video lets say.
Jarelle Follow me on Twitter: Jaeila May 20, 2010 at 2:42 pm: how can i change the font? like forte or anything?
Ashleigh May 24, 2010 at 7:00 pm: Hi Karen,

I am creating a fan page for a business and I have already added Static FBML and have creted a few tabs, but I would love to insert pictures in the tabs. I read the posts above and I still cannot get the images to work. I went through photobucket because that is what I am familiar with, but when I use the codes above I get a pop up that says the image has been moved or deleted, but I have no changed them. Please help! Thank you so much, this website is amazingly helpful.
Hannah May 24, 2010 at 10:34 pm: Very helpful, thanks!
Yvonne May 28, 2010 at 12:24 am: First… you rock! )

Now, my problem. I am not a coder, so I have cut and pasted your code for inserting an image, using my url from where it is stored on my website. My FBML box/tab is still blank. What the heck am I doing wrong? Tx!
DANIEL May 28, 2010 at 6:01 pm: Hey Karen,

Thanks for the codes! I’m having a problem though. For some reason, the link to another website is not working for me. Here’s the code I used: APPLY

When I click it, I’m taken to a page on facebook that says the page you have requested cannot be found. It says “You may have clicked an expired link or mistyped the address. Some web addresses are case sensitive.”

Can you see if I did something wrong?
DANIEL June 1, 2010 at 5:48 pm: Hey karen, thanks for the help. I work on a mac and was inputing the code correctly, but when I pulled it up on a pc, the quotation marks looked different, so I deleted them and then put them back. And now the links work!

Also, I’ve put pics up from flickr, but each picture is clickable and when clicked take you to my photostream on flickr. Is there a way to make them unclickable?
Kimberly June 2, 2010 at 3:44 am: How can I indent my entire FBML page content or set a left margin? (Look at http://www.facebook.com/socialnetworking4biz. All of the content got pushed to the extreme left edge of the screen when Facebook did one of their updates.)

Thanks much!
Kimberly
Huy June 2, 2010 at 7:02 am: Hey Karen,
I love your page so much, this’s what I’m looking for to learn more about FBML. Thanks for your sharing! ^_^
katherine hoppe June 2, 2010 at 7:31 am: Love this site, thank you thank you! I do have a question though, can you insert an email address in and have it clickable? If so.. how?