Creating a custom facebook fan page by Web Development

January 11, 2010

Creating a custom facebook fan page

A Facebook Page is a public Profile that enables information about business and products to be shared with Facebook users and the public. An user should be able to create one in a few minutes. This article explains how to add custom tabs to your Facebook page to make it do more. Here we explain how we built a carousel, navigation tabs, forms, etc on the Webdigi Facebook fan page.

What do you need to create custom Facebook fan pages?

The only thing you need is Static FBML created by Facebook, this is an application that you have to add to your page. You can add advanced functionality to your fan page using the Facebook Static FBML application. This application will add a tab to your Page in which you can render HTML or FBML (Facebook Markup Language) for enhanced Page customisation. You will be able to add more than one tab using this application. On our Facebook fan page, we have three pages created using this application: services, portfolio and contact.

What are the restrictions on Facebook ?

1) Facebook does not allow Javascript to run on load, an user action like a mouse click must be performed before Javascript can be run. You will notice this on the services tab of our Facebook fan page. The carousel mouse over works only after you click on one of the arrows.

2) You will need to use FBJS (Facebook Javascript). This provides the functionality we need to develop custom facebook pages. This is also to protect other users privacy at the same time and restrict Javascript features that can be abused.

3) Use <link href=”http://example.com/style.css” rel=”stylesheet” type=”text/css” /> if you want to use CSS on your Facebook fan page. This is to get the page to work correctly on Internet Explorer. The other browsers support the <style type=”text/css”> tag.

4) AJAX requests have a short timeout and these requests are proxied via Facebook. There are also limits on length of JSON replies, etc.

Creating tabs on the Facebook fan page using FBML and FBJS

FBJS is Facebook’s solution for developers who want to use JavaScript in their Facebook applications. FBJS DOM objects implement most of the same methods regular JavaScript objects implement including: appendChild, insertBefore, removeChild, and cloneNode. Properties like parentNode, nextSibling, src, href (and many many others) have been redefined as a couplet of getters and setters (getStyle : setStyle, getValue : setValue, getClassName : setClassName). Here is an example of a tab on a Facebook page.

Creating a carousel on the fan page

FBJS exposes a powerful animation library which gives developers an easy way to improve their user interface with a line of code or two. All animations are CSS based, so a working knowledge of CSS will really help you out here. One of Facebook’s security restrictions are that Javascript will not be allowed onload of the page. The user must perform an action like clicking on a button, etc to begin Javascript code execution. This would mean that automated carousels; a carousel that starts rolling images by itself cannot be built into a Facebook fan page. This restriction also applies to pages with video, etc.

Submitting a web form using AJAX

Creating a form for a fan page can be done using HTML. The AJAX support from facebook is interesting. All AJAX requests to the server you have under your control goes through facebook. If you have a tool monitoring the AJAX request, you will see that the form is actually being sent through to fbjs_ajax_proxy.php which in turn POST or GET the request to your server. The AJAX request can be sent using FBML in 3 steps:

var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.post('http://example.com/ajax.php');

Creating Dialog boxes on Facebook

FBJS offers a variety of Dialog boxes: Confirmation boxes, Yes/No type, Dialog boxes with forms, Choice, etc. To create the above dialog, we just need the following one line of code

new Dialog().showMessage('Confirmation', 'The contact form has been submitted.');

Show me the code

Here are all the three code files that are in use for each of the three tabs on Facebook.

Portfolio tab (Carousel using FBJS Animation features) code

Services tab (Tabs within page, basic FBJS events) code

We hope this helps you cut short your search and gives you a head start in your quest to build custom tabs within Facebook pages. There are numerous resources out there that helped us understand FBJS and build this article. Do send us links to fan pages that you have built, looking forward to your comments.

Comments

Glad said on January 13, 2010 at 11:13 am:

Thanks for sharing the code and giving me a head start. I found a way to use AJAX bypassing Facebook central server (using FBJS LocalProxy) and hope it helps people who want to speed up requests.

AJAX allows you to make three different types of requests. RAW, JSON, and FBML. For FBML, it is necessary that the request go through Facebook FBML proxy server so that Facebook can collect data and render the FBML. For RAW and JSON types, there is no reason to go through the Facebook central server. The Ajax object now has a new property useLocalProxy that lets you make direct calls to your app server. If you find yourself using Ajax often it is worth checking out this new functionality.

This requires this file being placed in crossdomain.xml on your server, changes to FBML and using ajax.useLocalProxy=true. For more information google FBJS LocalProxy.
Matthew FOrr said on January 13, 2010 at 9:07 pm:

Most excellent! I’ve really enjoyed building a Facebook fanpage for my employer and have been procrastinating putting a Email newsletter signup on it. I finally got around to it today with inspiration from you guys.

One note, the CSS that you guys use in your contact form is pretty broken in FF 3.5.2, apparently FB adds a lot of hidden input fields to any form element. I found that to fix this you need to create a class for you input, textarea, labels and etc. Hope that helps!
Henrik Persson said on January 14, 2010 at 12:31 am:

very interesting, i’ve been a “fan” of nutella on fb for about a year or so, and never actually looked at their page.
Destiny Islands said on January 14, 2010 at 3:15 am:

Really useful guide dude! So many people don’t know how to utilize Facebook, but reading your article and learning from your advice really helps. Thanks again!
Pingback: How to Create a Cutsom Facebook Page with FBJS
Jasper said on January 15, 2010 at 11:51 am:

Very interesting, thank you!
Webling said on January 15, 2010 at 6:54 pm:

Comes handy at the right time. Thank you!
Danny said on January 15, 2010 at 9:50 pm:

Very useful guide. Thank you.

Can you call the Facebook API from a page? For example, can you provide a button that will update the user’s status when clicked (“is the biggest fan of [product]”).
Pingback: How to create custom facebook fan page | blogfreakz.com
Pingback: » Creating a custom facebook page – PHP, Web and IT stuff :: La Gaceta del Norte
Pingback: What Do You Need to Create Custom Facebook Fan Pages? Webmove
GrZeCh said on January 20, 2010 at 4:03 pm:

Does someone faced issue that document.getElementById(‘name’) returns null?
Kalesaray said on January 23, 2010 at 3:26 pm:

very nice,Thank you.
Loraine said on January 23, 2010 at 3:27 pm:

Great works well.
Brett Skinner said on January 24, 2010 at 2:39 am:

Very nice, thank you for sharing.

Just managed to get my facebook contact page working with AJAX.
Omares said on January 24, 2010 at 11:51 pm:

Muchas gracias or Thanks a lot!!!!!!!!!! 😀
Mansur said on January 28, 2010 at 9:45 pm:

Thanks!! Helped a lot. Great Post guys!!!
gf said on January 30, 2010 at 1:13 am:

Hi, could you maybe add the code from the contactus.php ? or just a simple code that sends email from this.. I copyed your codes and tested the thing and all the facebook stuff works great and easy to edit and modify, but i´m really stuck at what the contact.php should look like, i just found some very basic contact.php on about.com or something and that file is getting me no emails from the form and also it always gives me error messages on facebook 🙂

But great and very helpfull tutorial 🙂
Pingback: iLibrarian » Creating a Custom Facebook Fan Page
Webdigi Blogger - iphp said on February 3, 2010 at 5:52 pm:

Thanks for the wonderful feedback and to all the fans on our Facebook fan page!

@gf, you are on the right track, you will be able to get all the details in the $_POST super global
$_POST[‘name’]
$_POST[’email’]
$_POST[‘telephone’]
$_POST[‘message’]. Do send us a link to your facebook fan page.
Pingback: Really Useful Tutorials You Should Have Read in January 2010 Ajax Help W3C Tag
felipe saavedra said on February 11, 2010 at 2:13 pm:

muchas gracias, comenzaré a usarlo pronto.

saludos,
Felipe
Pingback: Alusión (weekly) « Alusión…Llamada Virtual
AJ said on February 16, 2010 at 9:25 pm:

Are you able to stack the javascript portfolio somehow and make them click independently?
Julián Landerreche said on February 19, 2010 at 3:19 pm:

Thank you for this great tutorial and for sharing the .fbml examples. They were really helpful to understand the basics of Static FBML.

I’ve already created a few custom tabs for a company’s FB Page, including a contact form processed by Swiftmailer library.
I used 520px as width (it has been announced that FB Page canvas width will change to that width, eventually, right?).

Thanks again!
soledad said on February 21, 2010 at 6:00 pm:

Hello! Great stuff guys! It’s really usefull!

I’m having a problem with ajax.onerror function. If i don’t fill the fields, the “Sending ok” appears, and not the error message. I’m not sure if i need some particular variable in my php… can you help me please?

Thank you so much in advance!!!
Pingback: PHP, Web and IT stuff » Blog Archive » Google Analytics for Facebook Fan Pages
Pingback: Usare Google Analytics con le Fan Pages di Facebook | maxzaglio.com
Fran said on February 24, 2010 at 12:42 pm:

Hi there

It’s brilliant table – but I’ve got two questions – they might seem a little daft. Where do the email requests actually go to? And is there any way of clearing the table after the form has been sent?

Many thanks
Fran
California Wedding Photographer said on March 1, 2010 at 2:06 am:

Thank you so much for sharing your FBJS animation code. I was able to modify it to create a very simple, but striking way to improve my photography fan page. You can see it here:

facebook.com/embracelifephoto

I appreciate your openness!
Rob Q said on March 2, 2010 at 10:13 pm:

I took your “portfolio” FBML code and dropped it in a fan page static FBML tab with the idea of testing, It worked!

I’d like to second GF’s request for a copy of the script contactus.php for processing the emails – would that be possible? Awesome tutorial all around.
iphp said on March 3, 2010 at 7:55 am:

@gf, @Rob, Thanks for your comments, I am glad it helped.
Here is a PHP script that you can use on the server for contactus. Please make changes as necessary. Here is the link: pastebin.com/raw.php?i=0AE4khs2
Pingback: JQueryin » Archive » » Overriding Facebook FBML Styling on a Canvas Page
Pingback: How to Pimp Your Facebook Fan Page » CapeLinks Blog
gill said on March 8, 2010 at 12:45 am:

Awesome guyz, jst wana thank u
Dave W. said on March 9, 2010 at 1:05 am:

I am having the same issue as GrZeCh above, where my elements that are referenced by document.getElementById are returned as null to my processing script. Everything is working fine when I a default value is submitted in the contact form, but any user input doesn’t get passed through.

Any help would be appreciated.
Julián Landerreche said on March 9, 2010 at 1:27 pm:

I’ve also added a contact form on a box, next to the Wall. 🙂
The only limitation here seems to be that you can’t link to a CSS file, so you have to include the style rules inside a tag.

You can check it here:
facebook.com/cluster.efectos?v=wall
saika said on March 13, 2010 at 9:31 am:

hey guys, is it possible to create facebook fan pages from PHP? I wanna create fan pages for my portal users using PHP code.

Thanks in advance guys.
Jani said on March 17, 2010 at 1:00 pm:

Thanks for the great example. I’m trying to get the contact form to work at developers.facebook.com/tools.php?fbml I just copied your script and changed the form address to mine, but I keep on getting ‘An error has occurred while trying to submit.’ Any ideas why?
js said on March 25, 2010 at 10:06 pm:

I second Fran’s comment. Is there a way to clear the form after someone clicks on the “Okay”? OR second, is there a way a user can be redirected to another page after clicking on the Okay button?

Thanks in advance!
iphp said on March 26, 2010 at 1:43 pm:

@js,@fran Clearing down the form is pretty easy to do for someone who understands Javascript. I am hoping someone who found this article useful will contribute. In the Javascript function submitAJAXForm() we need a document.getElementById(‘name’).setValue(”). This should be repeated for each of the fields. An easier method might be to use form.reset() if Facebook allows it!
Rachel said on March 31, 2010 at 4:48 am:

Hi! Thanks for the article. Would you mind giving me some further assistance (or tips). I followed your instructions and the form seems to function, but I never receive the email.
This is the link/page I am working on: (http://www.facebook.com/pages/Allen-TX/Home-Maintenance-Solutions-HMSRepair/105934849398?v=app_7146470109)
(once I get it working I want it to be my default landing)
And here is a link to my PHP script: (http://pastebin.com/KaYwxh77)
I am new to php and I cannot figure out where or what is my error.
Angela said on April 1, 2010 at 12:10 am:

Thanks so much for posting this! I was struggling with another form, then found this… and it’s great. Would be nice to know how to clear it after submit, but I’m content with it as is. Thanks again!
Tracy A. Wehringer said on April 3, 2010 at 1:07 pm:

question – I loved your code to create a form on FB, but what do I need to do to have the inbound emails come to me?

Thanks, love your site
Tracy
Jani said on April 6, 2010 at 4:08 pm:

Posting this again since it says awaiting for moderation…
Thanks for the great example. I’m trying to get the contact form to work at developers.facebook.com/tools.php?fbml I just copied your script and changed the form address to mine, but I keep on getting ‘An error has occurred while trying to submit.’ Any ideas why?
Omer Rosenbaum said on April 11, 2010 at 10:20 pm:

Hi!
I tried the contact form but it deoesn’t work. After filling my details and sending I get a massage that it was sent but receive no email.
Should I change something in the contact form script? I just copied and pasted it in the FBML tab. Do I need to upload a file to my server that will do the action of sending?
iphp said on April 12, 2010 at 9:17 pm:

@Omer, @Rachel, You will need to have some PHP code running on your own server to send the data in an email submitted via the Facebook. This is a fairly trivial thing to setup for a PHP/web developer. You can try with the code posted on this page: pastebin.com/raw.php?i=0AE4khs2
Clint said on April 15, 2010 at 1:39 am:

It looks great but I have the same question as Omer, what part of the code do I change so it comes to me?

Thanks!
Cullen Swanson said on April 23, 2010 at 6:14 pm:

This is awesome, thanks for sharing! I will implement into all of our client’s websites now lol
Paul said on April 27, 2010 at 7:03 pm:

Hi there… a quick question.

I followed your example, and it’s stunning. Really helped me a lot.

Now a question. Is it possible to put in a few radio buttons?

In my contact form, I need to ask for their age range, and I thought either a drop menu, or radio buttons would be easiest… but I can’t find any ANYWHERE.

Please, if you have some little piece of magical code, you would help me so much…. have spent 48 hours googling to no avail.

Thanks
Paul said on April 29, 2010 at 1:58 pm:

Hi there.

What happened? My FBML page just dissapeared, or at least it seems to try and load then nothing else happens. I panicked, and thought I would go check your out… YOUR’S DOESN’T WORK EITHER!

Go and try to see your portfolio tag… it endlessly loads.

What happened?
iphp said on April 30, 2010 at 11:20 am:

@Paul, Thanks for alerting us. This is now working. This was caused by Facebook making some changes. You can read more about it here bugs.developers.facebook.com/show_bug.cgi?id=9968 This was reported by another person on our Facebook fan page http://facebook.com/webdigi.
Pingback: Building a Stellar Facebook Page to Attract Your Raving Fans and Customers | jirrajarra - Web 2.0 Technology Made Simple
Pingback: Creating A Custom Facebook Fan Page - ChurchKreatives – A Community For Creative Christ Followers
Ben said on May 4, 2010 at 11:09 pm:

Hi im a small online company and i need the 1,2,3 hack steps to making a custom page for FB. I would also like to know where i even input the code on facebook to begin with….Can you point me in the right direction??
Lucas H said on May 11, 2010 at 3:19 pm:

Thank you so much for the contact form codes.

Me and my friends are running a small online store, and it seems like the codes came in time for us….Great stuff~
Tim said on May 13, 2010 at 9:40 am:

Thanks for the article! We have built a custom facebook page for our marketplace too – facebook.com/FlashScope 🙂 Check it out!
Okg said on May 13, 2010 at 10:58 am:

How do I enter my e mail address? The form was submitted to the fan page but the messages don’t appear on my e mail.

Thanks for this great post:)
Amish said on May 14, 2010 at 7:12 am:

I am not Tech savvy and i dont know how to use AJAX or JAVAscript, is any other facebook application available which helps me to create my fan page ?
adam said on May 17, 2010 at 9:27 pm:

so how do you get the contact form to send to your own email?
thank you
Vince said on May 18, 2010 at 7:03 pm:

Great info here, anyone available to help with the php to send in the form?
Popiplo said on May 23, 2010 at 3:29 pm:

Thanks for sharing the code, it is very useful. Great work!
Suske said on May 25, 2010 at 4:13 pm:

Good stuff. I do seem to get the email 3 times though. Is that just me?
Suske said on May 25, 2010 at 9:31 pm:

ah.. it’s a facebook thing, if you have your post destination URL return blank content then FB hits the page 3 times.

However, if you have your page return with some sort of content it will only hit it once.

I just added
echo “dummy value”;
to my PHP
Dave Reeder said on May 26, 2010 at 10:08 am:

Very nice tutorial thanks, very useful, I shall produce my own facebook page when I launch my new site later in the year 🙂
Alexey said on May 30, 2010 at 9:27 am:

Nice tutorial. Anyway I need to call Iframe on my FB page without clicking on a link.
How can I do this? Maybe with onLoad event?
Amit said on May 31, 2010 at 6:20 am:

I used the code and also created the PHP page on my server to collect the data which is working fine.. But major issue i have is with submitting the form.. When i submit the form, always the Onerror function is called whereas the data gets submitted 3 times.. What is the response data to be sent back fromt he server? Can u pls help me..
matthew said on June 10, 2010 at 4:54 am:

where would I put the echo? I put it in the php and it doesnt ever send the email to me. Once I take away the echo, it allows the email to go through, but it sends three messages.

Can anyone help with implimenting the reseting of the form?
iphp said on June 10, 2010 at 7:08 am:

@Suske, thanks for posting your find. We use a separate script to send out email and it works fine.

@matthew, I have updated the code here http://pastebin.com/raw.php?i=U3WGZNBY

@Alexey, Unfortunately, Facebook does not give us an onload event. I think they dont want Facebook to be as messy as MySpace with onload music, etc.
matthew said on June 10, 2010 at 4:27 pm:

ok thanks that helps a lot. I was just putting the echo in the wrong place by mistake. PHP isnt my strong side. Neither is Java Script. Did anyone figure out how to reset the form?

Comments are closed.

Web Development

Thoughts from London, UK

Creating a custom facebook fan page

Also read...

How to check if an email address exists without sending an email?

A single kill switch for 90% of the top ten websites

Using a mobile device to control a game on your browser

Cool new stuff in PHP 5.4

Google Analytics for Facebook Fan Pages

Comments