Social Media for Direct Selling Speaker and Author | (707) 939-5709

More HTML and FBML for Facebook Fan Pages

HTML code for FBML Fan PagesWarning – Intermediate to advanced! 🙂 If you’re not there yet, move along! hehe

Wow – I sure have gotten a lot of comments, tweets and sharing of my Basic HTML Code for your Static FBML Pages on Facebook post! When I wrote that post I had no idea how popular it would become. It followed a previous post about How to Add Static FBML to a Facebook Fan Page which many people found useful as well.

Using the Static FBML application on Facebook opens up a whole world of possibility when customizing your Facebook Fan page. You can truly turn them into powerful mini-websites. In fact there is not much that you can do on a regular website or blog that you cannot do on a Facebook Fan Page! It’s truly amazing.

One of the simplest ways to customize with Static FBML is to use regular HTML. If you have an HTML/web page editing program such as Dreamweaver you can simply create the look you want within the program (making sure the width of or images in the design does not exceed 520 pixels) and then copy/paste the raw HTML code (just what is between the <body> and </body> tags) into your plain Static FBML canvas.

Another trick I’ve been teaching people, if they don’t already have Dreamweaver or something similar, but they have a blog such as this one on WordPress, is to open a new post or page – save as a Draft because you are not going to actually publish the post. Then create what you would like using the regular publishing window. I like the added plugin “TinyMCE Advanced” to give me some more buttons to play around with in the editor. Then when your ‘page’ is complete, simply move from the Visual tab in the editor to the HTML tab and copy the raw HTML code from there into your blank Static FBML application. Kind of a neat trick to be able to get HTML code when you aren’t a coder!

If you are interested in learning HTML, the folks over at W3 Schools have some great tutorials and you could truly go nuts soaking it all up! There are a few things that will not work within the Static FBML tab but for the most part you can use regular HTML within Static FBML.

Now that said, Facebook actually has a markup language, or code, of their own called FBML that naturally is meant to be used in the Static FBML tabs. HTML stands for Hyper Text Markup Language and FBML stands for FaceBook Markup Language. FBML is both simpler and more complex than HTML and to be honest, I have so much HTML code rattling in my brain from 12 years or working with it that I don’t have the patience to learn a whole new coding language, so I haven’t experimented with it much. I mostly use HTML.

Then along came Tim Ware from HyperArts. HyperArts has actually created the Static FBML Bible to help us out! the FBML Bible is like a dictionary, or really more like an encyclopedia for FBML code that you can use to do magical things on your Fan Page. Want to create a welcome tab where people see one thing before they “Like” the page, but get a goodie like a coupon once they do “Like” it? There’s an FBML code for that. Want to know how to embed a video player into a custom tab? There’s an FBML code for that. And it is all contained in the Static FBML Bible.

If you visit the Static FBML Bible page, you will also see an explanation of the rumor that Facebook is doing away with FBML. Facebook is not getting rid of FBML, they are simply moving NEW applications away from FBML into iFrames. Be sure to read that part of the page if you are curious. So FBML is around to stay and if you are a savvy do-it-yourselfer who wants to learn how to completely customize Fan Pages, the FBML Bible will be your friend.

If this all sounds like just too much to handle (I warned you!) then you might want to just order up a custom template from HyperArts. They will actually make the code for you, that you (or someone you hire, like me) can then open a Static FBML canvas, paste it in and you OWN the code. Some of the other services out there will let you create a page on their system, and they keep the code, and you “rent” it month by month by month. If they go down or out of business, your custom page tabs disappear. With the HyperArts code templates, you completely control your code and content. Of course this means that if there are any changes from within Facebook, you will be responsible for updating the code, but if you find yourself in a situation over your head there are always developers out there who can help, including the folks at HyperArts. For me, it is worth the risk because I am a control freak! LOL! I want to own my code.

Disclaimer – The links above ARE my own affiliate links for HyperArts. I believe in their product and programs and want to spread the word – I’d do so even if I weren’t an affiliate – but I figure with all the free advice that I give every day, it’s OK if I earn a couple bucks now and then right? Thanks for understanding. 🙂

I hope this has been helpful. Please let me know in the comments and if you have a success story – we’d love to hear about that as well! Although I cannot answer every comment asking which HTML or FBML code does what, if there are quick answers, I am happy to help.

Share this post:

Leave a Comment