A Facebook guru and friend, Victoria Edwards asked me at at recent networking event if I had customized my Facebook “Page”, formerly called “Fan Page”. I had created one, but like many people, I was not aware of the level of customization Facebook allows on a page. In addition to the ability to customize the look, TallChickVic, as she is known, clued me in that another significant reason to have a page for my business is that it is not limited, like a profile to only 5,000 friends. My first thought was that I would never have to worry about that, but like she said, “What if some day you get there, then what?”. So I decided to investigate this further.
I am sure all of you are aware of FBML…no? Well I wasn’t either, it stands for Facebook Markup Language. Already sounding confusing huh. If you have been to any of the really big companies’ pages, you may have noticed that they seem to have a lot more going on than yours. My first thought was that FB made a special concession for them, that they were not likely to make for lil’ ole me. That may actually still be true, but I did realize that some of what they were doing, or maybe even all of it, is available to anyone who discovers FBML.
Some of you may know that in addition to my presentation business, I also do some web development work. I am one of those “self-taught” developers, which means I don’t really understand how some things work, but if I can get it to work for me, I don’t care. I develop with the “Trial and Error” technique, and a lot of Copy, Paste, Edit of code snippets I find on the web, until I make things work for me. That is how I converted this website to a wordpress 3.0 platform, that still looks like the non-wordpress site that I started with. That is also how I figured out the really cool moving audience behind my head at the top. If you don’t think it is cool, then you are probably a “real” web developer, in which case you will be unimpressed with this entire post. But for the rest of you, I want to share how I made my micro-site on my Facebook page. BTW, while you are there I would really appreciate if you would hit the “Like” button.
I did a lot of looking around on the web for instruction on this, and as usual, I could not find a single, simple complete answer. But from about 20 different sources, and my copy, paste, edit methodology, I was able to figure it out. In this post, I hope to save you all of that trouble. Hopefully, this will be a complete and easy to understand “step-by-step” to save you a lot of time.
I will explain each step below, but if you are like me, sometimes you would like to skip all the hows and whys and just copy and paste something that you can edit yourself. So here is the exact code I used for my micro-site. (BTW, if you copy and paste this as is, you will have “my” micro-site on your facebook page).
Copy all green text from below this line:
If you like my page, please click the “like” button above!
Home
About Me
Services
Consulting
/div>
The Professional Paraphraser
There is an obvious disconnect between some of the truly innovative technologies out there and the potential client/users. If you are a developer or provider of such technologies, this is not news to you. So how do you
make that connection?
I am one of those unique individuals who can speak both languages. I can not only understand the complexities and nuances of your technology, but I can paraphrase and present these complexities and nuances to be understood and appreciated by your customer base. Connection Made!
When you engage my services, I will dive deep into your offering to gain a thorough understanding which I will use to craft a user friendly presentation that I will professionally present to your clients in one or more of several formats.
Why would you engage me to do this? Well, maybe you are not comfortable in front of crowds, or maybe you are not good at articulating your product features to laypeople, or maybe you are not a convincing spokesperson, or maybe you just have too much on your plate. Either way, there is no reason not to engage an expert presenter to help you make that critical connection, and create that “aha!” moment in your client’s minds for you.
egomaniac, narcissist, megalomaniac, comedian
Only my closest friends use these adjectives when describing me. But since you don’t know me, you will have to make up your own mind. Granted, these are not traits that you would want to have in your neighbor, but they are the exact traits you want in a spokesperson for your company. It’s true that I do not lack in self confidence, but I am nowhere near schizophrenic, I swear.
Presenting is something I have done for 30 years now, and I have a knack and an ability to sway others to agree with my message. I focus my efforts in the technology space, but also serve other markets.
I enjoy the work, I am good at it, and I want to do it for you.
Services
I do a bunch of things, but primarily I produce workshops, webinars and seminars for tech companies.
I also do voiceovers and videos for your websites or other promotional needs.
Please go to my website to see examples of my work and to find out more about me:
www.stevemordue.com
consulting
Do you have an important pitch coming up? I can join your team and assist with that specific task.
You may well be the best choice for the client, but as you know, that is not always enough. You are probably familiar with the phrase “Form over Substance”; you may have lost opportunities to competition that was not as capable as your firm, yet presented well. In the best case scenario, “Form equals Substance”.
I can help your team organize and develop your presentation, as well as acting as the lead, or sole presenter to give your clients a first impression that backs up your true capabilities.
Copy up to, but not including this line.
For the rest of us, here is my step-by-step and full explanation of above.
- First, create a Page (formerly Fan Page) if you do not have one:
- After Logging in to Facebook, click on the Home tab, and then the link “Ads and Pages”, which will be in the list below your profile picture.

- On the next page, click on the “Pages” link below Campaigns.

- Then click on the “+ Create Page” button.

- Next click on the radio button for what kind of page, in my case “Local Business” and select the type from the dropdown. Give it a name, in my case “The Professional Paraphraser”. Check the box that you are the one who can do this, and click on the “Create Official Page” button.

- You will then be brought to your new “empty” page. Click on the “edit Page” link below the Question mark.

- Here you can go ahead and edit your settings etc., I am not going to go into detail here as this is similar to you regular profile page and you can figure it out.

- If you scroll down to the bottom of this page you will see the “more applications” section and the “Static FBML” link. If the link is not there then click on “browse more” and search for it.

- After clicking on the “Static FBML” link you will be taken to another page. Click the link to “Ad to my Page”

- This will bring up a window listing all of your pages, if you have any others, and let you add this feature by clicking the “Add to Page” button next to the page you want to add it to. Click that and then close the window.

- It would be nice if Facebook took you right back to your new page here, and there may be a faster way to get there that I don’t know about, but I just click the “Home” tab at the top, then “Ads and Pages” again, and finally “Pages” again to get back to my list of pages where, if this is your first page, only one will be listed. Click the the “Edit Page” link.

- You should now notice in your Applications list, the FBML application as active. If not, repeat the above steps because you missed something. Click on the “Application Settings” link of FBML.

- Click on “add” next to Tab: Available, and then hit “Okay” to close the window.

- Now let’s click on the “Edit” link next to FBML and we get this window. The Box Title will be the name for the tab that will now be on your page where you custom content will be. I chose “Micro-Site”, but you could call it whatever you want. You can come back and change it anytime, so don’t worry about it too much. Below the title, where is says “FBML”, is where the new custom code will go and I’ll get into that next.

- Okay so you should now have your new page and your FBML App installed so let’s talk about the custom code. Without getting too technical, FBML is kind of a subset of html which is the language used for creating websites. Facebook obviously wants to limit what you can do on their platform, which is why they created the subset FBML language. So there are a lot of things you cannot do on a Facebook page that you can do on your own website. But there are still a lot of things you CAN do.In this example I am gong to walk you through creating a Micro-Site with multiple pages and a navigation menu, which is what mine is, so let’s break down my code that I showed above. I will assume that you are going to create a page just like mine except maybe different colors, text and images.
- The first part of the code is the style section, this is where you specify things like the background color, fonts and font sizes etc. and it looks like this (the green is code, the black are my notes, and red are areas you should edit for your needs) :
This is the declaration that style information is beginning here
h1 { This is where the rules for the Headline are identified, you will see this used below
font-size:19px; How big I want my headlines
color: #33FF99; The color of the headline text in hex-decimal You may want a different color here
margin: 0 0 20px 0; how much room I want around my headlines
line-height: 1.5em; how high I want the line to be
font-style: italic; any stylizing You may delete this line if you don't want italic headlines
text-transform:lowercase; in this case I want the headline to be all lower case regardless of how I type them You may delete this line to not convert headlines to lower case
}
h2 { this is only used at the top of the box for the suggestion to "like" my page and the only different from above is the font-size is smaller
font-size:15px;
color: #33FF99;
margin: 0 0 20px 0;
line-height: 1.5em;
font-style: italic;
text-transform:lowercase;
}
#mytext { This is for the text on my pages
color:#ffffff; I changed the text color to white because I am using a dark background, if you are using a light background, you can delete this line or change the color
font-size:14px; This is how big I wanted my page text
}
#nav, #nav1, #nav2, #nav3, #nav4, #mytext { Do not change this
background:#21353C; This is the page background color, in my case the Teal, if you delete this line it will be white or you can put any color here
padding:10px;
}
#nav1, #nav2, #nav3, #nav4{ Do not change this
height:562px;
}
.button, .button:visited { This is the buttons
background: #222 url(http://www.stevemordue.com/fb/alert-overlay.png) repeat-x; This is an image file that is used to make the buttons, as you can see it is pointing to the file on my site. I don't care if you leave this, but if you prefer you can paste this link in your browser, save the file and upload it to your own site and change this link to point there instead. Leave the rest of this section alone.
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.button:hover { background-color: #111; color: #fff; } This is the button colors, in my case Grey with white text, you can change these if you like
.button:active { top: 1px; }
.large.button, .large.button:visited { font-size: 14px; padding: 8px 14px 9px; }
This ends the style declaration
- The next section is the Navigation buttons and it looks like this:
If you like my page, please click the “like” button above!
You can change or delete this line
HomeYou can change the term “Home” to whatever you want for this tab and the same for the others below.
About Me
Services
Consulting
- The next section is the actual first page that appears which is the Home page, and it looks like this (the next three pages are similar):
This is my image file of me standing to the right, you will probably want to change this. You are going to need to create an image and upload it somewhere and point to it, this can be your website or a flickr account etc. My images are about 200px wide and about 550px tall.
The Professional Paraphraser
This is my page headline and everything below this is my page text, just leave the items in the brackets <> alone and edit the rest
There is an obvious disconnect between some of the truly innovative technologies out there and the potential client/users. If you are a developer or provider of such technologies, this is not news to you. So how do you
make that connection?
These tags creat a little space between paragraphs
I am one of those unique individuals who can speak both languages. I can not only understand the complexities and nuances of your technology, but I can paraphrase and present these complexities and nuances to be understood and appreciated by your customer base. Connection Made!
When you engage my services, I will dive deep into your offering to gain a thorough understanding which I will use to craft a user friendly presentation that I will professionally present to your clients in one or more of several formats.
Why would you engage me to do this? Well, maybe you are not comfortable in front of crowds, or maybe you are not good at articulating your product features to laypeople, or maybe you are not a convincing spokesperson, or maybe you just have too much on your plate. Either way, there is no reason not to engage an expert presenter to help you make that critical connection, and create that “aha!” moment in your client’s minds for you.
- The last line is also optional, but if you have a Google Analytics account, you can create a profile for your page and enter the analytics account number here for detailed statistics.
- Alright, so are you thoroughly confused? At the risk of making this long post even longer, I will try and simplify this further, go ahead and copy and paste the entire code below into the FBML box and we’ll edit it there:
Your Home Page Headline
Your Home Page text
Your Second Page Headline
Your second page text
Your third page headline
Your third page text
Your fourth page headline
Your fourth page text
The easiest way to do this is to open a separate window in your browser so you can switch back and forth from your FBML page to your Micro-Site and refresh your micro-site to see the changes as you go. So try my copy, paste, edit method for yourself.
- Lastly you will probably want to set your new Micro-Site to be the default landing page for new visitors, so go back to your page settings and click on “edit” under Wall Settings.
Then select Micro-Site (or whatever you called your page) in the dropdown for Default Landing page:

- Hopefully this was helpful to you, one thing I have been asked in the past is about hex-decimal colors, so here is a link to a conversion chart
Please comment profusely about ways to improve this or your experiences with this tutorial. If you would rather just have this done for you let me know, I won’t do it for free, but I won’t charge you much to do it either.
Thanks for reading!
Steve
This entry was posted in
Expert,
Facebook and tagged
facebook,
fbml. Bookmark the
permalink.
blog comments powered by