How To Create a Fanpage on Facebook With Custom HTML

Bill LordSaturday, November 21, 2009 21:32

header-vital

As you all know, social media is exploding. Almost everyone has either a Facebook, Twitter (although my wife may think it’s stupid), and/or LinkedIn account, if not all three. YouTube is becoming an everyday resource for tutorials etc. If you still think this social media thing is just a fad, you may be surprised to learn that in January UNH will offer it’s first Social Media course.

Facebook is kind of a big deal, and surprisingly enough the fastest growing demographic of Facebook users is those 35 years old and older. What started as a platform for students to communicate, has evolved into a highly sophisticated marketing tool with more than 300 million users worldwide. Major companies are taking notice, and it’s showing up everywhere. The other night I noticed that Honda is using their Fan page url, facebook.com/honda, in commercials rather than www.honda.com. It’s an interesting concept. Honda is trying to get their customers to build strength in the Honda brand socially through, “The Experiment.” A project attempting to prove that, “Everybody knows somebody who loves a Honda.” Seeing if we can all be connected through Honda Love.

Other companies like Walgreens, Coca-Cola, and Red Bull are using it too. It makes sense, go to where your customers are rather than making them come to you. There are 128,940,004 daily users already familiar with the Facebook functionality, becoming a fan of your company is just a click away.

So you have a Facebook page, you picked a custom Facebook URL and have started to add content. But your page is still just a Facebook page with your content, and not nearly as impressive as Coca-Cola’s customized page.

How do you create a custom Facebook page?

Static FBML is a Facebook application that allows you to add custom HTML code to your Fan Page giving you the ability to brand the page or pages however you want. Ideally, a professional looking custom designed and developed landing page will make the viewer want to become a fan of your business.

In this tutorial you’ll learn how to add the Static FBML application to your page. How to set up your code so it works correctly. And how to set your new page as the default landing page for visitors, rather than your wall.

Here’s what you do…

Go to www.facebook.com and Login to your Facebook account.

At the bottom left of your screen click Applications.

Applications


Then click on Browse More Applications.

More Applications


In the search box type in Static FBML.

Search Static FBML


Click on Static FBML.

Select Static FBML


Once on the Static FBML page, click Add to my Page select your page from the menu by clicking Add to Page.

Click Add to Page, and select your page from the menu


Next, return to the Fan Page you are editing and go to the wall. Click Edit Page from the options under the logo/image box.

6-select-edit-page


Scroll down to the FBML application, and select Edit.

7-FBML-edit


This should bring you to a page that has two empty boxes. In the Box Title field, enter the name you want to display on your new tab. In the larger box, paste in your HTML code. When you are done click on Save Changes.

NOTE: The code should be from opening to closing div or table tag and contain no opening or closing body or HTML tags. Image/flash files etc. need to contain the full url and all styles need to be inline.

8-add-your-code


Setting Your New Page as the Default Landing Page

Go back to the Wall of the Fan page you are working on. Click Options, and then click Settings.

9-options

10-settings


In the “Default Landing Tab for Everyone Else:” option, select the tab that you have just created.

11-default


That’s pretty much it. Log out of Facebook, go back to the Facebook Fan Page you just created to see how everyone else will view it. And remember, if all else fails… we can do it all for you! Contact us to learn more.


You can leave a response, or trackback from your own site.

7 Responses to “How To Create a Fanpage on Facebook With Custom HTML”

  1. Debbie says:

    November 23rd, 2009 at 12:36 am

    Thank you thank you thank you! This was a great tutorial. The screenshots are so helpful and your instructions are super clear.

    Even though I really don’t know html I was able to set up a landing page that is a bit more “custom” than the standard wall page. I have more design work to do to make it super special but that’s beside the point. I now have some creative control over my fan page, and that’s HUGE!

    Thanks again!

  2. Zach says:

    November 24th, 2009 at 2:58 pm

    Great tutorial!!! I have yet to write any code for my fan page but this makes Facebook’s often cumbersome navigation much easier to understand. One comment on the graphics. To me the arrows don’t stand out and highlight as much as I think you might want. Just a thought; otherwise great!

  3. Bill Lord says:

    November 30th, 2009 at 5:08 pm

    Great, I’m glad you enjoyed it. Debbie, if you need some help with your “Super Special” design work let us know!

  4. Monte says:

    December 8th, 2009 at 10:03 am

    Woot! Thanks that’s great!

  5. Lucas H says:

    May 11th, 2010 at 9:56 am

    Hi there~
    thanks for the information given above, it’s very helpful. I only managed to install the FBML app. and now I’m stuck… Any suggestion in how to go about it? 

  6. Bill Lord says:

    May 11th, 2010 at 10:34 am

    Hi Lucas,
    Thanks for reading and trying this out. Unfortunately you do need some knowledge of HTML to get your content on the page. I have seen some custom pages that are a simple graphic. To do this you would need to host the image somewhere on a server, and link to it form the Facebook FBML page.

    For more help designing and building your custom page,
    Contact Us Here.

  7. Tutorial Wordpress says:

    May 16th, 2010 at 11:44 am

    I’m doing some research in this field and your post has helped a lot, thank you.

Leave a Reply