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

Susan said on June 12, 2010 at 2:38 pm:

Thanks for the informative post. Great ideas, and a good starting point.
mas joe said on June 14, 2010 at 9:12 am:

Thanks For tutorial this very Great Ideas
Shana said on June 28, 2010 at 8:26 pm:

Hi there – thanks for this. I’m not a programmer either. lol I do understand though that the code needs to be altered to my own function… but… can someone point out which lines of code have to be changed? I DO have a PHP form on my own website already, but I’m not sure of how to link that to this code. (& i’ve tried just using MY form on my fb page, which it did show up, but it wouldn’t send.)

TIA for your help if at all possible!
Tim said on July 2, 2010 at 2:53 am:

How do you get the rolling, animated tag cloud???? Very cool!!
keith said on July 6, 2010 at 4:01 pm:

Some good information there has helped a little bit, but how do you get things to show down the side of the page and not just a tab to another page ?
Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources - Smashing Magazine
Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources |
Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources | Web Design Cool
Ilie Ciorba said on July 7, 2010 at 3:41 pm:

Awesome post! After viewing a showcase of custom f, fan pages I decided to make my own!
Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources | i know idea
Bacca said on July 10, 2010 at 5:30 am:

Thanks for this article! I had to mess with the FBML alittle bit but I got it working pretty well.
Orlin said on July 13, 2010 at 11:20 pm:

Thank you for the intro!
Jake Summers said on July 16, 2010 at 1:05 am:

Can you point me in any simple direction on how to make the form fields required?

Your code worked perfectly! I just want to make some fields required because right now they can just submit blank forms.
An Hoang said on July 17, 2010 at 6:36 am:

Hi … I want to redirect url facebook page to another using FBML ?? help me, thank you
Sakura Martinez said on July 23, 2010 at 5:41 am:

Thanks for the useful tutorial and codes. I would like to ask however, as I have yet to test these codes, if the code found on the top of the page (in the main post and not on the comments) are updated codes?
Ryan Bollenbach said on July 31, 2010 at 3:25 am:

It’s so awesome to see this evolution and I’m really excited for the future of it!! :D.
Mike said on August 4, 2010 at 8:26 pm:

Ok sorry got it working.

Form validation with your code would be really nice!!! 🙂
Suresh Sharma said on August 7, 2010 at 9:33 am:

Hi Dear,

Thats very helpfully for me. Because my senior never give right way for this. They always hide.
Thank for your post.
Joe said on August 13, 2010 at 4:35 pm:

I am using iphp’s php code , seems like everything works but I receive no email..

I made the necessary changes to the php file as far as my email address.

I changed the location of the php file in the fbml code to where I have my php file hosted.. There seems to be two places to do this.. one at the top and one at the bottom…

When I made the change at the top it acted like everything went through but never received any mail ,

Changing the bottom part made the form not work
Mark said on August 16, 2010 at 2:07 am:

Very helpful information, thank you so much – I mostly use FBML and RSS/notes to get a new page up and running pretty fast – along with Photoshop and CSS for a nice image map you can get a lot of good content that’s appealing … it’s great to find information like this to help –
Here’s my latest page: facebook.com/pages/ReXark-Archival-Recordings/152834168063347
Chips said on August 16, 2010 at 4:01 pm:

Thank you for all your share! I am a new guy in Facebook App. I wanna to check the user is “LIKE” before send the mail, is it possible?

Do i need to add some checking in ajax or javascript?

Thanks for your help.
Lindsay said on August 23, 2010 at 4:46 am:

First I wanna say, thanks for sharing your knowledge.. You have, so far, had the most knowledge in one post I have come across regarding FBML – people don’t seem to wanna share too often .

SO I am currently having an issue with using this – i dont know if it’s because facebook has changed since you posted this..

I have this page here:
facebook.com/pages/Hug-Me-Up/145464638811742?v=app_4949752878

And I just copied and pasted your code and was going to customize after I got the form to submit. I have taken your php code from pastebin and added my own email address..

I have copied and pasted your html and ajax code into the fbml box and changed the action to use my form_submit.php page.. I have the form action and the ajax post set to that form…

When I try to submit the form, I get an error that says it could not be submitted. There are no errors that I can see in firebug and everything seems valid. I am at a loss!!!!

I would REALLY appreciate help
facebook.com/pages/Hug-Me-Up/145464638811742?v=app_4949752878
gx said on August 25, 2010 at 1:12 pm:

3q very much!
Lemon said on September 2, 2010 at 11:30 pm:

Thank you for your tutorials! Great stuff!
but…
I cannot get the contact form to work.
I’ve double and triple checked everything i know.

Using my edited version of your contact.php form and utilizing your code, when the ‘send message’ btn is clicked it just says ‘sending’ and nothing happens…

FB page is here: facebook.com/pages/Seattle-WA/Grad-Nights/177421153362

any help? anyone else having this problem?
Thanks!
Pingback: Smashing Magazine: Designing A Facebook Fan Page: Showcases, Tutorials, Resources « Facebook applications for developers
Alan said on September 5, 2010 at 11:40 am:

Hi,
Thanks for tut almost up and running now but I have a problem where my logo.jpg wont load I just get a white back ground heres my code:

#logo
{ background: #FFF url(site_logo.jpg) no-repeat;
color: #67705A;
}

any ideas?
Pingback: Static FBML Contact Form with Validation for Facebook FanPage | System.Errors + brickbats
Dommy said on September 11, 2010 at 12:03 am:

yep looks like none of the ajax is working on facebook, form validation fails, and external stylesheets will not load.. any news/updates on this ?
Kym said on September 15, 2010 at 8:32 am:

Thanks for the info – but I’m still having trouble. Don’t suppose anyone who’s got this figured out would be kind enough to help me out?

my facebook page is here: facebook.com/gorgeousporgeous and I’d be happy to make someone admin for a short time while they set it up for me :o)
ikelleigh said on September 16, 2010 at 7:17 pm:

Hello there. Just stumbled on this because I was recently researching creating a contact mail form on a Facebook Fan page. I don’t know if you still support this page, but was wondering how to accomplish this with ASP rather than PHP? The Ajax seems to be looking for some kind of response, but I’m not sure how to give it that response in the ASP code.

Thanks.
Keith said on September 21, 2010 at 2:50 pm:

I am having the same problem as @Lemon and a few other people, i fill out the box, press send message, pops out a box that says ok, close go back to main main and it says sending but I never get the message?
Mike said on October 4, 2010 at 5:05 am:

It sounds like a good deal…
Todor said on October 8, 2010 at 10:08 am:

Hello guys,
great work… thank you very much!

But, is there any way to modify the code, so I can receive a proper Cyrillic letters… otherwise with Latin there is no problem.

Really appreciate your answer!
Rehan Ahmed said on October 16, 2010 at 11:35 pm:

Very nice work.

I have one question, instead of sending email if I submit data in database and then do some calculations. After that, Is that possible If I fetch some data from database and show on given tab? If Yes, then how?

Thanks in advance.

Regards,
Rehan
iphp said on October 17, 2010 at 5:48 pm:

@Rehan, Yes, you should be able to load data via AJAX and load them on the page. This is similar to the normal approach of displaying AJAX data on websites.

@Lemon, Have you changed the URL on the page to post your form data? Did you upload a PHP file to receive your POST data?

@Lindsay, Facebook did change a lot of things since we posted this article. Things do work largely without major problems.

Can I please request the readers of this blog to kindly help out other people if they can? This will be an ideal way to contribute if this article has helped you!
Chauhan Ashu said on October 21, 2010 at 12:38 pm:

I am sending the thanx to the webdigi team for this help.

Thanx!
joe said on October 22, 2010 at 11:40 am:

Disregard last message! Figured it out… Great stuff!
Evan Johnson said on October 22, 2010 at 3:51 pm:

Hello everyone! I would like to plug splashtab.com for anyone looking to create a custom Facebook Page, but who doesn’t have the time or knowledge to fuss around learning FBML. It’s a service I’m working on to make creating custom Tabs as easy as writing an email. Check it out – we have a free trial! Cheers-
T.rex said on October 22, 2010 at 9:40 pm:

Hi iphp,

I think i’m really close to getting this… I have the FBML code pointing towards my php page located on a server, however, they are not quite communicating.

the FBML code says:

Name

on the PHP page, there is a line:
$email = “Orgin of request : “.$_POST[‘orgin’].””;

What is this “ContactForm”? What should i type there to make it point towards the php code you provided (version 2).

I really appreciate it!
T.rex said on October 22, 2010 at 9:46 pm:

oop… my above post didn’t paste the FBML code. Basically, how do i change the code provides on this page, to correspond to the PHP example (version 2) that you provided? I understand about the actual PHP link, but i don’t know what ContactForm is… Its not references on your PHP example. Thanks!
Nicola said on October 26, 2010 at 4:17 pm:

Great article, thank you! However, I don’t seem to be able to add the static FBML to my page (when the ‘Select which Page you wish to add Static FBML to’ box pops-up it says there are no results, even though I have got 5 pages under my account! Any suggestions?

Thanks in advance!
Anibute said on November 1, 2010 at 8:04 am:

I tried many scripts. But nothing worked quite as good as this.
Brian said on November 4, 2010 at 3:49 pm:

Wow! I am forever in your debt!! I spent the past two weeks trying to get FBJS and Ajax in particular working and having a terrible time. Within an hour of finding this page, I had my ajax up and running.

A few quick notes: My PHP is generating a string containing HTML and I echo this out at the end of the script. My response type was Ajax.FBML and I take this in ondone callback as data variable. I then put it into a div like this: document.getElementById(‘div-id’).setInnerFBML(data);
and this worked, though not at first. I made an unknown change and then it worked. Isn’t that always the way?

But thank you tons!! This should become the official FBJS page in all honesty as ALL of the examples are more accurate than the actual documentation.
iphp said on November 4, 2010 at 4:08 pm:

@Chauhan @joe @Anibute @Brian
Thanks for your positive comments and encouragement. We learn a lot from various blogs out there. The least we can do is to share what we learn.

@Brian, thanks for sharing details. I hope it helps someone trying to make this work.
Sofie said on November 11, 2010 at 4:24 pm:

hi guys, i was told, a number of times, that FB is going to remove their Tabs soon, however, it’s their Profile Tabs they are removing, correct, NOT their Page Tabs, right? THerefore, we can still create FBML custom Tabs, right?
THANKS! I’m just getting mixed messages!
Sof
Puzbie said on November 12, 2010 at 9:19 pm:

Sofie, from what I have learnt over the last week or so of Facebook App learning, if you have a fan page, you will still be able to have an application tab. FBML seems to be on the way out, unless its on a static FBML fan page.

You can also use a PHP app instead of a static FBML page, giving you greater control, if you know PHP. I am documenting my findings on my blog; facebookanswers.co.uk/?p=106
You may find it useful. It is however, a work in progress.
Ravi Joshi said on November 13, 2010 at 6:06 am:

Gr8 work
JohnK said on November 15, 2010 at 8:41 pm:

Thanks for the info. I have used this on our FB page and works great.
Susy said on November 16, 2010 at 12:17 am:

Excellent!!
Thank you! Thank you! Thank you!!
Val said on November 18, 2010 at 8:17 pm:

The image carousel is great.

I am having one issue. I added extra slides to the carousel, but when I over over my new ones in backwards order (right to left) the text stacks on top of itself rather than replacing what was there before. This only happens to the new slides I created, not the original ones in the example.

I am a noob at javascript, so any help is appreciated.
Teresa said on November 19, 2010 at 7:40 pm:

I am using the sample php email script that you’ve supplied, which is working great.

One Question: How do I get the email address that the user submitted to go into the From email address so that we can simply hit reply to the email that is sent to us which would allow us to easily send an email to the form submitter?
Stefano said on November 25, 2010 at 8:54 am:

fantastic script and works like a charm – I used your php script (pastebin.com/raw.php?i=0AE4khs2) on my server to make it work… just a small issue – After clicking “thanks” on the confirmation the box goes away but the form does not reset to a blank state – it just shows all the inputs still filled and the button still says ..sending.. – I receive the email no problem, but is there something to do to reset the form after sending? Let me know, thanks 🙂
Jim said on November 28, 2010 at 9:31 pm:

Nice work. I finally got the email to work but have 2 issue that I’m hoping someone can assist with. (1) Is there a way to suppress the meta data at the bottom of the email (2) the “Okay” button’s blue background doesn’t fill the box. Thanks in advance.
Elle Billias said on November 30, 2010 at 2:34 pm:

I appreciate the tutorial, so many people are charging a ransom for such a simple thing! Thanks for sharing!
Alex said on December 2, 2010 at 11:35 am:

Hi,
Awesome stuff!
Thank you!
Only couple questions! How to prevent people to send empty mails?!
And how to get rid of some text in the message area! There always something like this – Array ( [fb_sig_is_ajax] => 1 [fb_sig_profile] => 1634819…

Thank you in advance!

Look forward to hearing from you!

Regards
Alex
Jay Stockman said on December 16, 2010 at 5:16 pm:

Is there a way to extract user info (name, email etc) from facebook (maybe a tag) so user doesnt even have to enter that info in the form. They simply click on SUBMIT, and the user info would be transmitted to the server automatically?
Brian C said on December 17, 2010 at 2:00 pm:

Hi,

Thanks for a great article! I particularly liked the portfolio concept, and am playing around with it for a fan site on FB. I am a newbee at this and was wondering if you could email me the CSS style sheet you used so I can see how you built it, and make changes. I don’t want to release this fan site as public with code pointing to your server… 🙂

Thanks!
Dave A. said on December 28, 2010 at 5:19 pm:

Jotform provide an excellent free VALIDATED form that can used on Facebook. Their Javascript validation works really well and the code can be modified to work with your own phpmailer class. The only downside of their script is that you don’t get the nice mail submitted dialog box that you do with the code here.

Currently coding to get their ajax validation and your web submission working together.

Can be seen working here facebook.com/apps/application.php?id=166742033354511&v=app_10531514314
cygnis media said on December 30, 2010 at 9:44 am:

best articles that I have ever seen! This is a great site and I have to congratulate you on thecontent.
Sagive SEO said on January 3, 2011 at 5:25 pm:

Thanks for unlocking this!!
now i make some gr8 Facebook page for my clients..

Anyone encountered the problem getting 3 emails
from facebook instead of one ??
PimpurFB said on January 4, 2011 at 8:38 pm:

Nice post! very helpful.
Chris said on January 5, 2011 at 8:40 am:

A bit complex but pretty good, thanks! Thinking of combining this with PageRage (the free Facebook theme service) for the perfect custom page!
Jenn said on January 8, 2011 at 6:21 pm:

Thanks for the great information! Designing custom Facebook pages is becoming a very popular service I provide my clients.
Kenny said on January 13, 2011 at 3:25 pm:

Thanks for this tut, very handy stuff, much appreciated. As you can see here: facebook.com/SpiritualWeb?v=app_4949752878 I’ve tried to set up the carousel but if you click the right button all the way then go back to the left, the first image gets cut off. Try it to see what I mean.

I’ve tried to change some of the settings but I can’t seem to fix it. Any advice would be greatly appreciated!
Kenny said on January 13, 2011 at 9:46 pm:

Hi guys, I left a message here today, but I’m not sure if it made it to the comments section. Did you get it? Thing is, I could really use some help with the issue I was having with your carousel. I love your tutorials and would really appreciate the help!
Stipto said on January 14, 2011 at 1:54 pm:

Anyone know how to adjust the speed of the slideshow? If you click too fast it messes up the position of the images..
Eddie Dean said on January 14, 2011 at 5:37 pm:

Hi everyone, I’ve just started on face book and trying to start a online business. Times have been hard, so this is my part time job to make a few xtra bucks. I’m trying to sell Electronics of all sorts. If you have any suggestions please let me know. I do appreciate any feed back that you may have. As I progress I will be adding more items to this list. Thanks for listening, hope you have a great day.
V4 said on February 8, 2011 at 8:56 am:

What about this facebook fan page? I Think it`s very cool & great inspirational article!

facebook.com/pages/V4-Book/151671231553127?v=app_4949752878
jswebschmiede said on February 13, 2011 at 1:45 pm:

Cool, great tutorial, i like it 😉
lawrence said on February 20, 2011 at 6:11 pm:

thats a good start to facebook pages, i would suggest some links to more details though …but i learnt a thing or too cheers!

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