Tabs are a great way to draw peoples attention in a Facebook Fan Page (or 'Like' page). You can customize them, and with little knowledge of HTML, you can integrate your tab into Facebook services, such as posting statuses etc. In this Instructable, I'll show you how to make you Fan Page appeal to new visitors.
Example: Jane has an event running on her Fan Page. She creates a Tab to advertise the event with a link pointing to her personal website, with a registration form. Once the person clicks on the link, a dialog box opens, and asks the user if they would like to post a status saying that she is attending this event. Her friends see the status, visits the link advertising the event on the Fan Page, and the process starts again.
Back to real life, I've been put in charge of my schools new Facebook page, and the whole aim is to advertise the school to new students, and providing information to current students. I thought that people would end up 'unliking' us if we kept posting statuses, so I turned to tabs and the magic of FBML.
Before you begin: note that this Instructable is not for Facebook profiles! This only works for Fan Pages created on Facebook.
Example: Jane has an event running on her Fan Page. She creates a Tab to advertise the event with a link pointing to her personal website, with a registration form. Once the person clicks on the link, a dialog box opens, and asks the user if they would like to post a status saying that she is attending this event. Her friends see the status, visits the link advertising the event on the Fan Page, and the process starts again.
Back to real life, I've been put in charge of my schools new Facebook page, and the whole aim is to advertise the school to new students, and providing information to current students. I thought that people would end up 'unliking' us if we kept posting statuses, so I turned to tabs and the magic of FBML.
Before you begin: note that this Instructable is not for Facebook profiles! This only works for Fan Pages created on Facebook.
Step 1Facebook Markup Language
FBML, or the Facebook Markup Language is the programming language which allows developers to tap into the deeper resources of Facebook. You can use some of the FBML tags to integrate various services into your Fan Page too.
FBML is very similar to HTML when writing code. All of the tags start with fb: followed by the appropriate tag name.
Some examples of FBML:
For a full list of tags, visit the Facebook Developers website at: http://developers.facebook.com/docs/reference/fbml/
FBML is very similar to HTML when writing code. All of the tags start with fb: followed by the appropriate tag name.
Some examples of FBML:
- fb:swf - allows you to embed any Adobe Flash object
- fb:name - renders the logged in users name
- fb:dialog - renders a dialog box
"We are in the process of deprecating FBML. If you are building a new application on Facebook.com, please implement your application using HTML, JavaScript and CSS. You can use our JavaScript SDK and Social Plugins to embedded many of the same social features available in FBML. While there is still functionality that we have not ported over yet, we are no longer adding new features to FBML."This affects applications and some of Facebook's Fan Pages, but we should be fine.
For a full list of tags, visit the Facebook Developers website at: http://developers.facebook.com/docs/reference/fbml/
Step 2Adding Static FBML to a Page
So if you gotten this far congratulations!
If you don't already have a Page, you can create one here: http://www.facebook.com/pages/create.php
You will need a valid Facebook account to create a Page.
This Instructable doesn't cover the basics of starting a page, however it it pretty self-explanatory thanks to the walkthrough shown once the Page is created.
To add a Tab to your Page, you'll need to go into the Administration panel of the Page by clicking the 'Edit Page' link under the profile picture.
Once in, you'll need to add the 'Static FBML' application by clicking Applications on the sidebar, and find 'Static FBML'. Click 'Go to Application'. You may have a page asking for your permission to add the box.
If you don't already have a Page, you can create one here: http://www.facebook.com/pages/create.php
You will need a valid Facebook account to create a Page.
This Instructable doesn't cover the basics of starting a page, however it it pretty self-explanatory thanks to the walkthrough shown once the Page is created.
To add a Tab to your Page, you'll need to go into the Administration panel of the Page by clicking the 'Edit Page' link under the profile picture.
Once in, you'll need to add the 'Static FBML' application by clicking Applications on the sidebar, and find 'Static FBML'. Click 'Go to Application'. You may have a page asking for your permission to add the box.
Step 3The Nougat Center
The editor for Tabs is very simple. The text field at the top is for the name of the Tab, as it appears on the Page. The box labeled FBML is for (drumroll) your FBML code. But before we begin on FBML, I'll give a brief overview on formatting regular text in a Tab.
From now on you will need a basic understanding of HTML coding.
For creating a tab, all that is needed is basic HTML coding. In my experiments I've found that separating each section into it's own "p style" works.
Tabs support HTML and linking to external stylesheets.
From now on you will need a basic understanding of HTML coding.
For creating a tab, all that is needed is basic HTML coding. In my experiments I've found that separating each section into it's own "p style" works.
Tabs support HTML and linking to external stylesheets.
Because Instructables doesn't have a syntax highlighter (yet), I'll try and colour coordinate the coding. And all of the opening and closing brackets < and > have been removed, so the Editor doesn't render them.
If copying and pasting the code, do not forget to remove the speech marks from the closing tag, and adding the opening bracket to the start of the code.
Yellow is code, Orange is content.
Here is an example of some sample code for a header:
p style="font-size:14px;font-family:Arial;font-weight:bold">Example Header"/p"
will renderIf copying and pasting the code, do not forget to remove the speech marks from the closing tag, and adding the opening bracket to the start of the code.
Yellow is code, Orange is content.
Here is an example of some sample code for a header:
p style="font-size:14px;font-family:Arial;font-weight:bold">Example Header"/p"
Example Header
A rundown:
- font-size:14px - the text appearing is 14px in size
- font-family:Arial - the font is Arial
- font-weight:bold - the content will be bold
Step 4Embed a YouTube Video
This code will embed a YouTube video into your page.
Replace ID_HERE with the real video id from the YouTube URL.
You can also change how big the player is, but be aware that the width cannot exceed 520px, and that due to Facebook's security protocol, the user will need to click on the video to activate the plugin.
(The editor stripped out the < at the beginning of the code, so you have been warned)
Replace ID_HERE with the real video id from the YouTube URL.
You can also change how big the player is, but be aware that the width cannot exceed 520px, and that due to Facebook's security protocol, the user will need to click on the video to activate the plugin.
(The editor stripped out the < at the beginning of the code, so you have been warned)
fb:swf swfsrc="http://www.youtube.com/v/ID_HERE"
imgsrc="http://img.youtube.com/vi/ID_HERE/default.jpg"
width="480" height="360" />
More info:http://developers.facebook.com/docs/reference/fbml/swfStep 5Embed an MP3 player
This code will embed an MP3 player into your tab. Change the following fields appropriately.
Again don't forget to add the < to the start of the code
More info: http://developers.facebook.com/docs/reference/fbml/mp3
fb:mp3 src="http://host.com/file.mp3" title="Song Name" artist="Song Artist"album="Album Name" />Again don't forget to add the < to the start of the code
More info: http://developers.facebook.com/docs/reference/fbml/mp3
Step 6Display Pictures or Text at Random
This code will randomly pick one of the objects specified to display. The content can either be text or a URL.�
Because the editor will not stop stripping out the <, I've had to embed the code as an image.
More info:�http://developers.facebook.com/docs/reference/fbml/random
Because the editor will not stop stripping out the <, I've had to embed the code as an image.
More info:�http://developers.facebook.com/docs/reference/fbml/random
Step 7The End
Well thats the end.
If you would like any more information about the wonderful world of FBML, visit the Facebook Developers website, Google FBML, or comment and I'll try and sort out your code for you.
If you would like any more information about the wonderful world of FBML, visit the Facebook Developers website, Google FBML, or comment and I'll try and sort out your code for you.
