Create a Welcome Tab for Facebook Fan Page

On August 23rd (2010) Facebook will automatically resize all custom tabs to a maximum of 520 pixels wide.

Have you seen them? Blogs and companies with cool tabs on their facebook fan page? Like this one. Even if you don't have a fan page for your blog, I'm sure you have a personal page. If you have seen these cool tabs and wondered how to make your own... then wonder no more!

I am by no means a blogging expert. I have very little knowledge of coding but I did figure out a way to create a blog tab on my facebook page. It was super easy!

So do you want one for yourself?

For this tutorial we will be making a "Welcome" tab but you can adjust the tab to whatever you want.

First...
You will need to open up an image editing program like Photoshop. If you do not have Photoshop (I don't) then you can download Gimp for free. I will be using Gimp for this tutorial.
You will need to create a new image about 520x600. (Go to File - New)

This is where you can write a welcome message. You may want to describe your blog, what it has to offer readers, maybe give some information about yourself. Whatever you want. To make a text box click on the "A" in the Toolbox Bar. Make the text box the size of your entire image so you can fill up the box with your welcome message. You can change the font, size and color all from the Toolbox Bar.

Now that you are done with your welcome message you can save it. Go to File - Save As. Name your welcome message and choose where to store it in your computer. *At the bottom of the screen is a + Select File Type. Click the + sign and choose Gif, JPEG or PNG.* (I normally choose JPEG.) Click Save. A window will pop up telling you JPEG can't handle the transparency... that's fine. Click Export. This will bring up another window. Move the quality bar until it says 100 and then save it.

Next...
Log into your blog account and create a new post. Here you will upload any images you want on your welcome tab. If you have a custom blog header then I recommend uploading this image at the top of the page. (Blogger will automatically make your header small. Go ahead and make it large or Xlarge.) Underneath your header upload the welcome message image you just created in Gimp. It should look something like this:

Next...
When you are done adding images, open up a new window in your browser (leave the blogger window open) and log into your facebook account.

To add the Welcome Tab to your fan page:

1. Go to your fan page and click "edit page". Scroll to the bottom and in the More Applications box click on Browse More. In the search box type Static FBML. Choose the application titled Static FBML (the top one in this picture).

2. Click "Add to my Page" and choose which page you want to add this app on. (Your fan page).
3. Go back to your fan page and click "edit" page again. Scroll down to the box titled FBML - FBML and click edit.
4. Change the title to Welcome (or whatever you want).

Last...
Click back over to your blogger window and the post you were creating. Below the title post on the right you will see two tabs: Edit HTML and Compose. Right now you are viewing Compose. Click on Edit HTML. Your post should now be a jumble of codes.

Highlight and Copy everything in the box. Click back over to your facebook window and paste what you just copied inside the FBML Box.

Click Save. Go back and view your page. You should now have a welcome tab!

If you want to add this page to your personal facebook profile or if you don't have a fan page then the steps are extremely similar. Just search for Static FBML from your home page. Choose your personal profile page when it asks you what page you want to add the app to. Then follow the rest of the steps above.

The easy thing about this is by creating a new post (that you don't actually post to your blog) you don't need to know all of the codes! By clicking Edit HTML, Blogger translates everything into code language for you!

You can view my Welcome Tab Here.