Using HTML on your Facebook Fan Page

I’ve just discovered this new app on Facebook and I’m a wee bit excited! There is a way to completely customize an area of your Fan Page using HTML.  Use it to create a landing tab that will encourage new visitors to click on the “Become a Fan” button!  Or you can use it to announce sales, share your favourite links, whatever you want.  It’s YOUR Page!

If you really can’t wait to see what it looks like, visit either of my Fan Pages to check it out. Then come back here and I’ll tell you how I did it.

Heather Scent Aromatherapy’s Fan Page

Tarot by Hedder’s Fan Page

(P.S I need about 25 more fans on the Tarot page so I can get my custom URL.  No pressure or anything, though.)

Step One – Add the Application to Your Page

Click here.  You’ll see the following screen.  Click on “Add to My Page”.  A list of your Pages should pop up (if you have pop-ups disabled, turn them on for this).  Click “Add to Page” beside the Page you want to add this application to.  There.  Easy, huh?

Step Two – Create Your HTML code

Maybe you know HTML.  Awesome!  All you need to do is open up Notepad and whip something up!  If you don’t know how to write a web page, you need a WYSIWYG editor in which you can also access the code (so you can copy & paste it).  I used SeaMonkey, but I’ve also discovered that you can do this in Windows Live Writer as well. 

Really, I can’t go into a whole tutorial about how to write a simple HTML page.  There are several reasons for this, the least of which is that I don’t really know what the heck I’m talking about when it comes to HTML.  I just pretended I was making a blog post in Live Writer, and then I clicked the “Source” tab and copied what was there.

One thing I can share is that the box for the FBML Application works like the HTML/Javascript box on Blogger.  So you just need to add the code you use – you don’t have to put the opening and closing HTML tags.  You’ll need to delete those if you used a WYSIWYG editor like SeaMonkey.  I kept them in mine at first and couldn’t figure out why my custom tab wasn’t showing up properly.  Live Writer doesn’t have those tags on the source page, which simplifies the copying & pasting part.

Save your document!  We’ll be coming back to it later.

Step 3 –  Add your HTML to your Fan Page

Go to your Page.  Click on “Edit Page” underneath your Page’s Profile picture.  You’ll see the screen below.  Scroll down until you see the “Static FBML” Application, and click on the little pencil icon in the upper right-hand corner.  Select “Edit”.

Now you’ll see a page like this.  Type whatever you want your Tab to be called in the first box.  Choose something short and simple.  I used “Welcome”.  In the second box, you will paste your HTML code.

Click on “Save Changes”.  When it tells you your changes have been saved, click on your Page name at the top to take you back to your Page.

 

 

 

 

 

Step  – Add the Tab to Your Page

Go to your Page.  Across the top where the Tabs are all lined up, there should be a “+” sign at the far right side.  Click on this and then click on whatever it is you called your Tab.  This will add the FBML tab to the list across the top of the Page.  Now, I want you to drag and drop that tab so it’s the 3rd or 4th tab in the row, instead of the last one.  You want this tab to be visible to your Fans at all times.  If they have to click on those little arrows to see what other Tabs are available…well, they just won’t click those arrows.  I bet they don’t even know they can click those arrows.  I bet you didn’t know you could click those arrows to see other available Tabs!

Step Last – Make Your HTML Page the Default Landing Tab

When someone clicks the link to your Page, they likely end up at your Wall or Info Tab. You probably want them to arrive on your HTML tab now, especially if you’ve spruced it up to make being a Fan of your Page seem really enticing!

Go to your Page.  Make sure you are on the Wall tab.  Click “Settings”.  Under the drop-down menu for “Default view for everyone else”, choose whatever it is you called your HTML tab.  The changes save automatically.

There!  Now whenever anyone clicks the link for your Page, they’ll see your personalized HTML page, rather than the generic Wall.  When you visit your own page, you’ll land on the Wall.  Don’t fret; your Fans are still going to your special, personal HTML tab.  I don’t know why Facebook plays with our minds like that, but such is life.

Leave some links below so I can see what you did with your page!

Hmmm.. I wonder what other gadgets I can add to my page using this app?  You can have more than one HTML (or FBML as they call it) tab.  I’m going to go experiment with some Blogger Gadgets to see if they’ll work on the Fan Page.