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 }

← Previous Comments

amy August 26, 2010 at 3:49 pm: how can i have a picture this big in a tab?
http://www.facebook.com/?ref=home#!/NesvitaPakistan?ref=ts
i am using the simple <img src=”http://www.whereverthepicturelives/picturename.jpg” code ! but i am limited to 520 px only due to new facebook rules, how come everyone else still has pictures this big ! i need a code help help !
faraji August 30, 2010 at 1:45 am: thank you this really helps. i have the fbml fan page app and novice knowledge of html.fbml codes. when the tabs are selected within the app it opens up a new window for the website or pics, instead of showing inside the app like its supposed to. how do i fix this? you can call me if you need to 347-878-1574 thank you kn advance
Kara August 30, 2010 at 9:45 pm: How do I get text to feed next to a picture in a custom FBML tab? I know how to set it up in HTML, but that doesn’t seem to work. Is it possible? An example of what I’m trying to do: http://www.premierhcs.net/ed_brochure.asp

Picture to the right, text flowing next to it on the left
Phil September 1, 2010 at 2:45 am: Hi. Fantastic article!
I copied your code to insert a picture linking to a website and saved changes to the FBML box. When I click the tab, I get the red “X” inside the box and when I right-click to show pictures, nothing happens. The link is functional and the alt-tag shows, just not the photo. The photo itself is a JPEG 520 pixels wide and is hosted on Flickr. Any ideas would be greatly appreciated. Thanks!
prosy September 1, 2010 at 1:16 pm: can you tell me please why the that i put on my page won’t work. this are the codes that i used:
Julie September 2, 2010 at 12:24 am: What’s the code for wrapping copy around a photograph?
Chris September 6, 2010 at 3:16 am: When I use the code for linking text to an external site, it goes to facebook.com/”the name of the site” rather than actually going to the site. Any suggestions?
Nicole September 6, 2010 at 5:59 pm: Hi there,
Using a templet I have edited this FBML ‘welcome’ page with these two boxes. Do you know what part of the code do i need to duplicate so that I can add more box-look alikes further down the page?

#container { width: 520px; }
#containerLeft { width: 320px; }
#containerRight { float: right; border-left:1px solid #D8DFEA; width: 184px; }
.imageContainer { margin: 0 auto 0 auto; text-align: center; }
.box { border-top:1px solid #94A3C4; position:relative; }
.box .box_header {background:none repeat scroll 0 0 #ECEFF5; border-top:0 none; display:block; padding:5px 8px; position:relative;}
.box .box_content {padding:10px 8px;}
Tawny September 10, 2010 at 2:31 am: Hi Karen,

Thanks for the article. Can I use an image map in an FBML box? I have some HTML code that works great outside of FB, but once I paste the code in an FBML box I lose the links (picture is there). Here’s the code. Maybe I’m missing something?:
Stephanie September 10, 2010 at 5:27 pm: Hi Karen,

I am new to FBML and HTML. I’ve been working on my business fan page and almost have it the way I want. Problem is, I can’t get the font size to change. I’ve changed it to everything under the sun, but it doesn’t affect the text as it appears on my tab. Here is the code I’m using…

<TD width=241 bgColor=#ecb717 height=181 Stephanie and Jeremy Brady

If you want to view what I’m trying to achieve, you can visit…

http://www.facebook.com/stephanieandjeremybrady?v=app_4949752878

Thanks!
Tawny September 11, 2010 at 12:36 am: Karen,

Thanks so much for your response. I used the image map tool that you mention above and I finally was able to make it work, thank you so much for posting this information!
Riddhi September 15, 2010 at 1:57 pm: Hi Karen ,
I am absolutely new to the concept of FBML.
Having some issues designing my page.
I designed everything using FBML and , But i dont know where i can find the canvas size. any ideas?
Africa September 15, 2010 at 10:33 pm: Hi Karen,

I have an image that lives here: http://store.barefootbooks.com/media/catalog/product/cache/1/image/540×425/e5c3f25dbe2a3021345b55270d5894a1/D/a/Dance-Stories-UKUSHBCD_W.jpg

I tried pasting this code using the instructions above but the image doesn’t show on my fan page.

Here is my specific code with image location and where I want it to take viewers:

Thanks!
Brenda September 16, 2010 at 1:06 am: Hi,
I hope you can help.
I want a space between the two images below the main one on this page.
http://www.facebook.com/pages/Langley-BC/Langley-Fraser-Valley-Real-Estate/130878596960359?v=app_4949752878

Here is the code for the images and links but not sure how to ad a space between the two images and have them centered below the main image.

Thanks so much in advance!
Bobby Follow me on Twitter: bobbyhagstrom September 17, 2010 at 12:19 pm: Thanks, Karen! I was editing my Welcome landing page and was looking for FBML code and you had exactly what I wanted, but now I found you have so much more! I bookmarked your site…really awesome stuff.

By the way, I filled out your opt-in form, and I got the error message:

» An invalid Interest Group was selected.

Am I missing something? I checked “solo-preneur”

Bobby
Rania September 17, 2010 at 2:57 pm: Hi….. I wanted to know something. Is there any other way to show my website in static FBML BOX rather than using picture or text linking to it? Thank you
mizboat September 21, 2010 at 5:17 am: Thank you sooo much! I just used this info to really freshen up my FB page: http://www.facebook.com/babyboat1?v=app_4949752878. I couldn’t work out how to bold, italic, centre or anything, so this is fantastic. I just completed fixed by page, and am very happy! Simple but practical advice Thanks so much!
Rik September 24, 2010 at 3:24 am: http://www.facebook.com/pages/Doncaster-United-Kingdom/Olive-Tree/109463959282?v=app_7146470109

Great article, however I need some help. On the above link I have one image with no link and under that another with a link to a pdf. This all works fine, but I get a gap between the two. Can you tell me please how to remove this gap.

Kind regards Rik
Colleen September 27, 2010 at 11:09 pm: I have what I think is a simple request. I want to create an FBML tab that looks and functions just like the current Wall—I just want to remove the ability for others to “comment/like/promote” on my posts. Any ideas? Then I will copy the FBML code to the the wall of my business page. Thanks for your help!
Deena September 28, 2010 at 12:34 pm: Thanks so much for the help!
Tyler September 28, 2010 at 11:47 pm: I have an image that I would like to place in FBML. The image is too big and I understand that it has to be 520 pixels, so I resized the image to the appropriate pixel size and now it is saved on my computer but it doesn’t have a url. How would I insert the new correct size image into FBML if it is saved on my hard drive. Great post by the way, helped me out alot.
Andrew September 29, 2010 at 4:30 pm: Hello there to everyone…
I want to make a comment form to my page…is that impossible ?
Lisa September 30, 2010 at 6:47 am: I want to add a way for people to message me on my ‘fan’ page…I want them to be able to do this anonymously…any ideas???
cindy October 3, 2010 at 11:12 am: Hi Karen. Thank you for your article, it is very helpful. I am new to html code and am having problems. All I want to do right now is show my portfolio photo in my FBML box. So, all I would need is an img src right? I uploaded my photos on Photobucket, created a 9 img pyramid and grabbed my img code. Well, a box with a “?” is all I see.

Here is my code:

Am I missing something?

THANK YOU IN ADVANCE
cynthia October 4, 2010 at 5:21 pm: I lowerd the width and still, nothing. Yes, it is a jpg. I must be missing something very simple. Here is my code, thank you so much Karen!

{img src=”http://i794.photobucket.com/albums/yy223/Cynthia_Levesque/Identitly%20Design/Ink-Trotting-1.jpg” width=”460px” height=”402px” border=”0″ alt=” “}
Matt McMaster October 4, 2010 at 6:54 pm: I am trying to add indents to the first line of paragraphs using other code that I have found, but nothing seems to work. I have bookmarked your page as this is awesome for introductory stuff. Is this something you can add to the above tutorial? Our fan page is http://www.facebook.com/cmsomaha and I am trying to edit the contest voting box, if you need to look it up at all. Thank You.
cynthia October 4, 2010 at 7:39 pm: Karen I got it to work. I reuploaded my photos to Photobucket and they worked. Not sure what happened. I do have large gaps between my photos. I cropped each one so there isn’t any white space above or below, and I did not use any “breaks {br}” in my code, but still….big gaps? Thank you!
Matt McMaster October 4, 2010 at 9:20 pm: Thank you. That worked awesome. I appreciate your help!
cynthia October 6, 2010 at 12:09 am: Karen…I just wanted to say THANK YOU for all your help. I am much more comfortable with the software now and you were a tremendous resource. I changed the site up some, just waiting on some more product photos to move forward. THANK YOU for becoming a fan
Julia October 11, 2010 at 4:44 am: I am having a lot of trouble inserting my banner image into the FBML box. This is the code I’m using:

An empty square shows up, so the outline of the image is there, but not the actual image. I have tried altering the code in every single way imaginable and nothing seems to work. Could it be the image link from photobucket? I’ve tried using the image source link, the URL link and the HTML link photobucket provides and nothing works.

Many thanks,
Julia.
Tony Green, Realtor October 12, 2010 at 2:22 am: Hello Karen, I have created a FBML page, however I would like to keep the content private until someone “likes” my page. I’ve scoured the facebook developer forum, but can’t seem to find it. By chance, do you know the code?

Here is my link: http://www.facebook.com/winstonsalemhomesforsale?v=app_4949752878

Thanks!
Tony
Kristin October 12, 2010 at 8:44 pm: Hi, I added a new tab with fdml to a corporate page at facebook but I can´t put pictures or texts that link to a web page there.
I did exactly what you said here above;
Heres an example

SKY

I do not know what you mean by “picturename” though.

Can you please tell me what I´m doing wrong?

thank you
jerry. October 15, 2010 at 7:41 am: I have created an FBML page in Facebook, but I CANNOT get the hyperlinks to work AT ALL. I have stripped everything down to very basic CSS and HTML, but the links just DO NOT WORK!

Here’s my code…

p { font-size: 2em; }
a { color: red; }

This is a test.
This is a test. It should be hyperlinking to Yahoo, but it’s clearly not working.

It gets NO SIMPLER THAN THIS…does anybody have any idea why hyperlinks aren’t working in the Facebook “boxes?”
Asif Ali November 4, 2010 at 5:12 am: this really helps me a lot. People like you are the best example for us …. thanks a million.
Jake November 7, 2010 at 12:17 pm: Hey I’ve read some of your hints and they’ve been a great help. I was wondering if you could help me with something. I have attached links to words, created spaces before the next word, and the “link” carries over to the next word. How do I get the “link” to end? Thanks!

Ohio Zoo Locator

Amusement Parks

Here I do not want “Amusement Parks” to be a hyperlink, but it is and every space above it is too…
Jake November 7, 2010 at 12:20 pm: oops, i thought it would just show the text but instead turned it into a link. sorry.

a href=”http://www.officialusa.com/stateguides/zoos/ohio.html target=”_blank”a

Ohio Zoo Locator

font size=”3?>Amusement Parks
Cynthia November 8, 2010 at 8:49 am: Hi Karen! I have a question, not sure if you have recieved this one yet…

Can I add my coding for an OPT-IN (eNewsetter sign up on FB) into a graphic? So that the opt-in box is actually part of the jpg????

If you follow this link, you will see what I am talking about:
http://www.facebook.com/DrShannonReeceFans?v=app_7146470109

THANK YOU IN ADVANCE!
kelly November 11, 2010 at 5:10 pm: You saved my life today! Very useful information!!
Sidd November 15, 2010 at 12:44 am: Thanks for sharing a good information, Can I create comments option on FBML page? if yes than how? if you have any code plz mail me or publish here.
Thanks
Sidd
BRKA December 1, 2010 at 9:21 am: TNX… YOU REALLY HELP ME!
Patrick @ Frat Music Playlist December 16, 2010 at 1:18 am: Ah, you are the best! I was looking for the FBML image dimensions and you not only had that info but pretty much everything else I was looking for

Thanks big time!
hannah December 16, 2010 at 7:11 am: this was so simple, and so extremely helpful!
from a girl who has no basic knowledge of html, i was able to complete a html task!

THANK YOU!

any suggestions for good resource/book for html 101?
Vicko December 27, 2010 at 11:23 am: Do u now some FBML font codes?
jack December 31, 2010 at 4:13 pm: karen,

hi! after googling all over for 2 days, finally stumbled upon your very helpful post. THANK YOU! i finally have a useful landing page without having to pay monthly.
Sky January 4, 2011 at 9:17 pm: Hi Karen,
Any suggestions where or how to start of having a moneyclub19.com as a fan page and use FBML?
Aaron Lemley January 13, 2011 at 10:32 am: I would like to embed an email sign up. So that anyone can punch in an email address and we have it. Any suggestions on how to do that would be much appreciated!
Karen Follow me on Twitter: mybizpresence January 15, 2011 at 2:17 pm: Hi Amy – not sure, there was a time when the older sized images were still allowed but new ones had to be 520 but now they are all 520.
Imran January 17, 2011 at 11:21 am: See this: for FBML Codes and examples : http://imransarwar.com/index.php/static-fbml-examples-for-facebook-fan-page/
FBML Examples : http://imransarwar.com/index.php/static-fbml-codes-examples/