How to Create Custom Facebook Fan Pages

Facebook Fan Pages have become extremely popular and are being used by everyone from large companies like Coca Cola and Ford Motors all the way down to people's pets.

So how do we make the most of these fan pages and get our brand out the best that we can? Custom Landing Pages is how we do that. This tutorial will show you how to build a custom landing tab.

What you are going to need:

A basic knowledge of html
A way to link to any images you may want (Flickr or Hosting service is the best bet)
A Facebook Account

The first thing that you are going to want to do is set up a fan page, which you can do here at https://www.facebook.com/pages/create.php. Pick the name for this fan page that you want to keep as you are unable to change it once it's created.

So once you have your page created, it's time to get coding! Your page can be a maximum of 520px wide or else Facebook just chops off the extra.

As you can see I have just used a Dreamweaver template and made it 520px wide. Now it's time that we start removing all the excess that Facebook doesn't like. We start off by taking out the doctype and <head> tag but you want to make sure you keep your inline stylesheet:

Next we need to remove the </head> and <body> tag as Facebook doesn't read anything inside the <body> tag:

And lastly we need to remove the </body> and </html> tags:

So we have removed everything that Facebook dislikes and we are ready to put this html code into our custom landing page. We are going to start off by going to our fan page and clicking the Edit Page button under our profile picture on the right hand side:

This takes us to the main settings for everything on our fan page. We need to enable FBML on our fan page. Scroll all the way to the bottom of this page and click the Static FBML button under More Applications:

This link will take you to the Static FBML application page. Click the Add to my page link right below the profile picture:

A dialog box will pop up and you pick what pages you want to add static FBML to. Once you have completed this, go back to your fan page settings and find FBML 1 under the applications. You want to click the edit button right under the title:

Now, we need to go back to the html code that we wrote up before. Copy all of it and paste it into FBML: section. The Box title refers to the name that people will see on the tab.

Save Changes and return to our fan page wall. At first, you may not see the tab along the top, but all you need to do is click the arrow on the right hand side off all the tabs and a dropdown menu will apear. Just find your tab's name and click on it:

The finished project will look like this:

Extra

If you want to add images you just need to put them online somewhere so that you can link to the URL:

Add SWF files or videos
Adding SWF files and YouTube videos is also relatively easy. Just copy this snippet of code and we can get started:

<fb:swf swfsrc=’http://www.mysite.com/flash/fbml.swf’ imgsrc=’http://www.mysite.com/flash/fbml.jpg’ width=’750′ height=’550′ />

For SWF files you need to copy the URL of the SWF file. Then add it where the current URL is placed:

So the last thing you need to do is add an image for viewers to click on. We need to do this because Facebook does not allow Flash or JavaScript to start until the viewer clicks. I usually suggest that developers add an image that looks like the Flash or video will look like once it has been clicked on, and just add "Click here to start".

To embed a YouTube video you take the same steps. Find the URL for the video but copy the embed code from whatever YouTube video you want to add. You need to copy the embed src= and paste this in the same way you do with a SWF file.

If you notice on older versions of Internet Explorer that your page looks like it has no style sheet, this might be the case. You may have to put the stylesheet on your server and link to it.

So now you know! Get out there and start building custom fan pages!

Just updated your iPhone to iOS 18? You'll find a ton of hot new features for some of your most-used Apple apps. Dive in and see for yourself: