You are here: Home » Blog » Blog » Social Media » Facebook » Basic HTML code for your Static FBML pages on Facebook
Karen Clark Online Presence Speaker Trainer

Basic HTML code for your Static FBML pages on Facebook

by Karen

in Facebook

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:

<img src=”http://www.whereverthepicturelives.com/picturename.jpg”>

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

<a href=”http://www.whatever.com/linktoexactpage.html” target=”_blank”><img src=”http://www.whereverthepicturelives/picturename.jpg” alt=”whatever this is a picture of including a keyword or two” border=”0″></a>

To skip down to the next line:
<BR>

To skip a whole line between items:
<p>

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

To make words BOLD:
<b>whatever word you want bold</b>

To make words ITALIC:
<i>whatever word you want italicized</i> (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):


<font size=”3″>whatever word(s) you want larger</font>

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: <b><i>This is bold and italic!</i></b>


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 }

housam June 5, 2010 at 2:35 am

hi karen
i had spend the last 4 days traying to add my youtube channel to my fb page via fbml.. youtube give me the empad code:

what code should i add to my fbml?

please help me

thanks

Pingpong June 7, 2010 at 7:40 pm

How can i get it so it shows a link when you have liked the page, but when you have not it says “Like to see” ? Please would really help

Christina June 11, 2010 at 1:14 am

hi there
thanks for your post above – very helpful. in our facebook page i am trying to customize the fonts in fbml – what is the code?

Naomi June 17, 2010 at 5:57 am

Hi, thank you so much for your guidance. My question..I have a Facebook Page and have a YouTube Custom Player coded into my FBML box/tab. So my src image appears…you click on it and the YouTube player appears playing my video. Great! BUT, I’d like to click on the image and have the YouTube player open up as a Pop Up Window (on top of the Facebook window). I know how to set it to open in a new browser window but it covers the current window and is too distracting. After snooping for hours it seems only JavaScript can do this which Facebook doesn’t support. Thank you kindly!

Liz June 18, 2010 at 9:14 pm

Hi! I think this question might be a dumb one for you, but I want to know where to find templates for a fb tab I am creating for my biz’s fb fan page. I know how to create a fb tab, I just have no idea how to create content for it. I dont know HTML, but I understand how it works. I have used wordpress for a blog and suspect I would have to create a static page and then insert the HTML into the FBML…but I dont know…can you help? Thanks so much!

Dentinal Tubules June 18, 2010 at 9:39 pm

Just used the following code for the Static FBML app
Click here to join us on our site

However when we click on the link, it goes to http://www.facebook.com/pages/wwwdentinaltubulescom/298840940065?v=app_7146470109#!/www.dentinaltubules.com%E2%80%9D?_fb_fromhash=6c87a48755f70f06be43f7f60ffa09e1

Instead of directly to http://www.dentinaltubules.com

Does FBML not allow direct links to websites?

Jeremy June 20, 2010 at 9:19 pm

I am new to FBML
Basically I am just trying to insert the home page of my website into facebook.
Here is my home page
http://www.alabamaerosioncontrol.com
I clicked view source and copied the html and pasted it in the fbml code section but when I click on the tab it is blank and doesn’t show anything.

I even tried creating new page with a smaller width but still nothing.

What am I doing wrong here?
Am I completely missing something?

Santiago June 23, 2010 at 11:17 pm

Hey,

How do you reveal content on your Facebook Page only when someone clicks like?

like on some fanpages it says “CLICK LIKE TO SEE THE SCARY PICTURE”

then when you click “like”

you see a picture…

una June 25, 2010 at 7:12 pm

Hi Karen,

What would the code be for inserting a swf file

black June 26, 2010 at 5:43 am

Hi, what if I want to put a table? what is the code?

Lilly June 26, 2010 at 7:33 pm

Hi!
how can I color the letters in my text for a facebook fanpage?

Dentinal Tubules June 28, 2010 at 11:54 am

Hi
Can I embed my website onto my Fan Page using static FBML or Iframes?
I have tried the fb:iframe tag but this does not work.
Does fb allow this ?
If not , how do I provide a preview of my site on the fan page ?

Hari July 2, 2010 at 2:04 pm

Sorry i give full code…In FBML page i want to link page to other website ex:Google Spread Sheet But Its not workn…Wat code shall i use….

{A title=”MPG” HREF=”https://spreadsheets.google.com/pub?key=0ArW8i8b9-TJmdFk3bTdPU3dKSDMxa0V6dEI3X0hBd1E”}Click here fr topics{/A}

Is this Code Crct… Pl Help Me….Tnx n adv…

Richard Harrell Jr. July 4, 2010 at 4:31 am

How would I go about adding a .pdf file to the page?

Bernhard July 4, 2010 at 9:56 pm

Hi!

First of all, thanks for the simple and very practicable instructions!
- but I have a problem using your command. I used a direct link to a “google-picture”, and it didn’t work. Can you help me?

jayar049 July 5, 2010 at 7:14 am

karen can you create me a FBML to my welcome page ….. plzz reply tnx… :) )

Christina July 5, 2010 at 6:08 pm

Hi Karen, I wanna ask, how to make words on picture clickable??

Rebecca Williams July 7, 2010 at 1:40 am

Karen,
First of all thank you for the information in your post, I have some html experience and I am constantly frustrated by using tags facebook does not support. This is what I have input so far:
SpringHill Assisted Living
Family Nights at SpringHill
<A title=”SpringHill Assisted Livng by Americare”

However, the only thing that is appearing in my static fbml tab is “SpringHill Assisted Living” and “Family Nights at SpringHill”. Help!?

Thanks,
Rebecca Williams

Mary July 10, 2010 at 8:17 am

I tried the above code to change the background color but it didn’t work.

Any other suggestions?

reyver July 11, 2010 at 10:03 am

i would like to ask if where i am going to start? is FBML same with HTML code???
when i write a HTML its always starts with

the same procedure with FBML?? pls answer… thanks :D D

Daniel Doherty July 14, 2010 at 10:41 pm

I researched Branding Facebook Fan Page experts & help tutorials too : ) – Happiness Evangelist: http://bit.ly/bAUMAQ

kara July 16, 2010 at 9:38 pm

Hi Karen,

I have been trying to link this picture: http://www.delish.com/cm/delish/images/dennys-logonew.jpg
to this website http://www.nationalfranchisesales.com/
for the past few hours.

I used the code that you provided above but i cant get it to work. Please please please help!

Thank you!

kara July 19, 2010 at 8:52 pm

THANK YOU!!!

you are AMAZING!

Hugh July 20, 2010 at 5:49 am

Hey karen i was wondering if it is possible to have an input text box on a page that stores what a “liker” of the page has put into it and submitted?

Alex July 20, 2010 at 6:23 pm

Hey,

When inserting a picture to be linked to a website it hasn’t been working for me and the only conclusion that I can come to is in the target=”_blank” oart, I’m not sure what to put in the blank section…what do I do there?

Emma July 21, 2010 at 6:02 pm

OUPSS!!!! SORRY
Well that what it does!lol

{style type=”text/css}
{!–
body {
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(‘http://i867.photobucket.com/albums/ab235/emmanuelleLarsen/fmdmfinal.jpg‘);
}
a:link {
color: #000;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #f244a9;
}
a:active {
text-decoration: none;
}
.MODEFMDM {
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
color: #000;
font-weight: bold;
}
.ONGLEFMDM {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #000;
}
.LIRELASUITE {
font-family: Arial, Helvetica, sans-serif;
font-size: 7px;
color: #000;
}
–}
{/style}
…….

Djuly July 23, 2010 at 8:19 pm

Hi Karen,
Thanks a lot for your site, it’s really helpfull! Maybe my question is a bit dumb for someone who knows a lot about FB, but I don’t… well I would like to know if your picture HAS to be on the Web to be inserted on a FBML page or is it possible to upload a picture from a file?
Thanks in advance! :)

RemMem
Follow me on Twitter:
July 27, 2010 at 11:00 pm

Hi Karen,
Great post! I’ve been playing around with setting up an FBML page for awhile now and can’t figure out the HTML behind it. I’ve tried using Dreamweaver to create the code and I’d tried using your suggestions, to no avail. I’d like to include 3 different image maps on one image for a Welcome page, but I can’t even get the image to appear without any links. This is the code I was using, any suggestions? Thanks!

{a href=”http://www.remakingmemories.com/”} {img src=”http://www.remakingmemories.com/FacebookFBML_Welcome2.jpg”} {/a}

RemMem
Follow me on Twitter:
July 28, 2010 at 6:44 am

Oh, that is a total bummer! Thanks for letting me know. I guess I’ll have to figure out my image mapping issue – I was trying to avoid it and focus on something else!

RemMem
Follow me on Twitter:
July 28, 2010 at 8:26 am

Nope, I haven’t tried that yet – I’ll give that a go in the next few days! Thanks so much for all of your great info!

RemMem
Follow me on Twitter:
July 29, 2010 at 12:42 am

Hi Karen – I gave your link a shot and the links still aren’t working. I think I’ll have to hand it off to someone with more experience (and patience). Thanks for your help!

morgan July 29, 2010 at 8:14 pm

i am having troble adding a comment box to my giveaway tab. i have made the whole html but now im lost.
what is the code for a comment box?

Shakila July 31, 2010 at 3:38 am

Dear Karen,
Thank you for all your sharing. That was very helpful. I am runnung a fan page about my country. As I dont have a web site I cant find anyother way to add a picture or a html file to a custom tab directly from the computerr. I really aooriciate if you can show me the full code to add a html page, if can’t to add a jpg picture to be opened directly by the combuter when thenew tab is clicked.Please help me
Shakila

Harris
Follow me on Twitter:
August 5, 2010 at 11:49 am

Hi !
My problem is that I want to put my Profile picture and link to my profile in my fan page’s side column…
I seriously don’t know how to do that…
I want my profile link (my picture and my name) in the left side column of my fan page under ADMINISTRATORS heading…

PLEASE HELP ME !
LOOKING FORWARD ! :)

Kristie August 5, 2010 at 10:25 pm

I wanted to thank you for all of the help here! I wanted to share what I’ve created. I haven’t finished yet. Facebook has REALLY given me the run around and sometimes updated incorrect (old even) information after I inserted new codes. I got this far though! I will try more another day (to add hyperlinks to my website, email, etc). I’ve got a bruise from beating my head on the desk with Facebook!!
Thank you again!! I’ve book marked you for a resource!!
http://www.facebook.com/pages/North-Atlanta-GA/Turning-Leaf-Designs-Boutique-Photography/105592615759

Jaye August 6, 2010 at 5:21 am

Hello,
I used this link in the FBML boxes app but when I hit the link it remains on the facebook page.
Any ideas why this would happen?
Having difficulty formatting links in boxes!
many thanks
Jaye

gigi August 7, 2010 at 8:21 am

I have the html to embed the picture and share button, but how do I put the share button within the picture? Let’s say, the middle of the pic?

Rio Nassar August 10, 2010 at 3:36 am

Hey Karen,

This website has been so helpful in setting up my Facebook Fan Page. I am currently working on a new FBML Tab and I wanted to add an image my folder and not from a website. Is this possible?

Also can you show me the code to have a sentence that is both bolded and in a larger font?

Tatenda August 10, 2010 at 4:50 pm

I copied your “Insert picture so that it is linked to a website” code as it is (inserting my links where applicable) and pasted it into test console after correcting the curly quotations. But it’s not working.

Jaye August 11, 2010 at 10:40 am

You kindly helped me put my Facebook fbml into “boxes”, and i created a nice ad for a product i have. Then I got news that “boxes” is going away in about a week. Can you recommend where/how to show a product on your facebook page and a link to that product to my website instead of using boxes?
Thank you

Cedric August 11, 2010 at 8:12 pm

I had a question regarding using an image as a link. I am working on my company facebook page and would like to make a new landing tab with a banner on it that is clickable. This much I have accomplished so far.

My question is: Can I modify the dimensions of the picture in question so it’s bigger or smaller on the tab in question?

Jaye August 13, 2010 at 10:42 am

Great Karen,
I will now us the FBML box instead of boxes. But now it doesn’t sit neatly in a box. It spreads across the page. Can you tell me how to change the width if possible?
Jaye

jojo August 14, 2010 at 8:53 pm

Hey ! thx for this :)
but i have a problem :(
I would like to insert a pic so that it’s linked to a website, but i didnt know what to write when u said : whatever this is a picture of including a keyword or two
this is what i did :
this is the website : http://www.youtube.com/user/wwsgil
this is the pic : http://www.savantsolar.com/images/youtube_icon_small.jpg

this is how i wrote the code :

but i didnt work ! :S if you could plz explain me what to write and where or if you could plzzzzzzz just make the code ??!! :(

Lalit J August 16, 2010 at 3:19 am

I have an image up followed by text. I linked the image to our website but the text is linked to the website too. How do I remove this link with the text to the website? I just want the text to be plain text.

Shira August 16, 2010 at 9:31 pm

Karen,
We are working on a few custom tabs but the coding is not rendering. Is their a difference in the way you code images (linked from a website) in html than in fbml? Also, when I test the coding on the developers test site it comes out perfectly, then when I copy and paste the same code onto our custom tab, the page is just blank…. any ideas? thanks!

Stephen Perkins August 17, 2010 at 5:15 am

Thanks for this. I was working on a page for a client and really needed to find this info. Thanks again and nice blog btw.

simone August 19, 2010 at 5:22 am

Thanks for doing this guide. I’m trying to make a linked phrase. I’ve made the phrase appear where I want and it acts as a link but to an error message.


But what does this refer to? I’m not sure what to replace it with.

Thanks!

Laurie London
Follow me on Twitter:
August 20, 2010 at 3:34 am

Karen, thanks for all this great info! I read and re-read this post and comments as I put together my static FBML page.

Like a few of your commenters, I had a hard time getting an img to post on my landing page. No curly quotes, no extra spaces, size was okay per Photobucket. The FB code testing site said the coding was fine and the image displayed properly there, but I just couldn’t get it displayed on the actual FTML page. I tried everything. When a different photo worked, I know it must either be a size or a link problem. Here’s what I did:

1. Re-uploaded the original image from my computer into a different Photobucket album in case it was a link problem associated with that other album.

2. I manually coded the width and height on the FBML page, even though it was within FB’s new size requirements.

And, voila, it worked. It’s not fancy, but now I’ve got something to work with.

Thanks again!

rob August 24, 2010 at 2:18 am

hi karen

U mention photobucket is the place u can upload the photos to. Cannot i not have a photo in facebook already and link it through for it to appear as a jpeg on the landing page, what is the code for this?

thanks

sporty

Noa August 25, 2010 at 3:57 pm

Hello, I found it interesting to your website, and thanks for the information.
In one of your comments talk about Involver, do you know if free or have to pay for the applications?

Thank you very much, I hope your answer

{ 17 trackbacks }

Previous post:

Next post: