Travels of Adam

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:

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.

3. 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.
4. In the Edit FBML screen, you’ll be able to add a Box Title. Do that. “Welcome” is probably a good choice.
5. Inside the FBML box, insert the following code:

<STYLE TYPE=”text/css”>
<!–
H1 {
color:#00000;
font-size:3em;
font-style:bold;
}
H2 {
color:#333333;
font-size:2em;
font-style:bold;
}
–>
</STYLE>

6. 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”).
7. 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.
8. 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 example

9. 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.
10. 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.

Share