Basic HTML code for your Static FBML pages on 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!

Comments on this entry are closed.

  • Nicole Hore January 23, 2010, 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, 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, 7:32 am

    Thanks for the helpful information Karen! You’re super!

  • Imran February 7, 2010, 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, 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, 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, 7:00 am

    How do I set a background image?

  • Karen
    Follow me on Twitter: mybizpresence
    March 3, 2010, 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, 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, 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, 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

    • ASheri June 3, 2010, 4:10 pm

      I’m having trouble inserting an image. I have an image URL and am using the Center and Image codes from above. It’s showing as a blank page in Facebook. This is the code I’m trying to use:

      Thanks much for sharing how to use FBML.

      • Karen
        Follow me on Twitter: mybizpresence
        June 4, 2010, 9:32 am

        Can you try again – your code paste did not show up!

    • hagar June 16, 2010, 3:38 pm

      Hi,
      I tried to I upload 2 pic (one above the other) using the code and the relevant url for each image but it gave me a blank box saying pic is unavailable.
      When i used the code for one image however, it did work.

      What am I doing wrong?

      • Karen
        Follow me on Twitter: mybizpresence
        June 18, 2010, 10:04 am

        Without seeing your code, it is hard to say. Just make sure you are starting and ending the entire code for each picture. You can put a
        tag {br} between them to give it a line break between, maybe that will help?

  • Hubezi March 9, 2010, 2:34 am

    U R Amazing! TNX :))

  • Milan March 11, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      March 11, 2010, 6:36 pm

      Background code should go at the beginning. Try it out and let me know!

  • Milos March 21, 2010, 3:26 pm

    how to position text or image?? beside: and ???

    • Karen
      Follow me on Twitter: mybizpresence
      March 21, 2010, 8:49 pm

      Try this! Put in {div align=”left”} or {div align=”right”} before the stuff you want aligned, then close it with {/div} right after the part you are aligning. BUT…
      Change the { and } to < and > first! Hope that helps!
      Karen

  • Karen
    Follow me on Twitter: mybizpresence
    March 23, 2010, 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, 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.

    • Karen
      Follow me on Twitter: mybizpresence
      March 31, 2010, 12:25 am

      Terrific! I struggle sometimes, too. I was working on one yesterday that would simply not show up. Turned out it was just a little too big and when I reduced it, everything worked! Whew! I know your frustration though. Have fun!

      • Walter Day March 31, 2010, 1:11 am

        One other thing I’m having trouble with; I’d like to change the font to another style (lucida handwriting, as seen at http://www.wavian.com/font-list.html if possible). Sorry for such a newbish question; I haven’t used html in 10 years or more, can you help me?

        • Karen
          Follow me on Twitter: mybizpresence
          March 31, 2010, 5:41 am

          Hmmm all I can find are how to change the font size and font color. If anyone out there knows about font style, let us know!

          In the mean time, maybe what I’d do would be to create an image with the font written out how you want it, and insert that. You could do it in word and simply take a screen shot of it, or create something in an editor like photoshop if you have access to that. I like using screenshots, they are quick and easy. Then just insert the image? Let me know if that works or if you find another solution!

  • Walter Day March 31, 2010, 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, 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, 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, 1:11 am

    How To Change the color of the font?

    • Karen
      Follow me on Twitter: mybizpresence
      April 3, 2010, 7:34 am

      Try this simple HTML:

      {font color=”#hexcodenumber” size=”4″} whatever words {/font}

      Replace “#hexcodenumber with the number of the color you want, here is a handy chart: http://www.webmonkey.com/2010/02/color_charts/ Keep the # sign plus the number so like #9933CC and fiddle around with the size #, 4 is common, go up or down for bigger or smaller. :)

      As always replace the { and } with < and >

      Have fun!

      • Lilly June 28, 2010, 6:33 pm

        and where do i put the text?

        • Karen
          Follow me on Twitter: mybizpresence
          June 28, 2010, 7:14 pm

          On a Static FBML page. Here’s the article that explained that: http://www.mybusinesspresence.com/how-to-add-static-fbml-to-a-facebook-fan-page/ Have fun!

        • Lilly June 29, 2010, 10:05 pm

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

  • RAKS April 3, 2010, 12:51 pm

    Thanks Keren… 1 More question…
    How To Leave Space From Starting And write after 4-5 spacings?

    • Karen
      Follow me on Twitter: mybizpresence
      April 6, 2010, 8:05 am

      You can add as many tags as you want – each one skips a line!

  • Pangph88 April 14, 2010, 7:54 pm

    Im still new here..how can make the FBML code ? thx :)
    got any video clip or easy part to learn?

    • Karen
      Follow me on Twitter: mybizpresence
      April 15, 2010, 6:18 am

      First you will need to install the Static FBML application. Go to the Applications and Games on Facebook and search on Static FBML. Once you have it added to your Fan Page, then go to your page and click Edit Page. It will be listed there, then you can insert some of the html codes listed in this post. Have fun!

  • Jennifer April 22, 2010, 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, 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, 4:58 pm

    please help me.. i do not understand the font size part,….

    • Karen
      Follow me on Twitter: mybizpresence
      May 2, 2010, 9:09 am

      Simply ‘wrap’ the code around the words you want to increase or decrease in size. For example to make something bigger put

      {font size=”3?}

      directly in front of the words you want to make bigger and then put

      {/font}

      Directly after, where you want it to go back to normal. Of course change the { and } here to < and > so it works!

  • usbarlas May 2, 2010, 4:51 pm

    i do not undersatnd..give me example

    • Karen
      Follow me on Twitter: mybizpresence
      May 5, 2010, 12:34 pm

      Woops I had a typo in the last reply with the ?. I hate when I do that! So like say you want something to be BIG so you put
      this is big

      I simply put {font size=”4″} in front and {/font} after!

  • seyed May 3, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      May 5, 2010, 12:32 pm

      Well that’s strange! Somehow it is inserting my website address in the code? When I go just to http://www.facebook.com/sam1fb that link works. Should be:
      {A HREF=”http://www.facebook.com/sam1fb”}Sayed Askar{/A}
      Except swapping out the { and } for < and > since the replies here read the html and convert! Try again?

  • georgia bott May 5, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      May 5, 2010, 12:30 pm

      Just make sure your settings for the Fan Page are set to show that text box tab as the landing page, and the picture tab for ‘everyone else’. You’ll just have fans seeing the picture page and non-fans seeing the text landing page. Which could be annoying to fans who come back time after time. Maybe better to let them see the wall, with the picture box tab something they can click on if they want? Let me know the Fan Page name and I will peek!

      • georgia bott May 9, 2010, 12:45 am

        Thankyou, but how do you change the settings ? i know basic html codes. but i dont know how you change the settings to how you said ? Please help

        • Karen
          Follow me on Twitter: mybizpresence
          May 9, 2010, 12:54 am

          Try this:

          1. Home
          2. Ads and Pages
          3. Pages
          4. Edit Page by the page you want to edit
          5. The 2nd box on this page is WALL Settings
          6. Under View Settings click for Default View for Wall – posts by page and fans
          7. Next to Default Landing Tab for Everyone Else, click the name of the FBML page you made that you want them to land on first.

          That’s it! I hope that helps. If not, be very specific about what you are trying to do, what you have tried and what is happening when you try it.

  • Robert May 6, 2010, 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, 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

    • Karen
      Follow me on Twitter: mybizpresence
      May 9, 2010, 12:44 am

      1. I’ve found that most issues with background images are due to size. There is a new limit of 540 pixels wide. Try reducing the size of the image and see if that helps.
      2. For background color try {div style=”background-color:red;”} then the rest of your content then {/div} If you want to use hex codes try: {div style=’background-color: #XXXXXX’”} then whatever you want then end it with {/div}

      I hope that helps!
      Karen

      • Karen
        Follow me on Twitter: mybizpresence
        May 9, 2010, 12:49 am

        Oops I forgot to add – change the { and } in my examples to < and >. If I use the real tags WP translates it so you can’t see it!

  • Zam May 6, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      May 9, 2010, 12:37 am

      For line spacing do you mean just having one line appear right under the other? If so then it is simply {BR} for a line break.
      For justifying, try {align=”left”} or {align=”center”} etc.

  • Lindy May 10, 2010, 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, 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, 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

    • Karen
      Follow me on Twitter: mybizpresence
      May 12, 2010, 9:00 pm

      Here is a 8 x 8 table, the stuff between the td tags are what goes into each cell. See if this works:

      cell1 cell2 cell3 cell4 cell5 cell6 cell7 cell8
      row2              
      row3              
      row4              
      row5              
      • Karen
        Follow me on Twitter: mybizpresence
        May 12, 2010, 9:03 pm

        Woops forgot to change to { and }! By the way did you know you can peek at people’s code by going up to View and down to Source/Page Source on any website? You can investigate different html codes that way. Here trying again:

        (change { and } to < and > and by the way you can change the numbers for the width or make it border=”1″ etc. Play with it! Isn’t this fun? :D
        Karen
        -

        {table width=”350″ border=”0″}
        {tr}
        {td}cell1{/td}
        {td}cell2{/td}
        {td}cell3{/td}
        {td}cell4{/td}
        {td}cell5{/td}
        {td}cell6{/td}
        {td}cell7{/td}
        {td}cell8{/td}
        {/tr}
        {tr}
        {td}row2{/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {/tr}
        {tr}
        {td}row3{/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {/tr}
        {tr}
        {td}row4{/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {/tr}
        {tr}
        {td}row5{/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {td} {/td}
        {/tr}
        {/table}

  • Robert May 12, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      May 13, 2010, 8:03 pm

      Just delete the code for the cells you don’t want. For this code the cells are as big as the largest text. It’s really easier if you have an HTML editor to play with it in first. If I were you I’d get one since you want to do more complex stuff.

  • Ashley May 13, 2010, 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?

    • Karen
      Follow me on Twitter: mybizpresence
      May 13, 2010, 8:00 pm

      I’m assuming you have the img src part too cuz I didn’t see that but I did notice you’re missing the http: in your URL. That could be it!

      • Ashley May 13, 2010, 8:18 pm

        Hey! For some reason it disappeared when I submitted it. Here it is again:
        I seem to have both links with http: but I don’t know the problem!

        • Karen
          Follow me on Twitter: mybizpresence
          May 13, 2010, 8:36 pm

          When you put code into the comments here it reads it and implements it, so that is why I put the { and } instead of the < and >. Try again?

        • Karen
          Follow me on Twitter: mybizpresence
          May 13, 2010, 9:05 pm

          I get what you post in my email and it seems the http: is missing as well as you have two “” at the end instead of one. It says you have:
          {a href=”//www.caninehealthinstitute.com/””}{/a}

          and should be

          {a href=”http://www.caninehealthinstitute.com/”}in here put the text you want to show or the image{/a}

  • DyaaBelal May 16, 2010, 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 ..

    • Karen
      Follow me on Twitter: mybizpresence
      May 16, 2010, 11:34 am

      Yes Facebook links are funky – I don’t know what you are trying to link to, but if it is something within FB try paring down to the exact URL from your browser – Facebook adds extra code that helps them track where you are coming from, what you were on last, etc. so it’s tricky to get the exact URL. If you are trying to paste a link that is on a site outside of FB, go to that link first to grab it. Also it could be a problem pasting FB links that are not already public? Not sure what you are trying to link to, or I could try myself…?

  • Jarelle
    Follow me on Twitter: Jaeila
    May 16, 2010, 3:24 pm

    how can i change the font and the font color?

    • Karen
      Follow me on Twitter: mybizpresence
      May 16, 2010, 4:24 pm

      See above, those were both addressed previously.

  • Jarelle
    Follow me on Twitter: Jaeila
    May 16, 2010, 3:25 pm

    how can i resize a picture?

    • Karen
      Follow me on Twitter: mybizpresence
      May 16, 2010, 4:23 pm

      I use http://www.picnik.com to resize and then save to Photobucket or Flickr. It’s free and easy!

  • DyaaBelal May 18, 2010, 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, 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, 2:42 pm

    how can i change the font? like forte or anything?

    • Karen
      Follow me on Twitter: mybizpresence
      May 21, 2010, 2:48 am

      Hi Jarelle – We talked about this in a previous comment. It would need to be a web-friendly font then:

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

      Replace { and } with < and > Let me know if it works!

  • Ashleigh May 24, 2010, 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.

    • Karen
      Follow me on Twitter: mybizpresence
      May 24, 2010, 8:31 pm

      I’m wondering if you accidentally set the pictures to private?

      • Ashleigh May 24, 2010, 9:54 pm

        I might have, but in my frustration I moved everything over to Flickr & now it works great! :0)

        • Karen
          Follow me on Twitter: mybizpresence
          May 24, 2010, 9:57 pm

          Great!!! Congrats!

  • Hannah May 24, 2010, 10:34 pm

    Very helpful, thanks!

  • Yvonne May 28, 2010, 12:24 am

    First… you rock! :o)

    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!

    • Karen
      Follow me on Twitter: mybizpresence
      May 28, 2010, 1:20 am

      Could be the image is too big? Also FB is having issues with fbml the last day or so, could be it’s not you! You could email me the code (copy/paste in a plain text document) and I’ll take a peek: Karen ‘at’ mybusinesspresence.com

      • Yvonne June 2, 2010, 6:54 pm

        Sadly, still having difficulty. Reduced my image to 400 px wide and it still isn’t showing up.

        • Yvonne June 3, 2010, 12:01 am

          I guess it didn’t me hosting my image on my website. It worked when I switched to Photobucket. Go figure…

          • Karen
            Follow me on Twitter: mybizpresence
            June 3, 2010, 4:01 am

            Hmmm I read the other day when there were changes and bugs etc, that people could not get it to work if their images were on Flickr. Maybe certain site/hosting isn’t compatible? Sorry you’re having trouble. Maybe check out the Facebook Developer Forum and ask some Qs there?

        • Yvonne June 3, 2010, 12:11 am

          Getting frustrated…

  • DANIEL May 28, 2010, 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?

    • Karen
      Follow me on Twitter: mybizpresence
      May 28, 2010, 7:16 pm

      The code did not show up here but I saw it in the email notice:

      {A title=””Cafe” HREF=””http://www.cafe1040.com/apply””}APPLY{/A}

      Notice you have too many quotation marks – before the word Cafe and then both before and after the URL. Try again without the extras, there should only be one set of ” in each instance.

      {A title=”Cafe” HREF=”http://www.cafe1040.com/apply”}APPLY{/A}

      But change the { and } to < and > That should do it!

  • DANIEL June 1, 2010, 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?

    • Karen
      Follow me on Twitter: mybizpresence
      June 1, 2010, 9:26 pm

      Without seeing the code, I would guess that they have it linked to see a larger image on Flickr. If so take off the {a href=”….”} and {/a} parts so you are just left with the {img src=”….”} parts if all you want is the image but not have it click through to anything else. Or change where it is being clicked to (the link in the a href tag) to somewhere else – a site of your own or another page within FB or whatever! Hope that helps. If not paste in the code and I’ll take a look!
      Karen

  • Kimberly June 2, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      June 2, 2010, 9:02 am

      Looks like you fixed it? It all looks normal to me! What worked?

  • Huy June 2, 2010, 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, 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?

    • Karen
      Follow me on Twitter: mybizpresence
      June 2, 2010, 9:00 am

      You do it just like a link to a webpage but instead of an http:// etc you put “mailto:emailaddress@whatever.com”
      So for mine it would be {a href=”mailto:karen@mybusinesspresence.com”}Email me!{/a}
      Replacing the { and } with < and >
      Hope that helps!

      • katherine hoppe June 2, 2010, 11:01 am

        i think i love you! Thank you!

  • housam June 5, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      June 6, 2010, 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!!

  • Pingpong June 7, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      June 7, 2010, 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?

  • Christina June 11, 2010, 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?

    • Karen
      Follow me on Twitter: mybizpresence
      June 22, 2010, 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!)

  • Naomi June 17, 2010, 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!

    • Karen
      Follow me on Twitter: mybizpresence
      June 18, 2010, 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!

  • Liz June 18, 2010, 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!

    • Karen
      Follow me on Twitter: mybizpresence
      June 18, 2010, 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.

  • Dentinal Tubules June 18, 2010, 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?

    • Karen
      Follow me on Twitter: mybizpresence
      June 18, 2010, 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.

  • Jeremy June 20, 2010, 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?

    • Karen
      Follow me on Twitter: mybizpresence
      June 21, 2010, 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?

  • Santiago June 23, 2010, 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, 7:12 pm

    Hi Karen,

    What would the code be for inserting a swf file

  • black June 26, 2010, 5:43 am

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

  • Lilly June 26, 2010, 7:33 pm

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

    • Karen
      Follow me on Twitter: mybizpresence
      June 27, 2010, 2:35 am

      • Lilly July 3, 2010, 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?

        • Karen
          Follow me on Twitter: mybizpresence
          July 4, 2010, 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 July 6, 2010, 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: mybizpresence
            July 7, 2010, 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 July 15, 2010, 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: mybizpresence
            July 15, 2010, 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 July 20, 2010, 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: mybizpresence
            July 20, 2010, 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 July 26, 2010, 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: mybizpresence
            July 27, 2010, 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, 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 ?

    • Karen
      Follow me on Twitter: mybizpresence
      June 28, 2010, 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.

  • Hari July 2, 2010, 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…

    • Karen
      Follow me on Twitter: mybizpresence
      July 4, 2010, 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.

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

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

    • Karen
      Follow me on Twitter: mybizpresence
      July 4, 2010, 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!

  • Bernhard July 4, 2010, 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?

    • Bernhard July 4, 2010, 9:58 pm

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

      • Karen
        Follow me on Twitter: mybizpresence
        July 4, 2010, 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!

        • Bernhard July 5, 2010, 3:00 am

          got it!
          You’re the BEST! ;)

          thx a lot

        • Jennifer August 24, 2010, 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, 7:14 am

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

    • Karen
      Follow me on Twitter: mybizpresence
      July 5, 2010, 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.

  • Christina July 5, 2010, 6:08 pm

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

    • Karen
      Follow me on Twitter: mybizpresence
      July 5, 2010, 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/

      • Christina July 6, 2010, 4:34 pm

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

        • Karen
          Follow me on Twitter: mybizpresence
          July 7, 2010, 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 August 10, 2010, 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.

        • Karen
          Follow me on Twitter: mybizpresence
          August 17, 2010, 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, 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

    • Karen
      Follow me on Twitter: mybizpresence
      July 7, 2010, 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!

  • Mary July 10, 2010, 8:17 am

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

    Any other suggestions?

    • Karen
      Follow me on Twitter: mybizpresence
      July 10, 2010, 9:55 pm

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

  • reyver July 11, 2010, 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 :DD

    • Karen
      Follow me on Twitter: mybizpresence
      July 11, 2010, 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

  • Daniel Doherty July 14, 2010, 10:41 pm

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

  • kara July 16, 2010, 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!

    • Karen
      Follow me on Twitter: mybizpresence
      July 17, 2010, 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

      • Karen
        Follow me on Twitter: mybizpresence
        July 17, 2010, 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.

  • kara July 19, 2010, 8:52 pm

    THANK YOU!!!

    you are AMAZING!

  • Hugh July 20, 2010, 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?

    • Karen
      Follow me on Twitter: mybizpresence
      July 20, 2010, 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.

  • Alex July 20, 2010, 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?

    • Karen
      Follow me on Twitter: mybizpresence
      July 27, 2010, 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.

  • Emma July 21, 2010, 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, 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! :)

    • Karen
      Follow me on Twitter: mybizpresence
      July 27, 2010, 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.

      • Djuly July 27, 2010, 5:40 am

        Thanks a lot!! :D

  • RemMem
    Follow me on Twitter: remakinmemories
    July 27, 2010, 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}

    • Karen
      Follow me on Twitter: mybizpresence
      July 28, 2010, 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.

      • RemMem
        Follow me on Twitter: remakinmemories
        July 28, 2010, 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!

        • Karen
          Follow me on Twitter: mybizpresence
          July 28, 2010, 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: remakinmemories
    July 28, 2010, 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!

    • Karen
      Follow me on Twitter: mybizpresence
      July 28, 2010, 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!

  • RemMem
    Follow me on Twitter: remakinmemories
    July 28, 2010, 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: remakinmemories
    July 29, 2010, 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!

    • RemMem
      Follow me on Twitter: remakinmemories
      August 6, 2010, 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}

      • Karen
        Follow me on Twitter: mybizpresence
        August 6, 2010, 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/

        • RemMem
          Follow me on Twitter: remakinmemories
          August 6, 2010, 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: mybizpresence
          August 6, 2010, 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: remakinmemories
          August 6, 2010, 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, 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, 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

    • Karen
      Follow me on Twitter: mybizpresence
      July 31, 2010, 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!

  • Harris
    Follow me on Twitter: HARIS355
    August 5, 2010, 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 ! :)

    • Karen
      Follow me on Twitter: mybizpresence
      August 5, 2010, 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. :(

      • Harris
        Follow me on Twitter: HARIS355
        August 6, 2010, 10:01 am

        Ohhhh… So sad… :(

        Now , are the gonna introduce any new feature ?

  • Kristie August 5, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      August 5, 2010, 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!

  • Jaye August 6, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      August 6, 2010, 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!

  • gigi August 7, 2010, 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?

    • Karen
      Follow me on Twitter: mybizpresence
      August 10, 2010, 7:13 am

      I do not know – anyone want to help?

  • Rio Nassar August 10, 2010, 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?

    • Karen
      Follow me on Twitter: mybizpresence
      August 10, 2010, 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!

  • Tatenda August 10, 2010, 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.

    • Karen
      Follow me on Twitter: mybizpresence
      August 17, 2010, 5:27 am

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

  • Jaye August 11, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      August 11, 2010, 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

  • Cedric August 11, 2010, 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?

    • Karen
      Follow me on Twitter: mybizpresence
      August 11, 2010, 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.

      • Cedric August 11, 2010, 9:45 pm

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

        • Cedric August 11, 2010, 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: mybizpresence
          August 13, 2010, 7:20 am

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

  • Jaye August 13, 2010, 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, 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, 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.

    • Karen
      Follow me on Twitter: mybizpresence
      August 17, 2010, 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!

  • Shira August 16, 2010, 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!

    • Karen
      Follow me on Twitter: mybizpresence
      August 17, 2010, 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?

      • Cedric August 18, 2010, 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

    • RemMem
      Follow me on Twitter: remakinmemories
      August 17, 2010, 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

      • Teri August 18, 2010, 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….

        • RemMem
          Follow me on Twitter: remakinmemories
          August 18, 2010, 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, 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, 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!

    • Karen
      Follow me on Twitter: mybizpresence
      August 19, 2010, 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!

  • Laurie London
    Follow me on Twitter: laurieblondon
    August 20, 2010, 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!

    • Karen
      Follow me on Twitter: mybizpresence
      August 20, 2010, 5:38 am

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

      • Cedric August 23, 2010, 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)

  • rob August 24, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      August 25, 2010, 7:47 pm

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

  • Noa August 25, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      August 25, 2010, 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!

  • amy August 26, 2010, 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 !

    • Karen
      Follow me on Twitter: mybizpresence
      August 30, 2010, 2:00 am

      Some tabs which started with bigger images still have them but any new tabs need 520 or less. Try smaller!

  • faraji August 30, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      August 30, 2010, 1:58 am

      Make sure you’re only using the http:// file URL not the other code they give. I believe there are options – you want the direct link.

      • faraji August 30, 2010, 2:06 am

        sorry to be a bother but..
        ok the series of links for the tabs looks like this (Contact) am i putting in the code from the image hosting address? wen i do, and select it, it takes me to another page instead of showing up in the box inside the app.

        • Karen
          Follow me on Twitter: mybizpresence
          August 30, 2010, 10:13 pm

          The code you sent me was for inserting a text link – not an image. Check above for how to insert an image that opens to a link. The img src code needs to be before the part.

  • Kara August 30, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      August 30, 2010, 10:08 pm

      You would add

      align=”right”

      within the img src code line .

      • Kara August 30, 2010, 10:24 pm

        Awesome! It worked! I was accidentally using CSS code. Duh.

  • Phil September 1, 2010, 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!

    • Karen
      Follow me on Twitter: mybizpresence
      September 1, 2010, 6:09 am

      Yeah I found that flickr doesnt always work – I dunno why. Try photobucket instead.

      • Phil September 1, 2010, 5:31 pm

        Thanks for the reply. I moved the shot to Photobucket and edited the FBML and still nothing. Any other thoughts would be most welcome.

  • prosy September 1, 2010, 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:

    • Karen
      Follow me on Twitter: mybizpresence
      September 15, 2010, 9:03 pm

      Can you try again – your code did not come through – use { and } instead of < and > to trick the website into posting it. :)

  • Julie September 2, 2010, 12:24 am

    What’s the code for wrapping copy around a photograph?

    • Karen
      Follow me on Twitter: mybizpresence
      September 5, 2010, 5:08 am

      Just put this within the img src part of the code:

      align=”right”

      or

      align=”left”

      It will automatically wrap it around the image then. If you want a buffer zone of white space you can also add within the image code:

      style=”margin-left: 10px; margin-right: 10px;”

      or 5 or 15 or whatever – that gives you horizontal space of 10 pixels so the words won’t butt right up against the image.

      • Julie September 7, 2010, 6:37 pm

        Thank you for the information, but can you give me an example of how the code would look? I’ve tried several variations and it’s not working. Thanks!

  • Chris September 6, 2010, 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?

    • Karen
      Follow me on Twitter: mybizpresence
      September 10, 2010, 9:27 am

      FB has been doing this for a bit now, basically to track where people are going (I believe). It should still take them to where you want them to go though…?

  • Nicole September 6, 2010, 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;}

    • Karen
      Follow me on Twitter: mybizpresence
      September 15, 2010, 9:02 pm

      I’m sorry that is beyond what I teach – I do basic html code and use tables (I know, so passe’!). Try asking over on The Fan Page Factory, Nathan knows a lot about this stuff! http://www.facebook.com/thefanpagefactory

  • Tawny September 10, 2010, 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?:

    • Karen
      Follow me on Twitter: mybizpresence
      September 10, 2010, 9:26 am

      I could not see your code but in general image maps work – check to see if it was too big? Or see above in the comments where I talked about the Test Console – try it out there?

  • Stephanie September 10, 2010, 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!

    • Karen
      Follow me on Twitter: mybizpresence
      September 15, 2010, 9:00 pm

      Hi Stephanie – I cannot see the full code in your post but I went to your page. Go up to View and down to Page Source in your browser and look for the section that shows the code for this tab (while you are on that tab). For example I did a “find” for “We take pride” to get me to the right area. Anyway compare that code to what is in your FBML tab and play with the values there. It looks good to me so maybe you already resolved this. Have fun!

      • Stephanie Brady September 15, 2010, 9:46 pm

        Yes… I was able to resolve the issue. Thank you for your reply, though!

  • Tawny September 11, 2010, 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, 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?

    • Karen
      Follow me on Twitter: mybizpresence
      September 15, 2010, 8:57 pm

      There is no limit on the length as far as I know but the width is now 520 pixels wide. Have fun!

      • Riddhi Mehta September 15, 2010, 9:12 pm

        Thanks!!

        one last query,
        i tried to use div codes but cldnt upload it… is there some code i need to use to make it run….

        • Karen
          Follow me on Twitter: mybizpresence
          September 15, 2010, 9:57 pm

          I am not really sure – should work on the Static FBML page, Try the test console mentioned above?

  • Africa September 15, 2010, 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!

    • Karen
      Follow me on Twitter: mybizpresence
      September 15, 2010, 10:42 pm

      That picture should work, but the code you sent through was only for a link, not for an image. Be sure you are using the Try again? PS I Love Barefoot Books!!

      • Africa September 15, 2010, 11:10 pm

        Thanks! I think there’s something wrong with the image, it’s still not working. Is this the correct format?

        .

        • Karen
          Follow me on Twitter: mybizpresence
          September 15, 2010, 11:33 pm

          No, the code that came through in email at least was {a}{/a} and there is no code like that. The site keeps stripping the code here. Try this:

          (a href=”whatever your link is including the http:// part – where you want the image to click through to”)(img src=”paste your image URL here the whole thing http:// up to the .jpg)(/a)

          Change the ( and ) to < and > and try again.

  • Brenda September 16, 2010, 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!

    • Karen
      Follow me on Twitter: mybizpresence
      September 19, 2010, 7:37 am

      The code did not come through – wanna send it to me through the Contact form on the red tab on the left here?

  • Bobby
    Follow me on Twitter: bobbyhagstrom
    September 17, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      September 19, 2010, 7:36 am

      Thank you – others have had trouble with that section too so I just took it off. Try again if you didn’t get through. Thanks!

  • Rania September 17, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      September 19, 2010, 7:36 am

      You could copy/paste the HTML code, but adjust it to only be 520 pixels wide?

  • mizboat September 21, 2010, 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!

    • Karen
      Follow me on Twitter: mybizpresence
      September 24, 2010, 5:40 am

      You’re very welcome! Thanks for the feedback! Love those pictures! Best of luck to you!

  • Rik September 24, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      September 24, 2010, 5:40 am

      I would just make the whole page background black, and that would fill in the gap!

      • Rik September 24, 2010, 10:40 am

        Great suggestion but what is the code for it and were would you put it? I have included my code if it helps.


  • Colleen September 27, 2010, 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!

    • Karen
      Follow me on Twitter: mybizpresence
      September 29, 2010, 7:57 am

      I am not sure how to do that – check the developer’s area but I would just adjust the options/settings on the existing wall so that only the page can post. Why reinvent the wheel?

  • Deena September 28, 2010, 12:34 pm

    Thanks so much for the help!

  • Tyler September 28, 2010, 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.

    • Karen
      Follow me on Twitter: mybizpresence
      September 29, 2010, 7:56 am

      You would need to host it somewhere online. Photobucket.com is my first choice! Then you can get the URL to paste in from there.

  • Andrew September 29, 2010, 4:30 pm

    Hello there to everyone…
    I want to make a comment form to my page…is that impossible ?

    • Karen
      Follow me on Twitter: mybizpresence
      September 29, 2010, 11:05 pm

      Try http://www.response-o-matic.com You can get a free form, they will give you the HTML and you can paste it into a Static FBML tab.

  • Lisa September 30, 2010, 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???

    • Karen
      Follow me on Twitter: mybizpresence
      October 1, 2010, 8:11 am

      I think you could use response-o-matic.com but leave out the name and email fields? Not sure but you could try!

  • cindy October 3, 2010, 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

    • Karen
      Follow me on Twitter: mybizpresence
      October 4, 2010, 12:18 am

      Hi Cindy – I cannot see your code but one explanation could be if the total image is too large – it needs to be less than 520 pixels wide.

      • Cindy October 4, 2010, 4:45 am

        Thank you Karen…it is 519px wide. I wonder why my code didn’t come through? The outline of the box is there, but there is an X in the upper left corner? here is my code again…let me know is you can see it this time, THANK YOU SO MUCH!

        • Karen
          Follow me on Twitter: mybizpresence
          October 4, 2010, 7:22 am

          Hi Cindy – your code will not go through unless you change the < and > to { and } – try emailing it to me instead. It could be you need it to be still smaller – the fact that there’s a spot but it is an X is making me think it’s an issue with the image itself, not your code but I dunno. Is it in JPG?

  • cynthia October 4, 2010, 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, 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.

    • Karen
      Follow me on Twitter: mybizpresence
      October 4, 2010, 8:04 pm

      Try adding this where you want a space {  } or several of them. Replace { and } with < and >.

  • cynthia October 4, 2010, 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!

    • Karen
      Follow me on Twitter: mybizpresence
      October 4, 2010, 8:02 pm

      Can you post your fan page URL so I can see?

  • Matt McMaster October 4, 2010, 9:20 pm

    Thank you. That worked awesome. I appreciate your help!

  • cynthia October 6, 2010, 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, 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.

    • Karen
      Follow me on Twitter: mybizpresence
      October 11, 2010, 10:22 pm

      Hi Julia – All of your code did not come through, only the a href= part so I cannot tell where the issue is (email it to me?) but sometimes when changes are made to images, FB doesn’t recognize the “revised” version. In that case, delete it from photobucket and then upload it again as a new image (new name maybe) and get the link again. The URL link is what you copy after the img src=”
      Karen

  • Tony Green, Realtor October 12, 2010, 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, 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

    • Karen
      Follow me on Twitter: mybizpresence
      October 15, 2010, 8:04 am

      Hmm I cannot see your code here. Click the Contact button and send it to me by email? Picturename just means the URL of the actual picture like http://www.whatever.com/whatever.jpg

  • jerry. October 15, 2010, 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?”

    • Karen
      Follow me on Twitter: mybizpresence
      October 15, 2010, 8:03 am

      If by “boxes” you mean the boxes tab – Facebook disabled those a few weeks ago. Otherwise, I dunno. Should work!! Try it without the CSS? Just a plain text hyperlink?

  • Asif Ali November 4, 2010, 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, 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, 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

    • Karen
      Follow me on Twitter: mybizpresence
      November 8, 2010, 8:46 am

      It’s OK the real code came through the email – you are forgetting the closing part of the link code. You would want to insert that wherever you want the link to end. Good luck!
      Karen

      • Jake November 9, 2010, 6:28 pm

        Ahhh, you are an FMBL queen to us FMBL peasants…. Much thanks.

      • Jake November 10, 2010, 11:21 am

        Sorry one more question for dummies. How do I get text to show directly under a linked image? I don’t care if the text is linked or not.

  • Cynthia November 8, 2010, 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, 5:10 pm

    You saved my life today! Very useful information!!

  • Sidd November 15, 2010, 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, 9:21 am

    TNX… YOU REALLY HELP ME! :)

  • Patrick @ Frat Music Playlist December 16, 2010, 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!

    • Karen
      Follow me on Twitter: mybizpresence
      December 17, 2010, 12:36 am

      You’re quite welcome! Pretty basic info, one of these days I will write a follow up with even more but this is enough to get someone going!

  • hannah December 16, 2010, 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?

    • Karen
      Follow me on Twitter: mybizpresence
      December 17, 2010, 12:35 am

      Awesome I am glad I could help. I don’t have any books, I pretty much taught myself from looking at others’ sites – go up to File and down to View Source or Page Source and you can see the code. w3Schools is a great resource though: http://www.w3schools.com/html/

  • Vicko December 27, 2010, 11:23 am

    Do u now some FBML font codes?

    • Karen
      Follow me on Twitter: mybizpresence
      January 3, 2011, 4:57 pm

      @Vicko, You can use regular HTML font codes within a Static FBML tab.

  • jack December 31, 2010, 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, 9:17 pm

    Hi Karen,
    Any suggestions where or how to start of having a moneyclub19.com as a fan page and use FBML?

    • Karen
      Follow me on Twitter: mybizpresence
      January 4, 2011, 9:52 pm

      @Sky, just go to http://www.facebook.com/pages/learn.php to get started with a fan page. You could probably just reduce that big image on the website to 520 wide and make a mini-site on an FBML tab though I dont know about that embedded thing – it isnt loading for me.

  • Aaron Lemley January 13, 2011, 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 13, 2011, 10:35 am

      @Aaron Lemley, If you use a service such as MailChimp you just paste the sign up firm embed code into an fbml tab.

  • Karen
    Follow me on Twitter: mybizpresence
    January 15, 2011, 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, 11:21 am

Next Post:

Previous Post:

Karen Clark

Karen Clark, Social Media SpeakerAs an experienced and active direct sales leader, Karen Clark walked the walk as she sold, booked, and supported a team offline, while expanding her reach and service online. Now working with entrepreneurs and direct selling companies as a speaker and social media consultant, Karen uses her 16 years' online marketing expertise to teach audiences exactly where, when, and how to establish an online presence with social media, while remaining true to their principles and personal business. Read more


Book a Speaking Engagement Business Motivational Speaker in San Francisco

Join me at the next Direct Selling Edge Startup Conference:
Use BESOCIAL discount code!Use code BESOCIAL for a 25% Discount!

National Speakers Association Professional Member

Women Speakers Association Founding Member

View Karen Clark's eSpeakers Profile

National Speaker's Association's Speaker Magazine

Praise for Karen’s Training

"I was so impressed by the presentation you gave at the Business Success Cafe - the slides were well organized and effective; the content was on-point and succinct; and I loved the actionable content at the end! I'm looking forward to more of the same in your course!"
-Karen Cleveland
ProcessMOJO
Google