My most popular article, by far, is How to Add a Custom Tab to a Facebook Fan Page. And one of the questions related to that article that I get asked the most frequently is, “how do I add content to the custom tab?”
The short answer is in order to add content to a custom tab created with FBML, you have to use HTML. If you don’t know any HTML, there isn’t much you can do with the tab.
HTML isn’t something that I teach so I often refer people to the HTML guide at w3schools. Of course, learning HTML just to make a custom tab for Facebook may be more than people want to do.
The simplest thing to do is make an image that links back to your website. Make sure that it isn’t more that 520px wide because of Facebook’s size limitations. And you have to host the image on your web server or an image hosting service – it can’t be uploaded to Facebook. Then you only need two bits of HTML; the code for an image and the code for a link.
image code: <img src=”http://yourdomain.com/image.jpg”/>
link code: <a href=”http://yourdomain.com”>image</a>
Put it together:
<a href=”http://yourdomain.com”><img src=”http://yourdomain.com/image.jpg”/></a>
If you want to keep the link from putting an ugly border around your image, add border=”0″ to the image code.
<a href=”http://yourdomain.com”>
<img src=”http://yourdomain.com/image.jpg” border=”0″/>
</a>
This is the easiest way to add content to your Facebook tab without knowing HTML. You can make a fancier layout with additional code but this should be enough to get most people started. And if you really want to learn HTML, the guide I linked to a the beginning of the article should help. Another useful technique is to view the source code of any web page you are viewing. (that’s how I first learned waaaaay back ;-) In Firefox you can do this by going to View > Source.
If you would like to hire me to assist with your custom Facebook tab, please use my contact form.
That is soo cool. Now that you mentioned it, I’m going to my own Facebook page and edit my custom tab. Thanks.
Hi Pam – Great!
Good tutorial. Maybe this could help spice up my Facebook fan page. :)
Thanks Dean!
Terrific Post! I am really into social media right now (like everyone else out there!), especially Facebook Marketing and FBML. It can be hard to keep up to date with such a fast changing innovative topic but I manage to do it through the fan page factory (http://facebook.com/thefanpagefactory) and blog posts exactly like yours. Tips and tricks rock. I am trying to learn as much as possible to put myself ahead of the curve. So thank you again!
Enjoy,
Aaron
Hi Aaron – Thanks for your comment – I really appreciate it :-)
Hey Kim, I like learning HTML in baby steps like this. It makes it some much easier to retain. I’d like to make sure the image has a rule (1 or 2 picas) so can you show me where to add that line of code please?
I think I’m getting HTML and CSS mixed up at times :(
Thanks Kim!
Hi Ileane – You could change border=”0″ to border=”2px”. You could also add inline styling.
<img src=”image.jpg” style=”border:2px #000000 solid”/>
The #000000 is the code for black – it can be any color.
http://www.w3schools.com/CSS/css_howto.asp
I’m new to the blog and am trying to set up my FB page. Is there a way to get my custom tab to come up as the default tab? Got a post on how to do this?
Hi David,
The tab can be set as the default tab for new visitors. Once they become a fan they will be taken to the wall – there isn’t anyway around that.
Go to
Edit Page > Manage Permissions > Default Landing Tab (dropdown box)
Thank you! I think you have solved my problem! I volunteer for a rescue and want to have a landing page that included a “donate” button. You explination is so easy to read I don’t think I could mess it up.
Hi – Glad it helps. Good luck with the page.
Very helpful Kim. John Haydon turned me on to your blog. Great stuff. Thanks!
Hi Jeff – Great! And thanks so much for saying hi :-)
I have the HTML code and the tab is up on our work facebook page but when i put the HTML coding in and press save changes, nothing shows up. it’s just a blank page. what am i doing wrong? our facebook page is http://www.facebook.com/SuasionMarketing.please help!
Hi Alyx – Double check the code especially the image part. You also want to make sure that the image is hosted somewhere that Facebook can access.
Thanks for this Kim. I am also wondering, on these custom tabs, can I insert videos into them? I have tried using the embed code that they provide you with on YouTube, and also the code on my own website that is used to embed videos from YouTube, but neither of these seem to be working at the moment. Thanks for any help
Hi Jonny – You can’t use the straight embed code – it contains a script, which isn’t allowed in fbml.
This article should help.
http://www.kimwoodbridge.com/how-to-add-a-flash-video-to-a-custom-facebook-fan-page-tab/
So I followed your instructions and added my logo to my “blog” tab on my FB. But I can’t link it to my web site. I went over the code a million times and can’t see what I did wrong. Can you help:O)
Thanks!
My FB page ~ http://www.facebook.com/home.php#!/pages/Amelya-Jayne-Photography/325174980154
My code:
The images seem to be linking to tinypic. Where it says something like
<a href=”http://tinypic.com/?ref=rkprfn”>image</a> you will want to change the link part to your site.
thanks so much for this article! i just recently took an interest in beautifying my fb page this came in really useful! thanks!
Hi ikay – Glad it helped.
I have noticed that 90% of our clients turn to Facebook prior to typing in our web address (www.pamelastravelingfeast.com) therefore I wanted our FB fan page to resemble the actual web site. I was able to create the custom tags with Static FBML but am having a difficult time with the coding, i am clueless and our web designer uses software in which HTML coding is not used. Could some one please point me in the right direction? Thank you in advance!!!
Hi Stacy,
If you want the custom tab to resemble your website than html will need to be used. You may want to hire someone to do the project for you. You can see examples of pages that I’ve done here
http://www.kimwoodbridge.com/portfolio-2/#facebook