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

Basic HTML code for your Static FBML pages on Facebook

by Karen

in Facebook

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

To make a word clickable to another website:

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

To insert a picture:

<IMG SRC=”http://www.whereverthepicturelives.com/picturename.jpg”>

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

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

To skip down to the next line:
<BR>

To skip a whole line between items:
<P>

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

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

To make words ITALIC:
<I>whatever word you want italicized</I> (that is the capital letter
i)

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


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

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


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

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

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

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

{ 2 trackbacks }

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

{ 105 comments… read them below or add one }

amy August 26, 2010 at 3:49 pm

how can i have a picture this big in a tab?
http://www.facebook.com/?ref=home#!/NesvitaPakistan?ref=ts
i am using the simple <img src=”http://www.whereverthepicturelives/picturename.jpg” code ! but i am limited to 520 px only due to new facebook rules, how come everyone else still has pictures this big ! i need a code help help !

[Reply]

Karen
Follow me on Twitter:
Reply:

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

[Reply]

faraji August 30, 2010 at 1:45 am

thank you this really helps. i have the fbml fan page app and novice knowledge of html.fbml codes. when the tabs are selected within the app it opens up a new window for the website or pics, instead of showing inside the app like its supposed to. how do i fix this? you can call me if you need to 347-878-1574 thank you kn advance

[Reply]

Karen
Follow me on Twitter:
Reply:

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.

[Reply]

faraji Reply:

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.

[Reply]

Karen
Follow me on Twitter:
Reply:

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 at 9:45 pm

How do I get text to feed next to a picture in a custom FBML tab? I know how to set it up in HTML, but that doesn’t seem to work. Is it possible? An example of what I’m trying to do: http://www.premierhcs.net/ed_brochure.asp

Picture to the right, text flowing next to it on the left

[Reply]

Karen
Follow me on Twitter:
Reply:

You would add

align=”right”

within the img src code line .

[Reply]

Kara Reply:

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

[Reply]

Phil September 1, 2010 at 2:45 am

Hi. Fantastic article!
I copied your code to insert a picture linking to a website and saved changes to the FBML box. When I click the tab, I get the red “X” inside the box and when I right-click to show pictures, nothing happens. The link is functional and the alt-tag shows, just not the photo. The photo itself is a JPEG 520 pixels wide and is hosted on Flickr. Any ideas would be greatly appreciated. Thanks!

[Reply]

Karen
Follow me on Twitter:
Reply:

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

[Reply]

Phil Reply:

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

[Reply]

Julie September 2, 2010 at 12:24 am

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

[Reply]

Karen
Follow me on Twitter:
Reply:

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.

[Reply]

Julie Reply:

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!

[Reply]

Leave a Comment

Previous post:

Next post: