Add a “Welcome Page” to Your Facebook Fan Page

Hi everyone! This article is in response to a previous blog post announcing InteriorDesignPro’s newest Facebook Welcome Page. This article will now explain how to add an attractive Welcome Page to your company’s Facebook Fan Page.

Welcome Pages are a great way to instantly grab the attention of visitors when they first visit your Fan Page, and let them know what your page is all about. An appealing Welcome Page is a sure fire way to increase “Likes”, and anyone with a Fan Page can create one (it just takes a little effort). Personal profiles cannot use this feature.

I’ve decided to write out every little step to better explain exactly what you’ll need to do. Although this article may seem a bit long, the steps themselves should be rather easy to follow. Read carefully, take your time, and you should have no trouble successfully building your very own Welcome Page.

Note: It helps if you are already logged into Facebook before following these steps.

1. Add the application “Static FBML” to your Fan Page

The first thing you’ll need to do is find the Facebook application called “Static FBML”, located here.

Allow me explain what this application does:

You’re already familiar with the different blue tabs that come standard with your Facebook Fan Page (i.e. Wall, Info, Photos, Links), this application will magically create an additional blank tab where you can add whatever content you want, including custom graphics and links using standard HTML.

(If you don’t know how to write programming code using HTML, not to worry, later I’ll share some basic tips that will help make this step pretty simple.)

This is what you need to do to assign the “Static FBML” application to your Fan Page:

1. First you need to visit the “Static FBML” page. Click here to visit their page on Facebook
2. On the left side of the screen (directly under their profile image) click on the link that says “Add to my Page”. I’ve circled it in red in the image below.
   
3. After you click on the “Add to my Page” link, a new window will appear on your screen with a list of all the Fan Pages you manage (you may have multiple pages). Click the link “Add to Pages” for the pages you want to add the application to.
4. After you click on “Add to Pages”, that Fan Page will remove itself from the list (which means it is now one of your Fan Page applications).
5. But you’re not done yet…Now click the “Close” button (which is located in the bottom right of the pop-up window), and we’ll move on to the next step.

2. Time to Set Up Your New Welcome Tab

Now that you have added the “Static FBML” application to your Fan Page, you need to actually go to your Fan Page and activate it. To activate this application, go to your Fan Page, then click on the “Edit Page” link below your company’s profile image (Look at where I have circled in red in the image below). This will bring up all your Fan Page settings.

Note: As of March 1st, 2011, Facebook is implementing a new layout for your Facebook Fan Page. The “Edit Page” link will be in a different place and it will now be called “Edit Info”. It will be located directly under the title of your page. Check out the image below, I have circled it in red.

After you click on the “Edit Page” link, it’s time to get down and dirty. On the left side of the page, you will see a handful of links with icons next to them. These are all the options you can use to edit your Fan Page. For this article, we are only interested in one of these links. Click on the link that says “Apps”. It is the 4th link from the bottom. I’ve circled it in red in the image below.

After clicking the link “Apps”, there should be a list that populates on the page. This is a list of applications your Facebook Fan Page is using. This list could be long or short depending on if you are using any other Apps. Now you need to look for the “FBML – FBML” App and click the link that says “Application Settings”. I’ve circled it in red in the image below.

The app can function in two ways: As a set of boxes (which we are not using), or as one dedicated profile tab (which is what we will use as your Welcome Page). Since we are creating a Welcome Page, go ahead and make sure that the “Box” setting is removed, and the “Tab” setting is added. When you’re done, it should like like the image below.

3. Time to Add Your Content!

Now that we have the application set to work as a dedicated tab (which will be your Welcome Page), make sure to go back to your “Edit Page”, click on the “Apps” link, then locate the “FBML – FBML” App once again. This time you don’t want to click on the “Settings” link. This time you need to click the “Edit” link under the FBML App (I’ve circled the link in red in the image below). This will open a page where you can now add the content that will appear on your Welcome Page. YAY! But we’re still not done yet…

Now is the time to add the title of your new Welcome tab and the content that will be displayed as your Welcome Page. The field “Box Title” will be the name of your tab, so you’ll want to change it to something appropriate, like “Become a Fan,” “Join Us!,” or simply “Welcome,” depending on how you plan to use your Page.

The main text field (“FBML:”) is where your Welcome Page content goes. Here is where you can add standard HTML as you would any website, including images, text, links, and other formatting.

Now, what I personally like to do instead of writing very long lines of HTML code is make one single image using Adobe Photoshop, which I use as my Welcome Page (you should save this image as a JPEG, GIF, JPG, or PNG file format). The width of your image should be no larger than 524 pixels because the space available is limited to that width. In the Welcome Page image I’ll include all the text, images, and background colors that I want to use in my Welcome Page. I then upload the Photoshop image to my website’s sever, to my blog media, or even to Facebook, then place it in this FBML text box using simple HTML coding. Below is our current Facebook Welcome Page image.

And to use the image above as InteriorDesignPro’s Welcome Page, this is all the HTML code I had to enter into the FBML Text area:

<img src="http://www.interiordesignpro.org/images/FACEBOOK-LANDING-PAGE.jpeg">

This code is telling Facebook to display the image “http://www.interiordesignpro.org/images/FACEBOOK-LANDING-PAGE.jpeg” in my Welcome Page. That is the URL address for the image I uploaded earlier. All you have to do is get the URL address for the image you uploaded, and replace my URL address with yours.

<img src="your-URL-Address-goes-in-here">

Here is a link that explains how to get the URL address of an image: Yahoo Answers!

Once you have inserted this HTML code into the FBML text field, scroll to the bottom of the page and click the “Save Changes” button. If you then go back to your Facebook Fan Page, there should be a new tab with whatever title you gave it. Inside the new tab should be the image you want as your Welcome Page.

Plan B

Now, if this doesn’t work for you because you do not want to make a single image to use as your Welcome Page, I have a little trick that everyone can use. There is a website called http://ckeditor.com/demo. With this website, you can arrange and write whatever you want (images, links, text, titles) just like a Microsoft Word document, then with one simple click, it will convert whatever you arranged into HTML coding. Then you just have to copy that HTML code and paste it into the FBML text field.

Here are the steps to do this:

1. Visit the website http://ckeditor.com/demo
2. When you get there, there will be a text box with an example article in it. Right now the example is “Little Red Riding Hood”
3. Click anywhere in that box and totally delete the sample article. A quick way to do this is click anywhere in the article, then press CTRL+A to select all the content, then hit your delete button. This should clear the entire text box.
4. Now you can write anything you want in the text box (just like Microsoft Word), add whatever images you want, and also include links and titles.
5. Once you have everything where you want it, there is a button in the top left corner of the text box that says “SOURCE”.
6. Click on the “SOURCE” button. You will now see a bunch of HTML coding in the text box. (Don’t get scared)
7. You need to copy ALL of that HTML code, go back to your Facebook Page, and paste it into the FBML text field.
8. After you paste it, scroll to the bottom of the page and click the “Save Changes” button.
9. If you now go back to your Facebook Fan Page, your new Welcome Page should be one of the tabs available.

Note: If your page does not look the way you want it to look, keep playing with it on the http://ckeditor.com/demo website until you get it right. Just keep clicking on the “SOURCE” button in the top left corner to switch between the regular view and the HTML coding in the text box. Remember that the Facebook Welcome Page has a certain width, so not everything will fit on the same line if it is too long.

4. Make It the First Page Visitors See

If you want this new tab to be the “face” of your business Fan Page, head back over to your “Edit Page” settings and click on the link on the left that says “Manage Permissions.” Inside the “Manage Permissions” link, there is a drop-down menu option called “Default Landing Tab”. From that drop-down menu, select your new Welcome tab. The name of the tab should be the same as whatever you titled it in the FBML application.

From now on, it will be the first thing visitors see when they arrive to your Fan Page.

Final Notes

I myself found this process to be very tedious and confusing at first. But after a little practice, I am now able to create these pages in no time. If you get lost at any point, take the time to reread the steps to make sure you are following them correctly. Also, when you add your company to our Interior Designer Directory, you can link to your new Facebook Welcome Page from your InteriorDesignPro profile. This type linking is a great way to boost the rankings of all your online pages including your company’s website.

If after a few attempts you still cannot successfully setup your Welcome Page, leave a comment below and I will try to suggest ways of getting the Welcome Page to work for you.

Cheers and good luck!

Jason Haloossim
Co-founder
Interior Design Pro
P.S.    Click Here to Become My Friend on Facebook!