Facebook Fan Pages and Static FBML - Part 1

Customize Your Facebook Fan Page with Static FBML (Facebook Markup Language)

What is a "Fan Page"
Facebook Fan Pages are for businesses, bands, products, websites, and organizations. It works very much like a standard Facebook profile in that you can post status updates, photos, videos, etc. For brick and mortar businesses you can configure your location, hours and parking information. You need a regular or personal Facebook page to setup and configure (administrator) a fan page; you can't just have a fan page. You can configure multiple administrator accounts so that more than one person in your organization can update the fan page.

Custom URL for Your Fan Page:
Once you reach 50 fans, you can set a custom URL for your Fan Page. For example: http://www.facebook.com/fwblack - Go to this link http://www.facebook.com/username/ to set a custom URL for both fan and personal pages. Note that you cannot change it once you set it, so put some thought into your URL.

Like vs. Fan
In April 2010 Facebook changed the "Become a Fan" button to a "Like" button. Prior to April, someone could click the "Become a Fan" button for your Fan Page and they would be added to your fan list. Now they click the "Like" button which does the same thing. Personally I prefer the "Become a Fan" button, but Facebook feels the "Like" button is "softer" and requires less of a commitment therefore should increase the number of fans. One of the nice things about a Fan page is that when someone "Likes" you by clicking the "Like" button it is displayed to all their friends that they "Like" you, and that should increase your number of fans.

FBML = Facebook Markup Language
Just like with a regular Facebook profile you can add tabs for different functions and apps, one of the differences with a "Fan" page is you can add a tab with an app called Static FBML (Facebook Markup Language) and use your own HTML and limited JavaScript. This lets you setup custom welcome pages, request forms, email signups, etc. You can even setup a form that submits using AJAX so the user never leaves Facebook. This is very important as part of the "culture" of Facebook is that people don't necessarily like to click something that takes them off of Facebook. I will show how to do this AJAX submission in the next post on this topic.

Boxes vs. Tabs
Static FBML can create a box in the left column of your "Fan" page, and/or, a new Tab.

JavaScript
Facebook FBML does not let you actually use just any JavaScript directly. Instead they have compiled a library of JavaScript that you can use. If you try to use something besides the commands they allow, it will be commented out or removed when the page is rendered.

Images
You can embed images you've upload to your Fan page using FBML, but it's easier to upload images to your web site and reference them from FBML.

Default Landing Page
Once you create your Static FBML tab, you can set which tab a new visitor to the page (meaning a non-fan and a non-admin) will see first. (Once a person "Likes" you, or is an administrator, they will default to the Wall tab).
To set this:

1. Click "Ads and Pages" in the left column of your facebook profile.
2. Click edit on the fan page and then
3. Click edit in the Wall Settings Section
4. In the "Default Landing Tab for Everyone Else" Select the name of your Static FBML tab.

Getting Started - Adding Static FBML to your page
To add Static FBML to your account:

1. Type "Static FBML" into the search box.
2. Click on the "Static FBML" that shows and then
3. Click "Like" this will make you a fan.
4. In the left column click the link that says "Add to my Page", this will open a dialog box that lets you select which of your "Fan" pages to add the Static FBML app.
5. Click the "Add to Page" button beside the "Fan" page or pages you want to use Static FBML, then
6. Close the "Add Static FBML to your Page" dialog box.
7. Click the "Home" link in the top right corner

Selecting Box vs. Tab
Static FBML can add a tab and/or a box in the left column of your Fan Page.

1. Click "Ads and Pages" in the left column


2. If you have multiple "Fan" pages, select the "Fan" page you want to edit


3. Scroll down until you see the "FBML - FBML" (or the name of your FBML tab or box) section and click "Application Settings".


4. From here you can click "add" or "remove" to add or remove the box or the tab.

External CSS vs. Inline Styles
You can use either. Like using external images, you call an external style sheet from YOUR web site. If you call an external style sheet, use this syntax: <link href="http://yourwebsite.com/stylesheetname.css" rel="stylesheet" type="text/css" />
In the example below I used inline styles which are easier when doing something simple like this example. In one of my subsequent articles on this topic I'll change to external styles sheets in the example.

If CSS, HTML, Inline Styles sound like a foreign language to you, get my FREE courses:

• Web Site Creation Course: HTML, CSS
• Interactive Web Site Course: PHP, JavaScript, Forms

Editing Your FBML Page

1. Click "Ads and Pages" in the left column of your facebook profile.
2. If you have multiple "Fan" pages, select the "Fan" page you want to edit
3. Scroll down until you see the "FBML - FBML" (or, [name] - FBML once you give it a name) section and click "Edit".
4. You can edit the HTML code here.

Creating More Tan One FBML Tab for Your Fan Page
If you want more than one, you can do that too!

1. Click "Ads and Pages" in the left column of your facebook profile.
2. Click "Edit Page" for the Fan Page you want to edit,
3. Scroll down until you see the "FBML - FBML" (or, [name] - FBML once you give it a name) section and click "Edit".
4. Below the fields for the box click "Add another FBML box";

Basic Example:
Below I'll give you the exact HTML code I used to create the FBML tab for my pqGallery Fan Page.... I didn't use any of the FBML codes, just regular HTML and I referenced images from the pqGallery web site. As mentioned above, I used inline styles. Please visit the pqGallery Fan Page... and become a "Fan" by clicking "Like" - also checkout pqGalleryand setup an account!

I've included a screen shot because in the next few articles on this, I'll keep modifying the code to create different examples. You can look at the code and this screenshot to see what it does.

pqGallery Facebook Fan Page Static-FBML Tab Example 1, Created using the code shown below.

HTML Code For pqGallery Fan Page Static-FBML Tab
This is the actual HTML code used to create the Tab shown in the screen shot above and on my pqGallery Fan Page...
<h2 style="FONT: BOLD 14pt Tahoma, Arial, Helvetica, sans-serif; COLOR: #000000; TEXT-ALIGN: left"><font color="#5383A1">pq</font><font color="#475A99">Gallery</font> is <i>THE</i> free tool for Sharing Your Photos Online.</h2></p> <p style="FONT: BOLD 14pt Tahoma, Arial, Helvetica, sans-serif; text-align:left"> <font color="#5383A1">pq</font><font color="#475A99">Gallery</font> Photo Galleries...</font><br> <ul style="list-style-image: url(http://www.pqgallery.com/images/redcheck2.jpg); FONT: 12pt Arial, Helvetica, sans-serif; text-align:left;padding: 0px 45px; margin: 20px 25px; "> <li style="margin:5px"><b>It's Fun to Share Your Photos!</b></li> <li style="margin:5px">Shrink the distance between family and friends.</li> <li style="margin:5px"><b>Available anytime from anywhere.</b></li> <li style="margin:5px">Keeps your digital images organized.</li> <li style="margin:5px"><b>Lets you share your fun times, special times, great photos, children, pets, etc.</b></li> <li style="margin:5px">A great way to keep a record of your child's growth: post a set of photos each month when they're babies or toddlers and you'll constantly be amazed at how fast they change and grow.</li> <li style="margin:5px"><b>Stores your Original Full Sized Photos without Altering Them - You Have a Backup in Case Your Computer is Lost or Stolen.</b></li> <li style="margin:5px">It's Free!</li> <li style="margin:5px"><b>Setup Multiple Free Accounts with one email address.</b></li> </ul> </p> <center> <p style="FONT: BOLD 18pt Tahoma, Arial, Helvetica, sans-serif; text-align:center"> <a title="Free Photo Galleries" href="http://www.pqGallery.com/?r=facebook" target="_blank">Click Here for More Information!</a></p> </center> <center> <p style="FONT: BOLD 18pt Tahoma, Arial, Helvetica, sans-serif; text-align:center"> <img border="0" src="http://www.pqGallery.com/Images/forwd_32x32.gif" align="middle"> <img border="0" src="http://www.pqGallery.com/Images/new_32x32.gif" align="middle"> <a title="Free Photo Galleries" href="http://www.pqGallery.com/signup.asp" target="_blank">Click Here to SIGN UP!</a> <img border="0" src="http://www.pqGallery.com/Images/new_32x32.gif" align="middle"> <img border="0" src="http://www.pqGallery.com/Images/back_32x32.gif" align="middle"> </p> </center> <h2 style="FONT: BOLD 14pt Tahoma, Arial, Helvetica, sans-serif; text-align:center">pqGallery Examples</h2> <p style="text-align:center"> <a href="http://www.pqgallery.com/gallery.asp?SID=230045" target="_blank"><img src="http://www.pqgallery.com/Images/Lee-Hinshaw-200.jpg"/></a>  <a href="http://www.pqgallery.com/gallery.asp?SID=300451" target="_blank"><img src="http://www.pqgallery.com/Images/York3.jpg"/></a>  <a href="http://www.pqgallery.com/gallery.asp?SID=402234" target="_blank"><img src="http://www.pqgallery.com/Images/walker-200.jpg"/></a> </p>

Facebook Fan Pages and Static FBML - Part 2

Until Next Time,
Fred

Get Free Updates! Enter your name and e-mail address to receive a short notice each time I make a new post. First Name: Last Name: E-Mail Address: E-Mail again: NOTE: You will receive a confirmation email. You must click the link in the email to activate your free updates. Please check your spam folder(s) if you don't receive the email.

Tip Jar: Leave a Donation

Comments: 29,   TrackBacks: 0.

Posted by Fred on May 5, 2010 | Printer-Friendly

TrackBack: http://www.pqInternet.com/Blog/mt-tb.cgi/228

Assigned Categories: Social Media | Web Site Design, HTML, CSS

Related Entries:

• Facebook Fan Pages and Static FBML Part 3: iFrames!
• Facebook Fan Pages and Static FBML Part 2
• Texting Social Media Updates - Useful vs. Useless
• Social Networking Common Sense
• Follow Your Heart
• You wouldn't deny your own child would you?