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

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 capital letter “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!

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

{ 2 trackbacks }

MyBizPresence Twitter Weekly Tweets for 2010-03-07
March 8, 2010 at 12:19 am
Tips and Tabs to Spice Up Your Facebook Fan Page | Sharisax Is Out There
July 14, 2010 at 8:51 am

{ 105 comments… read them below or add one }

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

[Reply]

Karen
Follow me on Twitter:
Reply:
June 6th, 2010 at 10:47 am

FBML and Youtube flash videos do not like each other very much! The best thing is if you want Youtube channel videos all on one tab, use the free application at Involver.com. It is great and will import your channel automatically plus anything you favorite. If you are trying to embed a youtube video on an FBML page, you have to first make an image of the video player (I used a screen shot program – Grab – on my Mac) and then use this code:

{fb:swf ?swfbgcolor=”000000″ ?imgstyle=”border-width:3px; border-color:white;” ?swfsrc=’http://www.youtube.com/v/xxxxxxxxxx’ ?imgsrc=’http://img.youtube.com/vi/xxxxxxxxxx/2.jpg’ ?width=’340′ height=’270′ /}

(change { and } to < and >)

Replace the first link with the link to your actual video, and the 2nd link to the actual link of your fake image you are hosting somewhere else. This is how I got it to work on my Welcome page of my fan page: http://www.facebook.com/mybusinesspresence

Again if all you want is a gallery of youtube channel vids though, use Involver!!

[Reply]

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

[Reply]

Karen
Follow me on Twitter:
Reply:
June 7th, 2010 at 10:50 pm

That is in Edit Page then Wall Settings. Set “Default page for everyone else” to the page you want non-fans to see first. Then when they Like your page, the next time they come it will go to the wall. Is that what you mean?

[Reply]

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?

[Reply]

Karen
Follow me on Twitter:
Reply:
June 22nd, 2010 at 12:40 am

Hi Christina – {font face=”whatever the font name is”} and then {/font} at the end is the regular html way to indicate font types. Try that?

(change { and } to < and > though!)

[Reply]

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!

[Reply]

Karen
Follow me on Twitter:
Reply:
June 18th, 2010 at 10:05 am

Interesting and beyond my expertise! Thanks for sharing! I’m hoping if FB keeps becoming more and more popular for businesses, that their FBML will allow for more of these advanced techniques in the future!

[Reply]

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!

[Reply]

Karen
Follow me on Twitter:
Reply:
June 18th, 2010 at 10:02 pm

Hi Liz – I don’t know of anywhere to get templates though you could mess around with regular web page templates? I know that Nathan Latka from the Fan Page Factory (see the button on my side bar) is starting to offer them. I use Dreamweaver but if you can find any regular html editor and make something up then view the raw HTML if it is basic enough you should be able to paste the raw html code (only the part between the tags) and test it out.

[Reply]

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?

[Reply]

Karen
Follow me on Twitter:
Reply:
June 18th, 2010 at 10:03 pm

Not sure if this is in your actual code or if it’s a typo but you have 2 sets of quotation marks around your links. Also the 2 sets look like they are in different fonts. Take your code and copy/paste it into a plain text document – totally plain text. Edit it there, and then copy/paste it back into the FBML see if that helps.

[Reply]

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?

[Reply]

Karen
Follow me on Twitter:
Reply:
June 21st, 2010 at 8:09 am

Hard to tell without seeing your code but this happened to me when I was first trying it out. Then I figured out it has to be only the code BETWEEN the body tags – take your html and put it in a plain text doc, then delete the {body} and everything above it, and then those tags’ corresponding closing tags at the bottom -{/body} and anything below it. FBML will only accept html that is between the body tags. Try that?

[Reply]

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…

[Reply]

Karen
Follow me on Twitter:
Reply:
June 24th, 2010 at 12:56 am

I have not done this yet but here is an article about it: http://www.hyperarts.com/blog/facebook-fan-pages-content-for-fans-only-static-fbml/

[Reply]

Santiago Reply:
June 28th, 2010 at 5:01 am

thanks!! ={D

[Reply]

Karen
Follow me on Twitter:
Reply:
June 28th, 2010 at 7:16 pm

Thank YOU for saying thanks!!!!!

una June 25, 2010 at 7:12 pm

Hi Karen,

What would the code be for inserting a swf file

[Reply]

Karen
Follow me on Twitter:
Reply:
June 26th, 2010 at 7:12 am

We talked about that in an earlier comment: http://www.mybusinesspresence.com/basic-html-code-for-your-static-fbml-pages-on-facebook/comment-page-2/#comment-532

[Reply]

black June 26, 2010 at 5:43 am

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

[Reply]

Karen
Follow me on Twitter:
Reply:
June 26th, 2010 at 7:01 am

This resource should help you. http://www.w3schools.com/html/html_examples.asp

[Reply]

Lilly June 26, 2010 at 7:33 pm

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

[Reply]

Karen
Follow me on Twitter:
Reply:
June 27th, 2010 at 2:35 am

We covered that in a previous comment: http://www.mybusinesspresence.com/basic-html-code-for-your-static-fbml-pages-on-facebook/comment-page-1/#comment-366

[Reply]

Lilly Reply:
July 3rd, 2010 at 9:58 pm

hello, one more question..

if i want to write e. g. hello in purple (#9999FF ) how do i do?
{font color=”##9999FF ” size=”4?} hello {/font}..or what?…i’m sorry but i’m really confused..:) for what is the size=”4 standing?

[Reply]

Karen
Follow me on Twitter:
Reply:
July 4th, 2010 at 6:57 am

Yes but you do have an extra # in there, and make sure the quotation marks are straight. The 4 is for size – try it with a 4 see if you like it, change to 1 or 2 or 3 for smaller, 5 or 6 or whatever to make it bigger. Change the { and } to though!

Lilly Reply:
July 6th, 2010 at 5:33 pm

it doesn’t work i did everything you told me..:’(

see: {font color=”#9999FF ” size=”4?} hello {/font} what’s wrong??

Karen
Follow me on Twitter:
Reply:
July 7th, 2010 at 2:06 am

There is a space after the last F, and the quotation mark before the 4 is ‘curly’ and needs to be plain text, and there is a ? instead of a closing quotation mark after the 4. Fix those and it should work?

Lilly Reply:
July 15th, 2010 at 12:29 am

oh my gosh!! no it doesn’t!!
look now: {font color=”#9999FF”size=”4″} hello {/font} i mean..i think i did everything.. right?

Karen
Follow me on Twitter:
Reply:
July 15th, 2010 at 4:34 am

I know it looks funky here on the blog but if you convert this to plain text in Notepad or something – make sure it is plain text – you will see the quotations around the 4 are not straight, and there is not a space before “size”. Try again?
{font color=”#9999FF”size=”4?}

Lilly Reply:
July 20th, 2010 at 12:56 am

no seriously..it doesn’t work…i don’t know maybe i’m to stupid :D
look: this should be right, shouldn’t it??

{font color=”#9999FF”size=”4″}hello{/font}
or this?
{font color=”#9999FF”size=”4″} hello {/font}

omg…i really need help..;)

Karen
Follow me on Twitter:
Reply:
July 20th, 2010 at 1:48 am

Wow yes it is correct, I pasted it into the FBML test console. I am not sure what else could be going on. You are changing the { and } to < and > correct? And putting that into a Static FBML tab? Here is the test console, you paste any code you are using in there and click Run, then it shows you underneath what it would look like http://developers.facebook.com/tools/console/

Lilly Reply:
July 26th, 2010 at 4:33 pm

i don’t get it >.< it doesn't work..:'( that is sooo mean :'( could you please do one for me and paste it in here?

Karen
Follow me on Twitter:
Reply:
July 27th, 2010 at 12:44 am

I suggest you get some more advanced help. Nathan Latka with Fan Page factory is great. There is a button on my page for him, under Try These Resources – Fan Page Factory. He has far more advanced FBML knowledge than I do!

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 ?

[Reply]

Karen
Follow me on Twitter:
Reply:
June 28th, 2010 at 7:16 pm

I haven’t gotten it to work with iframes but I know people who do. Hmm. I’ve just copied plain HTML source code from a site into an FBML tab, try that? Just be sure to only be pasting code between the body tags. Or another thing I’ve done is taken a screen shot of the website and embedded it as an image. Then you can create an image map of things you want to click to different places. That may work.

[Reply]

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…

[Reply]

Karen
Follow me on Twitter:
Reply:
July 4th, 2010 at 7:01 am

I do not think you can link to a site like google docs where you would have to log in to view the items.

[Reply]

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

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

[Reply]

Karen
Follow me on Twitter:
Reply:
July 4th, 2010 at 7:03 am

As far as I know you would need to have the pdf hosted somewhere else, then link to the direct file name (http://somethingsomething/something.pdf) wherever it is hosted.

Another idea is to use the free PDF tab application you can get from Involver.com It creates a tab of PDFs. You could link to that specific tab or maybe the specific file. Not sure!

[Reply]

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?

[Reply]

Bernhard Reply:
July 4th, 2010 at 9:58 pm

Sorry… the command got lost! I meant the command for implementig a picture “”

[Reply]

Karen
Follow me on Twitter:
Reply:
July 4th, 2010 at 10:01 pm

One thing that has been happening is the font on this blog has “curly quotes” which do not work – take the code you want, paste it into a plain text document – make sure it is converted to plain text – and then try again. Maybe that will help. Without seeing your code it is hard for me to tell. Feel free to email it to me – use the contact button on the left and paste it in there!

[Reply]

Bernhard Reply:
July 5th, 2010 at 3:00 am

got it!
You’re the BEST! ;)

thx a lot

Jennifer Reply:
August 24th, 2010 at 8:50 pm

THANK YOU – i have no idea how i found your site, but this post rescued me from about 3 hours of trying to figure out why my link would not work. THANK YOU!!!!

jayar049 July 5, 2010 at 7:14 am

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

[Reply]

Karen
Follow me on Twitter:
Reply:
July 5th, 2010 at 6:38 pm

That is one of the services my company does – contact me through email (or use the contact form on the left) and I’ll send you the questionnaire.

[Reply]

Christina July 5, 2010 at 6:08 pm

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

[Reply]

Karen
Follow me on Twitter:
Reply:
July 5th, 2010 at 6:37 pm

I think you mean an Image Map? That is when you click on one part of a picture and it goes to a link. It could be a word or a section of the picture etc. Try this site:
http://www.image-maps.com/

[Reply]

Christina Reply:
July 6th, 2010 at 4:34 pm

Thanks Karen !! you really helped me out!!
but one quest. again, what code for Background??

[Reply]

Karen
Follow me on Twitter:
Reply:
July 7th, 2010 at 2:09 am

If you mean background color, it is:

{div style=”background-color:red;”} {/div}

(Replace the { and } with < and > and replace red with whichever color or hex code you like!

Tatenda Reply:
August 10th, 2010 at 4:26 pm

Hi Karen

I understand the part on using image.maps to make portions of a full picture clickable as links. But i’m failing to understand how then i can get that into my fbml page. I have a full picture and want to make different parts of it clickable on my fbml page and linked to different pages.

[Reply]

Karen
Follow me on Twitter:
Reply:
August 17th, 2010 at 5:28 am

Once you have the image map code (see the free image map sites referenced elsewhere here) then you will paste that code into the FBML page. Make sure your overall size is less than 520 pixels.

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

[Reply]

Karen
Follow me on Twitter:
Reply:
July 7th, 2010 at 2:05 am

Either it is not showing up in this post or the email to me or your code is missing the 2nd half – the actually link you want after Americare” and then the > after the link, then the words you want that to be linked to, and then the . Feel free to email me the full code you are using, using the contact button on the left, if you think it just didn’t show up here!

[Reply]

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?

[Reply]

Karen
Follow me on Twitter:
Reply:
July 10th, 2010 at 9:55 pm

It should work. Copy/paste the exact code, sometimes it is a tiny thing that breaks it.

[Reply]

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

[Reply]

Karen
Follow me on Twitter:
Reply:
July 11th, 2010 at 10:06 pm

I’m sorry but something is missing – after “always starts with” …? In general most regular HTML works in Static FBML. Only what would be between the body tags though! Hope that helps!
Karen

[Reply]

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

[Reply]

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!

[Reply]

Karen
Follow me on Twitter:
Reply:
July 17th, 2010 at 2:53 am

Be sure you are using code without curly quotes – also the picture itself is HUGE, it may be too big to use? Try resizing free at http://www.picnik.com. here’s the code you’d want:

{a href=”http://www.nationalfranchisesales.com/”} {img src=”http://www.delish.com/cm/delish/images/dennys-logonew.jpg”} {/a}

That should work! If not, make the picture smaller first, save it and retry!

Karen

[Reply]

Karen
Follow me on Twitter:
Reply:
July 17th, 2010 at 2:57 am

Grrrr it is inserting curly quotes here and it’s frustrating – change the quotation marks in anything you copy from this site to STRAIGHT – plain text quotations. In so many cases the curly quotes is what breaks the code. Sorry.

[Reply]

kara July 19, 2010 at 8:52 pm

THANK YOU!!!

you are AMAZING!

[Reply]

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?

[Reply]

Karen
Follow me on Twitter:
Reply:
July 20th, 2010 at 10:35 am

Not sure if this is what you mean but you can add a contact form using code from http://www.response-o-matic.com It lets them input whatever fields you set up, and it gets sent to you in an email. Their free version sends the visitor to an ad page after they submit, but the paid version will send them back to your site.

[Reply]

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?

[Reply]

Karen
Follow me on Twitter:
Reply:
July 27th, 2010 at 12:40 am

How about just take out the target=”blank” part? All that does is tell it to open the link into a new window.

[Reply]

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}
…….

[Reply]

Karen
Follow me on Twitter:
Reply:
July 27th, 2010 at 12:42 am

Hmm here are some help files on background images: http://www.facebook.com/topic.php?uid=4949752878&topic=8442

[Reply]

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

[Reply]

Karen
Follow me on Twitter:
Reply:
July 27th, 2010 at 12:39 am

Yes it has to be hosted somewhere else first. You cannot upload. So if you dont already have it somewhere, open a free Photobucket account, it works great.

[Reply]

Djuly Reply:
July 27th, 2010 at 5:40 am

Thanks a lot!! :D

[Reply]

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}

[Reply]

Karen
Follow me on Twitter:
Reply:
July 28th, 2010 at 12:31 am

The only thing I can think of is one of the quotation marks LOOKS like it might be a curly quote (the one after the src) so try this:

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

PS: Great graphic!

PPS: If that doesn’t work just put it in Notepad and convert to plain text). My eyes are old and it’s hard for me to see but you may have a curly one in the earlier part too. That’s the only thing left, your code is fine.

[Reply]

RemMem
Follow me on Twitter:
Reply:
July 28th, 2010 at 5:46 am

Thanks, Karen – I was able to get it working (kind of). I can see the image now but I haven’t figured out the image mapping yet. I used that code for my box image too and it worked perfectly, but I can’t move the Box from the Tab to the left sidebar. Any suggestions? Thanks for your help!

[Reply]

Karen
Follow me on Twitter:
Reply:
July 28th, 2010 at 6:20 am

Ahhh I have some bad news for you. Facebook is eliminating the Boxes ability to post to your sidebar. They are rolling out the eliminations slowly but not allowing new ones to do it. :-( Total bummer.

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!

[Reply]

Karen
Follow me on Twitter:
Reply:
July 28th, 2010 at 6:47 am

Did you try this site?

http://www.image-maps.com/

I don’t know what’s up but the image map I made in Dreamweaver didn’t work but the one I made on that site did! Try that!

[Reply]

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!

[Reply]

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!

[Reply]

RemMem
Follow me on Twitter:
Reply:
August 6th, 2010 at 1:09 am

Hey Karen,

I’m giving this another try. Can you take a look at this code and see if you notice any wrong? The image appears but none of the links work. Thanks!

{div style=”text-align:center; width:520px; margin-left:auto; margin-right:auto;”}
{img id=”Image-Maps_3201007281551269″ src=”http://remakingmemories.com/FacebookFBML_Welcome2.jpg” usemap=”#Image-Maps_3201007281551269″ border=”0″ width=”520″ height=”500″ alt=”" /}
{map id=”_Image-Maps_3201007281551269″ name=”Image-Maps_3201007281551269″}
{area shape=”rect” coords=”0,428,515,495″ href=”http://www.remakingmemories.com” alt=”remaking memories website” title=”remaking memories website” /}
{area shape=”rect” coords=”0,329,227,428″ href=”http://www.remakingmemories.com/blog” alt=”remaking memories blog” title=”remaking memories blog” /}
{area shape=”rect” coords=”227,329,515,428″ href=”http://www.twitter.com/remakinmemories” alt=”remaking memories twitter account” title=”remaking memories twitter account” /}
{area shape=”rect” coords=”516,496,518,498″ href=”http://www.image-maps.com/index.php?aff=mapped_users_3201007281551269″ alt=”Image Map” title=”Image Map” /}
{/map}
{/div}

[Reply]

Karen
Follow me on Twitter:
Reply:
August 6th, 2010 at 6:02 am

I do not see anything wrong from a regular HTML standpoint but maybe there is something in there that doesn’t work on Facebook. Try pasting the code into the tester box: http://developers.facebook.com/tools/console/

[Reply]

RemMem
Follow me on Twitter:
Reply:
August 6th, 2010 at 7:18 am

And the mystery continues. I dropped the code into that tester box, it works perfectly! I put it back into the Facebook app – no good! If I wasn’t so stubborn, I would think maybe it wasn’t meant to be….

Again, thanks for your help!

Karen
Follow me on Twitter:
Reply:
August 6th, 2010 at 7:26 am

Very strange! Is there ANY other code above it, in the FBML box that could be interfering?

RemMem
Follow me on Twitter:
Reply:
August 6th, 2010 at 7:46 am

Nope, that’s the only code. Maybe if I throw my computer against my wall it’ll magically work.

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?

[Reply]

Karen
Follow me on Twitter:
Reply:
July 29th, 2010 at 11:20 pm

This might help: http://developers.facebook.com/docs/reference/plugins/comments

Or else this one: http://wiki.developers.facebook.com/index.php/Fb:comments

[Reply]

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

[Reply]

Karen
Follow me on Twitter:
Reply:
July 31st, 2010 at 11:20 am

I am not sure I understand your question. This is not something I covered in this post. If you are asking how to insert a picture that does not exist on a website somewhere, you would simply upload it to a site like photobucket.com and then link to it from their “share” links there. Good luck!

[Reply]

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

[Reply]

Karen
Follow me on Twitter:
Reply:
August 5th, 2010 at 10:51 pm

Facebook has disabled the ability for new instances of FBML going to the wall through the Boxes tab. You cannot do it any more. :( They are gradually eliminating existing ones too. :(

[Reply]

Harris
Follow me on Twitter:
Reply:
August 6th, 2010 at 10:01 am

Ohhhh… So sad… :(

Now , are the gonna introduce any new feature ?

[Reply]

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

[Reply]

Karen
Follow me on Twitter:
Reply:
August 5th, 2010 at 10:50 pm

That is fantastic! Go to your Edit Page area and under Wall Settings set it so that the “default landing page for everyone else” is set to your Welcome page. Then they will see that first! When I went there it sent me to the wall first! Otherwise it looks great! Maybe make the text a smaller # on the welcome page. Otherwise it’s great!! GOOD JOB!

[Reply]

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

[Reply]

Karen
Follow me on Twitter:
Reply:
August 6th, 2010 at 5:49 am

Hi Jaye – You have an extra ” mark at the end of the link, and there were no words between the > and < to tell it what to make into a link. Can you paste the exact code including whatever link you want it to go to? You can email me privately if needed!

[Reply]

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?

[Reply]

Karen
Follow me on Twitter:
Reply:
August 10th, 2010 at 7:13 am

I do not know – anyone want to help?

[Reply]

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?

[Reply]

Karen
Follow me on Twitter:
Reply:
August 10th, 2010 at 7:13 am

You cannot link from your Fan Page to a picture that is within your personal profile albums but you may be able to from your Fan Page albums – I have not tried it. Try going to that picture and copying the exact URL. You may not be able to since I don’t know if those are “public” enough. You can just upload to a free Photobucket account.

To do bold and larger just put the opening codes for each in front of the text and the closing code for each at the end of the text in reverse order. Like {b}{font size=”4″}whatever you want bold and big{/b}{/font} That is the easiest way!

[Reply]

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.

[Reply]

Karen
Follow me on Twitter:
Reply:
August 17th, 2010 at 5:27 am

Usually this is due to the image being too large. Make sure it is less than 520 px wide.

[Reply]

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

[Reply]

Karen
Follow me on Twitter:
Reply:
August 11th, 2010 at 11:03 am

Hi Jaye – Yes, bummer isn’t it. So go into Edit Page, then find that instance of FBML in your list of settings and click Edit Settings by that item. It will have Add to Boxes and Add to Tab – just make sure the Add to Tab is checked. Then visit your page’s Wall and click the + button by the tabs and add that tab as one of your tabs on the wall. You can drag it over to be one of the visible ones if you wish. If needed, go back to Edit Page and edit that FBML if you’d like to make it wider or rearrange it.

Hope that helps.
Karen

[Reply]

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?

[Reply]

Karen
Follow me on Twitter:
Reply:
August 11th, 2010 at 9:23 pm

Yes just after the last quotation mark around the picture URL you can add width=”123″ height=”456″ and change those #s to the size you want in pixels.

[Reply]

Cedric Reply:
August 11th, 2010 at 9:45 pm

Oh, perfect! Thanks very much Karen, this whole post has been very helpful.

[Reply]

Cedric Reply:
August 11th, 2010 at 9:47 pm

Actually, I have -one- more question! Is it possible to apply this concept of making an image a link to your profile icon on a fanpage?

Karen
Follow me on Twitter:
Reply:
August 13th, 2010 at 7:20 am

I don’t think so. But you could try!

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

[Reply]

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 ??!! :(

[Reply]

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.

[Reply]

Karen
Follow me on Twitter:
Reply:
August 17th, 2010 at 5:25 am

Just make sure your closing tag is at the end of whatever you want linked. Probably just need to move it over!

[Reply]

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!

[Reply]

Karen
Follow me on Twitter:
Reply:
August 17th, 2010 at 5:24 am

The only thing I can think of is if the images are too big. Facebook is implementing the 520 px limit now so if the test console isn’t reflecting that it could explain why it would be OK on there but not on FB itself?

[Reply]

Cedric Reply:
August 18th, 2010 at 7:13 pm

Hi Karen,

I’m having a new issue here. My facebook tab consists of one large banner on the top and three smaller button images beneath it.

Ideally these buttons are sized and edited to look similiar so that if possitioned flush side by side they would look like one image.

However, when i use the html you’ve so kindly offered to us, I get little gaps of white in between each image. Is there anyway to do away with this gap?

Thanks!

Cedric

[Reply]

RemMem
Follow me on Twitter:
Reply:
August 17th, 2010 at 6:18 am

Hi Shira – I think I might know why your code isn’t rendering. The FBML App doesn’t like image mapping if you’re trying to use multiple image maps. I tried, and tried, and tried but couldn’t get it to work until I had a friend help me break apart my image and put each one into tables – works like a champ now! Good luck!

Karen – I finally fixed it! :) Thanks for your help!

Check it out: http://www.facebook.com/remakingmemories

[Reply]

Teri Reply:
August 18th, 2010 at 6:40 pm

RemMem,

Your landing page looks great. Question: how did you get the Like button up by the Page title?

thanks for the help….

[Reply]

RemMem
Follow me on Twitter:
Reply:
August 18th, 2010 at 8:12 pm

Thanks, Teri! If you’re logged out and go to your FBML page, you should see the ‘Like’ button on your page as well.

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.

[Reply]

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!

[Reply]

Karen
Follow me on Twitter:
Reply:
August 19th, 2010 at 7:21 am

The code you gave me was {A title=””whatever” HREF=””http://www.whateverwhatever.com””} but there are some problems with it. You have 2 ” marks next to each other in several places – should only be one. And you are missing the actual words you want to be linked – and then missing the closing {/A}

So the first title=”whatever” should have the whatever replaced with what the website is about that you are linking to.
The http://www.whateverwhatever.com should be replaces with the www you want to actually send people to when they click the link.
Following that – between the > and the should be the words you actually want to be clickable (clickable to the www. link just before it). Hope that helps!

[Reply]

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!

[Reply]

Karen
Follow me on Twitter:
Reply:
August 20th, 2010 at 5:38 am

Fabulous! Thanks for sharing! I am sure this will help others!

[Reply]

Cedric Reply:
August 23rd, 2010 at 10:28 pm

I’m not sure if this is the right place to ask this question but here goes anyways.

I have noticed that on some people’s fanpages they sometimes make wall posts with pictures. Those pictures will often work as a link to a part of their home page (rather than taking you to the photo album on fb)

Does anyone know how to do this? (That is, make a picture function as a link in a wall post)

[Reply]

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

[Reply]

Karen
Follow me on Twitter:
Reply:
August 25th, 2010 at 7:47 pm

There is no way to do this that I know of.

[Reply]

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

[Reply]

Karen
Follow me on Twitter:
Reply:
August 25th, 2010 at 7:47 pm

You can use 2 of their applications for free! Just skip the info about the paid programs and try them out – they’re great!

[Reply]

Leave a Comment


Add your Twitter username here to include it in your comment. No http or @ please! Twitter ID

Previous post:

Next post: