Frustrated with FBML**This post is no longer relevant – you should be looking at building an iFrame tab – no posts yet – check back soon!**

 

Frustrated with FBML? Here is a quick low down of how to create a customised landing page for your Facebook Fan Page. A lot of people have been asking recently and I have given some help with some DIY jobs, adding a little code here and taking away irrelevant stuff there. So in the interest of sharing information with all rather than just a select few here it is and I hope it helps.

  1. First of all you need to add the FBML app to your fan page. Visit the link and click “Add to page” underneath the profile picture. You will then see a pop up box which will list the pages you would like to add the FBML app to. Click “Add to Page” next to each page to install then click close.
    This is where Facebook gets slightly annoying as you have to go the long way round to edit the application.
  2. Go back to your Fan Page and click the “Edit Page” under your profile picture.
  3. Scroll down until you see a box entitled “FBML 1” and click “Edit”.
  4. This will take you to the app and you will have a “Box Title” and “FBML”
  5. Change the box title to whatever you would like the tab to be called i.e “Welcome”, or “Join Us” or “Sign up!”
  6. Where FBML: is shown this is where you can add your HTML code, text or link to an image that you wish to display.

There are a few ways you can create your landing tab.

  • For the non techies/technophobes
  1. Create an image that includes your logo, some text etc and host the image as your landing page. Make sure your image is a maximum 520px wide to fit into the FBML tab.
  2. Host your image on your website, flickr or photobucket

To simply pull the picture in so it displays as your landing tab use the following code:

< img src=”INSERT URL HERE”>

This will display your image like this – Puppets for Education (Welcome tab)

To make the image clickable so it diverts to your website when a user clicks on the image:

<a href=”INSERTWEBSITEURL” target=”_blank”>< img src=”INSERT URL HERE”></a>

You can apply this code to any image you host in your layout, just change where you would like it to go.

  • For those who feel a little more comfortable with HTML

Host more images, insert some writing, make it clickable etc.

  1. Host your images as above.
  2. Next take your first image (possibly logo) or a “click like” picture/image (Use the <img src> code to do this)
  3. Insert your text

To link to pages of your website, Twitter account or any other link on the web use this code:

<a href”URL” target=”_blank “>Insert clickable word here</a>

For example if you wish to link to your twitter account you would use:

<a href”http://www.twitter.com/emmaewers” target=”_blank”>Follow me on Twitter</a>

Which will display like this:

Follow me on Twitter

You can then use the  code to link to another image to place at the bottom of your landing page.

E.G the code for above would be something like this:

<img src=”http://urlhere”>
Welcome to our Facebook Page, please click like above to become a fan.

<br>

You can find out more about us, what we do, take part in competitions etc etc

<br>

You can also <a href=”http://www.twitter.com/emmaewers”target=”_blank”>follow us on Twitter here!</a>

<br>

Looking forward to getting to know you

<img src=”http://urlhere”>

If you want to highlight, underline, make text big etc simply wrap code around text you require. Some handy codes that work with Facebook are listed on the Facebook Notes Cheatsheet! Yes all these work with the FBML tab too! Simple right?

  • Other options

Then we move on to <div>  tags etc which may be way over your capabilities, you may just not want to learn it and why should you? You’re far too busy running a business! The good news is we can do it for you, for a small fee. See Facebook Management for more information or if you want a simple landing tab without the management fees start at £99. For an example please see Discount Banner Printing’s Welcome Tab.

Once you have created your tab don’t forget to click “Save Changes” and open a new Tab in your browser, visit your page and click the “Welcome” tab that you have just created. Unfortunately there is now preview so you will need to run two different browser tabs and keep saving and refreshing when you make a change.

Luckily you do not need to go through the whole process again if you would like to install another FBML tab! You can click “Add another FBML box” in the bottom left hand corner and it will add “FBML 2” etc to your Fan Page Control Panel!

I hope this post has helped a few of you out there! Once you have created it post in the comments below so we can all see it!

Creative Commons License photo credit: couragextoxlive