Video – How to Create a Custom Welcome Tab on Facebook Fan Pages
25 Feb
A custom welcome tab is a great way to convert visitors to your Facebook fan page into fans and grow your presence on Facebook. fbadz.com is setting up our own fan page and this video walks you through the steps of how to create a custom welcome tab with an image and make it the default tab for non-fans when they visit your fan page. This is done using the FBML application on Facebook. FBML is Facebook’s mark-up language, similar to HTML, and it allows for complete customization of Facebook fan pages. The steps outlined in the video are below.
Steps:
1. Create a welcome tab image that’s 520 pixels wide. To be viewed without scrolling, the maximum height should be 500px. Note: You can use 750px as the maximum width but Facebook will be changing this spec to 520. Tip: Have a strong call to action for viewers to become a fan of your page.
2. Host the image online. Tip: http://tinypic.com/ is a great photo hosting resource if you don’t have your own server.
3. Go to your Facebook fan page’s admin management portal. You can access this by clicking the ‘Edit Page’ link that appears right beneath the fan page’s profile picture.
4. Add the ‘Static FMBL’ application to your fan page. To do this, scroll down to the bottom of the page. There will be a box that reads ‘More Applications.’ Click the ‘Browse More’ link. Or simply go straight to the applications directory here: http://www.facebook.com/apps/directory.php. Search for ‘Static FBML.’ Click on the ‘Static FBML’ search result. Then click the link ‘Add to my page’ that appears right beneath the profile picture of the app’s page. On the pop-up box, click “Add to Page” beside the fan page that you want to add the custom tab on. Your fan page admin area will now have the Static FBML app in the admin management portal.
5. Once the FMBL application is added to your fan page, go back to the admin management portal and click ‘Edit’ in the Static FBML box.
6. Type the name of your tab in the “Box Title” field – this is what will appear on the actual tab navigation area. Examples include “Become a Fan” or “Welcome”.
7. Type this html/fbml code into the FBML editing area:
<center><img src=”LINK TO YOUR IMAGE GOES HERE”></center>
8. Click ‘Save Changes’
9. Go back into your admin management portal and find the FBML application. It will have the title of the tab in the name.
10. Click ‘Application Settings’
11. Click ‘remove’ beside the box option and ‘add’ by the tab option. It should look like this when you’re complete:
Box: Available (add)
Tab: Added (remove)
12. Your tab is now live!
13. If it’s buried, you can make it visible on your fan page by moving it to the top 6 tabs that are shown on fan pages. To do this, click the arrows tab that appears to the far right of the visible tabs. Click your custom tab and drag it to the visible tabs area. The tab that was closest to the arrows tab will now be buried.
14. To make the tab the landing tab for non-fans of your page, go to the Wall and select the ‘Options’ link that appears right beneath the status update publisher. It has a little looking glass icon. (You can also edit the Wall Settings in the admin portal area too.)
15. Then click ‘Settings’ link.
16. For the option ‘Default Landing Tab for Everyone Else:’ select your custom tab from the drop-down b0x. It will be listed as the name of your tab.
17. Congratulations! You’ve created a custom landing tab for your Facebook fan page for non-fans!
Have you seen any great welcome tabs on Facebook? Have any questions about custom tabs or boxes on Facebook fan pages? Share here!
Post written by Helen Todd aka @helenstravels. To learn more from fbadz.com, become a fan!
Hey,
Very interesting article …
We built a light weight app specifically for the purpose of enabling ‘Welcome Tab’.
Check it out here – http://apps.facebook.com/welcometab
I will really appreciate if you include a mention to it in your article.
We are going to add some serious level of analytic to this app + other planned apps so that owners can see how much traffic they are getting.
Thx
Rajat Garg
WOWW!! This helped a lot to me!!! *two thumbs up*
You’re very welcome – glad this was helpful! If you’ve created a custom landing page, be sure to share the link and we’ll become a fan! Thanks for checking out fbadz.com!
thanks, this worked a treat, here’s our new welcome page.
http://www.facebook.com/nzopera
Thanks for sharing! It looks good! If you want to make it the tab that new visitors land on, you can change the setting under “Default Landing Tab for Everyone Else:” to the name of the tab. Glad the video helped!
Brilliant! It worked spot on! Here is my new landing page for my facebook wedding photography fan page.
http://www.facebook.com/pages/Urban-Bridesmaid-Photography/29394928553
Awesome – just checked your new landing page and it looks great! Glad the video helped! And as soon as you get 25 connections you’ll be able to get a vanity URL too at http://www.facebook.com/username. Let us know if there’s anything else we can help with!
Hey..
If I have a Facebook ad leading to my page…and Ive changed the settings to lead to a different tab then the people clicking on the add will reach my wall or that tab?
thanks
Hi! Thanks for the question – it’s a good one. Any person who visits your site and isn’t a connection (previously known as fans) will land on whatever tab you set to be the landing tab, regardless where they’re directed from.
To answer your question about Facebook ads, it depends on how you set up the ad:
If you clicked “I want to advertise something I have on Facebook” which directs users to a Page and has the Page name as the default then the ad will direct users to whatever is the default landing tab that you select (I believe this is what you were asking)
If you clicked “I want to advertise a web page” then you can customize the ad title and pick a URL to direct that ad to. You can actually add the direct link for a specific Facebook tab here that’s not the landing tab. It’s a nice trick just in case you want to direct people to something beside the landing tab on your Facebook page. I always recommend using the inline “Like” button for Facebook ads though.
Hope this helps and let us know if you have any other Qs!
Helen
Why can’t I see my customized picture? on my Welcome tab?
Great tutorial. So easy and helpful – thanks!
http://www.facebook.com/catchthebouquet
(let me know if it isn’t working though!!)
Cheers!
Bella
You can email more details and/or the code to contact@fbadz.com for review. We’ll double-check it for you.
Great job – it looks good and works properly!
Thanks so much for the clear instructions! I’m a non-tech person, and I did it. Take a look and become a fan: http://www.facebook.com/photospinbymichellespinola
Worked like a charm. I searched many places for this information and you have the best tutorial. Thank you so much.
thanks for that
but i want to put a share icon for my page under the welcome tab photo
can i do that?
Hi Amir,
You can do that! You’ll want to reference the Facebook developer’s website for specifics on it. With the new iframes, Pages can do a lot more functionality!
nice tutorial. i have made mine at
http://facebook.com/gtricks