Good Afternoon, Social Rabbit here with your guide to the world of social media.
UPDATE JAN 2012: At the end of June 2012 Facebook FBML tabs will no longer work, so you need to switch over to the static HTML tab instead, so follow the instructions below on how to add a welcome tab 
I have used this application – Static HTML: iframe tabs to add the iframe to my page, and so far I am loving it! Basically this works using HTML, and is MUCH simpler to use than the previous FBML app.
To use this all you need to do is:
- Go to the application
- Click on ADD TO MY PAGE (on the left side of the page)
- Choose the page you want to add it to when the box appears, then click close
- Go back to your Facebook page
- Go behind your Facebook page and click on APPS, find the Static HTML app you just added and click on EDIT SETTINGS, this will take you to the image below
Here you can make sure that your tab is added (ie it is showing on your page) and also decide on the name for your tab. If you change the name from the default of welcome, then remember to hit SAVE before clicking OKAY.
6. Now go to the front of your page, and find the tab that you just added (in the list on the left side under your profile picture) and click on it, which will take you here.
You need to add in the HTML code into the box or boxes, so you need to have an image or text that you want people to see. An image is best as it stands out and attracts attention. If you are adding an image the maximum width for your image is 520 pixels wide.
7. When your image is ready open a new tab in whatever internet program you’re using and go to Flickr.com. If you don’t have an account open one (it’s free) or sign in if you have an account, upload the image you want for your landing/welcome tab – this MUST be as a jpeg.
8. Click on “share” and get the HTML code, copy the code as below
9. The code below is what you have pasted from Flickr, if you DON’T want visitors to click on the image to go to a website then delete the section highlighted in red (but obviously in your code). If you want a link to NOT go to Flickr then change the http://…… section in the red text to where you want it to link to, make sure you don’t delete the “” as they are needed.
<a href=”http://www.flickr.com/photos/socialrabbit/4900378406/” title=”$10 Off by Social Rabbit, on Flickr”><img src=”http://farm5.static.flickr.com/4095/4900378406_4cd7542809.jpg” width=”500″ height=”400″ alt=”$10 Off” /></a>
10. With this tab you also have the option of fan only content, which means all you need to do is have a second image, or text that you paste in that box – how easy!
11. Once you have added the code you want to, then just click SAVE AND VIEW at the top right and check that the images are displaying correctly.
12. When you have done this you need to back into the backend of your page and change your wall settings so that new visitors land on this tab.
If you want to add more tabs you can just repeat as above. I look forward to seeing them all popping up! If you try this tell me your thoughts below in the comments.
37 Comments
Thanks for the tutorial, it was very helpful:-)
Hi Stephen,
Happy to help, just shout if you need a how to on anything else
SR
Thank you! Very easy to follow and works great.
Hi Veronica
Happy to help, I’d love to see what you’ve added if you are happy to share your page link
SR
Hi,
Thank you for this tutorial. I found your post by accident and this helped us a lot, coz we are trying to do a facebook page with iframe for past 2 days but no luck. Thanks again for the wonderful tutorial!!
Hi Thy,
I’m really pleased to hear that it helped, searching for 2 days must have been REALLY annoying!
SR
Thanks.. !
Its really helpful… hope to see more from u
Thanks Rosh,
You can sign up to the rss feed and get every blog post
SR
Thank you very much for this how-to. This was very helpful!
Hi SR, What a great post, thank you! I look after Flying Solo’s Facebook fanpage and want to change from the current FBML welcome page to an iFrames one. Do I basically go through the process described above, copy and pasting the HTML from FBML over? Can I ‘keep’ the current welcome page active while building the other or will I have to kill FBML first? I guess I’m a bit nervous about breaking it
Looking forward very much to meeting you face to face in September. Love your work, Sam
Hi Sam,
Yes add the HTML tab and copy and paste the code from your FBML tab onto it and then check you are happy. You can hide your FBML tab, you don’t need to kill it if you are feeling nervous after you have set the new one up. To do this just go behind your page and click on apps, find the FBML app and click on edit settings, there you can hide it by clicking on remove, which doesn’t kill the tab, it just means us non-admins don’t see it.
Yep, the workshop session in September will be lots of fun! Save up your questions
SR
Hi,
Is it possible to have two of these tabs on the same page? I could not see how to add a second static html tab on my page.
Thanks
Hi Michael,
It depends on the app that you are using, some let you add more than one, some don’t. However there are so many app’s that it doesn’t really matter, you can just add a different one, I’ve named 5 here: http://www.socialrabbit.net/2011/03/5-ways-to-add-a-welcome-tab-to-your-facebook-page
Good Luck,
SR
Hi! Great tutorial. i had a question about the link. Once I swapped out the link for my own (instead of it going to flickr, I had it go to my website), when I clicked the photo, it opened the website within the frame of that facebook page. Is there a way to program it so that it opens up in a separate tab? Thanks!
Hi Susan,
Thanks for the comment. This is odd, as when I’ve used it it has always opened in a new window. It may be to do with your browser settings. Sorry I can’t be more help.
SR
Hello SR
Hope you can help. Is there a way to add more than one link into an image? Say for the above BND example if you wanted all 3 white box areas leading to different urls, would that be possible?
Thanks
Corinne
Hi Corinne,
Yes, you just do the same thing 3 times. You might need to do some fiddling about with size etc depending on your images. But yes it can be done
Good Luck,
SR
Thanks SR
Did you ever investigate Susan Kristoff open in anew window problem – I seem to be having this as well….
Thanks
Corinne
I figured it out
To open in new page you just need to add target=”_blank”
after the url and before img
Thanks
Corinne
Yes, great. I was going to email Susan and let her know, thanks for saving me the job
Hi there – I must be a doofus as I can’t get this app to work. I have followed your instructions but (a) I cannot view the welcome page as a liker or non-liker from the app edit page and (b) if I log out of FB and locate my page (as a “non-liker”) the welcome tab just shows the flickr url for my image.
Also, I don’t have any of the red text in the flickr url referred to in your instructions.
Help! I’ve spent all night creating my welcome image only to be stymied at the last minute. Ho hum.
Hang on – I may have worked out the problem – had a closer look at your flickr screen dump and see you have a share link called “Grab the HTML”. I only get “Grab the link”. Is this something to do with my flickr account settings? Sorry, I am a newbie!
Me AGAIN – it’s ok, I have found the HTML code so ignore my posts above – no need to post them! Sorry again for bombardment! Embarrassing!
In one of your final steps you said :
“12. When you have done this you need to back into the backend of your page and change your wall settings so that new visitors land on this tab.”
How do you do this?
Hi Viviana,
Yes, go behind your page, click on manage permissions and choose which tab you want to be your default landing tab.
Good luck.
SR
Thanks so much for this post, was really easy to set up with all your clear instructions! I had the same trouble as Corrine with it opening in the same window. So thanks Corrine for posting your solution, fixed the problem!
Great to hear Tasha
Hi,
I have finished putting an image for the welcome page and it worked BUT when I set it as the default landing page – “Welcome” it doesn’t work. I tried refreshing and relogging in but still it lands on the Wall page. Any help? Thanks.
Hi Justin,
Only people who DON’T like the page will land on the tab, after people like it they will ALWAYS land on the wall. So unlike the page then try.
SR
I see now. Thanks! Your tutorial really helped.
Hi SR,
I didn’t manage to paste a photo. How do I do it?
Can I still paste any photo after Facebook has restricted where the content can come from? Since 1st October they require an SSL certificate for the websites you get the content from.
Thanks!
Hi Babett,
This definitely works you need to follow the instructions exactly as above and you will be able to do it.
SR
Hello,
I’m just getting to grips with this and am wondering if you can remove the coloured box border that appears on my 2nd image in my tab that I have linked to a URL?
Many thanks,
Victoria
Hi Victoria
The coloured border on your image will be on the image that you uploaded to Flickr, it is not anything that Flickr or Facebook have added. I hope that helps.
SR
this was so much help thanks a lot ! but i can’t still figure out how to add more tabs using iframe , also i can’t figure out where to locate landing tab option in the new timeline ! it’s so confusing why they had to make it so fancy not everyone understands this stuff !
Hi Rana
There is no landing tab option on the new timeline, everyone always lands on the timeline, there is nothing that can be done to change this. To add more tabs using an iframe just look for the app and add it the same as before
SR
thank you so much for this, it really helped me..