Adding bespoke content to Facebook Pages

Facebook appears to be, on the surface of things, the least customisable social network in terms of design, particularly in comparison to Myspace or Youtube, However, due to its modular nature and the application platform it is surprisingly easy to add custom content to your Facebook page.

The most useful application for adding content to your pages is Facebook’s own Static FBML application.

This application allows you to add HTML to your page, either as full tabs or profile boxes. There are some limitations but I find it is very similar to coding for Email. In the example below I will explain how to add a promotional button to your Facebook wall.

You will want to prepare your image beforehand, You can make it as tall as you like but the maximum width is 180px to fit onto the wall tab.

freetrial

Browse to the application and add the application to your page.

addtopages

Now navigate to your page and click the edit page button, look for the Static FBML box and select edit from the menu.

editfbml

Here we will add a title for the box and our HTML. The code below will add an image and link it back to Sign-Up.to. You can create your own HTML in Dreamweaver or even the Sign-Up.to editor if you like, or simply change the code below to insert your own image and link.

fbmlcode

<a href=” INSERT YOUR LINK HERE “><img src=” INSERT IMAGE LOCATION HERE ” alt=” INSERT A DESCRIPTION OF YOUR IMAGE HERE “/> </a>

TIP: If you need somewhere to host your image, upload it to Facebook and copy the image path by right clicking the image and selecting properties.

Once your box is created, go to your boxes tab and click the pencil in the corner of the box, now select ‘move to wall’

movetowall

walltab

Some good examples of FBML content can be seen below:

Adidas have used a Wall Box as a promotional tool
Adidas have used a Wall Box as a promotional tool
iTunes have created a whole tab of Static FBML boxes with a unified style.
iTunes have created a whole tab of Static FBML boxes with a unified style.

Thu, Sep 10, 2009 ~ (21)

4 Responses to “Adding bespoke content to Facebook Pages”

  1. Hi Pamela,

    Boxes default to the “Boxes” tab on your page.

    Most boxes allow you to click the pencil icon and select “Move to wall tab” as we have in the example above.

    Once they are on your wall you can drag and drop them into place.

    I hope this helps.

  2. Hi there,

    For some reason my boxes tab does not allow me to move to wall. When i hover over the box no pencil appears to give me this option. Do you have any idea why? Any help would be much appreciated!

  3. Hi Paul,

    I too have noticed this issue.
    I’ve heard that Facebook are redesigning the sidebar and perhaps this is a result of that early implementation (or they’ve moved the option again).

    That said I’ve found a work around.
    If you click the pencil icon on a box already in the sidebar and select ‘Move to Boxes tab’ it will move it there and all the applications in the Boxes tab will have the ability to be edited or have the option ‘Move to wall tab’ enabled.
    At this point before you do anything note the current URL as pasting this in when on the normal boxes tab (http://www.facebook.com/yourpagename?v=box_3) will enable the edit options and ‘Move to wall tab’.
    My URL looks like this: http://www.facebook.com/signupto?v=box_3#/profile.php?id=00000000000&v=box_3

    This is a hack and may not be around forever but it will definitely enable you to perform the task until Facebook resolve this bug.

×

Comments are closed.