How to Create Custom Welcome Page Using Facebook FBML Application

This is a guest post by Fairooz who blogs at Technotweaks. If you would like to write for ShoutMeLoud, check our guest posting guidelines.

We all have a Facebook page for our blog/websites. We know that Facebook is one of the best platform to promote our blog, and get in touch with our readers.  Creating a Fan page is very easy and everyone knows that. We also know about landing page or a “Welcome Page” which attracts the first-time visitors of the FB page. I am going to show you how to tweak the landing page of your Facebook fan page and make it more attractive.

The main thing we are using here is of course, the static FBML app. We will add a little more customization (which is called image mapping) to it and make the landing page more interesting.

Adding FBML to your Facebook Page:

First of all,  you have to add a FBML page, if you dont have one. If you are already using FBML, skip this tip! To add FBML, go to your page and click on the button called “Edit Page” at the top right.

Now click on the link called “Apps”

There you will see an app FBML. Click “Go to App”

You will be asked for allowing permission to add this app. Click “Add Static FBML”

Now you have added FBML page to your Facebook Fan Page! You can add elements to it by typing in the FBML box like the one shown below:

Now you have to make this FBML tab as the default landing tab by going to Edit page >> Manage permissions.

Adding a Facebook Welcome Box:

If you already have a welcome box,  you can skip this step!

Adding a welcome box in Facebook is not difficult if you know a little bit of photoshop. You can create a box yourself with your own design and text like “Click the Like button above“. You will get a little more idea on adding more things in it after you read the rest of this post.

Important: When creating the box, make sure its width does not exceed 520px. You can decide the height, but don’t make it too lengthy.

This is an example of a Welcome Box:

Welcome box can easily be attached on your FBML by entering this code:

<img src="YOUR IMAGE URL">

Image map for FBML:

This is the main part of this post. As we can see the static box above, it is created by preparing for Image mapping. Image map allows you to place any images or words on the main image. For example: A “follow me on twitter” button or an Email Subscription form can be placed anywhere on the Welcome Box using image map. Doing that will really attract your welcome page. You can have as many buttons as you want, on your box image.

This is an example of a live Welcome Page with image map:

In the above welcome box, the buttons such as Share this, Follow me on twitter, Visit my site, Email subscription form, etc.. are live and active. These buttons are placed right on main image. This is done by image map. This image map can be done using DIV elements on the main image.

For doing the image map, Copy and paste the below code directly to your FBML box:

in the above code, replace the blue codes with your HTML codes of anything that you want on the main image. Change the codes shown in red, for changing the position accordingly. There are four DIV elements displayed in the above code. if you want to add more, Just copy-paste a DIV element and change the div id value to fb5, fb6 and so on.

Replace MAIN IMAGE URL with the URL of your Welcome box.

And you are done! Customize the codes and images with your own creativity and boost your Facebook page.

Any questions? Let me know. Post it as a comment here!

Article by Fairooz Mohammed

Fairooz has written 3 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

Follow @ShoutMeLoud