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 }
{ 105 comments… read them below or add one }
← Previous Comments
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: MyBuzPresence
Reply:
August 30th, 2010 at 2:00 am
Some tabs which started with bigger images still have them but any new tabs need 520 or less. Try smaller!
[Reply]
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: MyBuzPresence
Reply:
August 30th, 2010 at 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.
[Reply]
faraji Reply:
August 30th, 2010 at 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.
[Reply]
Karen
Follow me on Twitter: MyBuzPresence
Reply:
August 30th, 2010 at 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.
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: MyBuzPresence
Reply:
August 30th, 2010 at 10:08 pm
You would add
align=”right”
within the img src code line .
[Reply]
Kara Reply:
August 30th, 2010 at 10:24 pm
Awesome! It worked! I was accidentally using CSS code. Duh.
[Reply]
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: MyBuzPresence
Reply:
September 1st, 2010 at 6:09 am
Yeah I found that flickr doesnt always work – I dunno why. Try photobucket instead.
[Reply]
Phil Reply:
September 1st, 2010 at 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.
[Reply]
What’s the code for wrapping copy around a photograph?
[Reply]
Karen
Follow me on Twitter: MyBuzPresence
Reply:
September 5th, 2010 at 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.
[Reply]
Julie Reply:
September 7th, 2010 at 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!
[Reply]
← Previous Comments