Whew, that was a mouthful! What’s this all about? Well, you may have noticed a new box in my side column (look to the right if you’re viewing this on its native site). I’ve got a Facebook Fan page now (become a fan if you please)! Fan pages are a useful thing to have if you’ve got a blog (travel or otherwise), but one of the best features is setting up custom pages within your Fan site. The following are my tips to help you set up a custom-coded “welcome” (or any other) page using the Facebook platform.

Here’s the skills & stuff you’ll need to do this properly:

  1. Set up a Facebook Fan page. It’s simple to do.
  2. If you haven’t, be sure to set a custom domain name for your page. To do this, go to http://facebook.com/username. You need at least 25 fans before you can set the custom name.
  3. Some basic HTML knowledge.
  4. Copy & paste skills. Yeah, I’m gonna make this easy for you.

How to set up a welcome page:

  1. Go to http://facebook.com/pages/manage (once you’re logged in to Facebook)
  2. At the bottom, you’ll see the option to “browse more” applications. If you haven’t already loaded it, the application you’ll want to add to your page is called FBML. Facebook describes the application like this:
  3. Add advanced functionality to your Page using the Facebook Static FBML application. This application will add a box to your Page in which you can render HTML or FBML (Facebook Markup Language) for enhanced Page customization.

  4. Once installed, click Edit. This will bring you to a screen which you can input code for your page. Now, all I’m going to show you is a really simple way to custom your text style. There are lots of ways to customize the page by adding images and adjust style/color/etc, but for that you’d need some more coding experience with CSS.
  5. In the Edit FBML screen, you’ll be able to add a Box Title. Do that. “Welcome” is probably a good choice.
  6. Inside the FBML box, insert the following code:
  7. <STYLE TYPE=”text/css”>
    <!–
    H1 {
    color:#00000;
    font-size:3em;
    font-style:bold;
    }
    H2 {
    color:#333333;
    font-size:2em;
    font-style:bold;
    }
    –>
    </STYLE>

  8. Now, that will insert a CSS headline style for any line of text that you markup as <h1> or <h2>. Within the STYLE tags, you can add other CSS code for H3, H4, etc – just follow the same format. Change the color by inserting a web-safe number; change the font size (you can measure it in pixels “px” or “em”).
  9. Okay, so by now hopefully I’ve made it simple to define your H1, H2, H3 styles. For a welcome page, you probably don’t want to have too much text, so really you only need a few styles defined.
  10. After your </STYLE> code, hit return a few times and start typing what you want your welcome page to say. Be sure to tag each paragraph of your text as either <h1>, <h2> or <h3> (or whichever styles you’re using). See how I styled my site in the image below.

    Facebook Fan Page HTML/CSS Markup
    Facebook Fan Page HTML/CSS Markup example
  11. If you know any HTML code (or feel like Googling a few things), you can insert whatever HTML code you like (haven’t really tested it in the FBML box, but everything I’ve used has worked so far). Bold, italicize, add links, insert images, make bulleted lists, etc. I’d recommend inserting an image because it makes things more interesting. You can host the images on your own site and just link to it using basic HTML code.
  12. Once you’ve created the page by inserting all your code into the FBML edit box, save your changes and make sure the tab is visible on your Fan page site. You’ll then want to set it as the “Default Landing Tab” in your “Wall Settings” settings.

Okay, so I’ve pretty much shown you everything I know about Facebook Fan FBML pages. Let me know if you have any trouble with these directions (or additional tips!) and I can try to troubleshoot. Also, please share your finished pages if you end up creating one! If you’ve found this useful, let me know in the comments & then feel free to become a Travels of Adam fan on Facebook.

Please note some posts do make me some money but I never sacrifice my integrity in exchange for a favorable review. Read the full disclosure policy.

37 comments

Add a comment
  1. Thanks for the how to guide on building a Facebook landing page

  2. Brady Stump

    Enjoyed the blog post!

  3. I think that in order to have a budget travel, you need to do a bit of research before starting your trip. If you already know the places and expenses is easier to do. For my last trip I found a very good website http://www.jaygumm.net and want to share it with you, it has great views, great locations and excellent information about hotels and activities so you can plan before leaving. Cheers for your great job!!!
    Jay Gumm Travel Resources

  4. Hey Melissa, Facebook gave you credits for following ME?! Haha, what on earth for?!

  5. Gah! How is it I just found this post??? Thanks for the step by step, it’s going to be incredibly useful because I had no idea how to do this. Thanks so much for sharing. PS – Facebok gave me 10 credits for premium game items for following you, lol. Time to get back to Farmville? Nah!

  6. Hi ,
    Thanks for sharing this. I was aware of it and am waiting to see exactly how it plays out. Will probably have to update this page accordingly! Cheers, Adam

  7. Thanks Ted – glad you've found it useful!

  8. Awesome easy-to-follow tip! Thanks!

  9. I wish I had this guide a while ago when I did my FB page! I had to collect information from many different places and trial and error with the coding. Great tips!

  10. I wish I had this guide a while ago when I did my FB page! I had to collect information from many different places and trial and error with the coding. Great tips!

  11. Pingback: A Travel Blogger's Guide to WordPress Security | Travels of Adam

  12. Thanks for those tips..googling has lead me to another win!

  13. Pingback: Using facebook to share your travel stories | Thom and Sean's world trip

  14. Wow…you are definitely inspiring me to up my Facebook game!!! I like the Welcome page…

  15. haha excellent! send me a link to your page once you've got it up!

  16. julieGGW

    OMG! I cannot thank you enough. I, by no means, am a web-idiot….but I couldn't for the life of me figure this out when I set up our FB fan page. THANK YOU :-)

  17. Awesome sauce! Let me know once you set it up so I can see your brilliant work :)

  18. nomadicchick

    Adam! What awesome sauce tips. Thanks. Now I know what to do. :)

  19. facebook is such a great place to set up pages like that…

  20. Very helpful!

    I decided to try one (even though having 'fans' feels very odd) and got it running fairly easily. I added your page to my favourites on it. :)

  21. Pingback: Blog Crawl Monday: Part 3 « Spunky Girl Monologues

  22. just sent you an e-mail. let me know how it works out.

  23. Hey dude – AWESOME write-up! I’m a Facebook pro, but I had no idea how EASY it was to set this stuff up. Thanks for the tips… look for our Vagabond3 welcome page coming soon!

  24. Hey dude – AWESOME write-up! I’m a Facebook pro, but I had no idea how EASY it was to set this stuff up. Thanks for the tips… look for our Vagabond3 welcome page coming soon!

  25. Yeah, there are lots of things that constantly trigger my memory that I was supposed to be doing something else.

  26. Yeah, there are lots of things that constantly trigger my memory that I was supposed to be doing something else.

  27. Thanks! Let me know how the changeover process goes.

  28. Thanks for this, we were just in the process of moving over from groups to fan pages. Joined your page!!

  29. Glad you like it!

  30. It's pretty easy! Let me know how it works out.

  31. monica530

    Definitely going to take a stab of creating my own FB tab when I get home from work. Thanks Adam! You're so resourceful! :D

  32. Cornelius Aesop

    I set up my fan page but I haven't done much with it since it's initial set up. I get caught up working on my new theme and posts and excuse and this other excuse. Thanks for the inspiration and great tips!

  33. iwishgapyear

    That my friend is a work of genius . . .

Comments are closed.