:(

Not found.

How to fix Heartbleed Vulnerability on LAMP Server (Apache PHP) CVE-2014-0160

OpenSSL which is used by several million websites was found vulnerable to the heartbleed vulnerability. Thankfully it is quick and easy to fix following these instructions.

Why do I need to fix it?

When it is exploited it leads to the leak of memory contents from the server to the client. This means anything in the server memory (RAM) could be potentially sent to a person exploiting the bug. Here are examples of what is on your server memory:
1) The encryption keys themselves
2) User names and passwords used on the web
3) PHP Session IDs
4) Data being sent to other users

How can I test the vulnerability?

We used a python script to test the vulnerability on our servers. A single python file which sends the target server a carefully crafted heartbeat message and waits for the server to send back a lot of sensitive information. Alternatively you can use the SSL test tool on the ssllabs website.

How to fix on CentOS

>sudo yum update openssl
>service httpd restart

How to fix on Ubuntu

>sudo apt-get upgrade openssl
>service apache2 restart

Other things to consider

- Are there any other software statically linked to OpenSSL? Nginx? Ruby? PHP? You need to recompile or restart them
- Replace any API tokens or passwords in use
- You might have to create a new private key and CSR to get a new SSL certificate
- Do you feel like your users might have been compromised? You will then need to ask them to change passwords

Takeaways from the Parse Developer Day Conference 2013

Parse is an app development platform for the cloud that held its first developer’s conference on September 2013 in San Francisco, California. Parse had recently been bought by Facebook, and so far promises to be a major contender in the app development arena.

If you wanted to attend the conference but missed it, you can still get the key points and see some of the presentations. 23 people presented, most of them from Parse with one from Stripe and two from Microsoft.

5 New Parse Products Unveiled At Developer Day

The Parse/Facebook partnership was ready to show off 5 new Parse products designed to assist cloud app developers.

  • Parse Analytics: this category includes Push Analytics and the recently-released Custom Analytics. The former provides insight into user activities and app interactions, as well as passing API requests. The new Custom Analytics capability lets you set your own arbitrary events and dimensions to track any metrics you deem worthy.
  • The Unity Software Development Kit (SDK) Unity: is a powerful tool for game developers, helping them build intricate cross-platform games. This SDK lets developers use Parse for file and object storage, user management, rich querying, Facebook authentication, role-based access controls, and for accessing analytics data.
  • A New User Module: The Parse User Session Module gives developers a great solution for keeping Parse users logged in from page to page. It makes use of the traditional Parse.user methods, giving an unprecedented ability to manage user log in-and-out.
  • A New Image Module: The Parse Image Cloud Module is for easy manipulation of graphical images. This module includes a host of useful features like automatic generation of images to save bandwidth. For complete instructions on how to use this module, see the official Parse guide.
  • Background Jobs: This new feature is perfect for creating, automating, and managing long-running and recurring tasks. Once you create a job, you can set its start date, the parameters it takes, and how often to repeat it.

These features are designed to let startups focus on what their founders started them up to do, without worrying about managing their data and wasting time on tedious tasks. In regards to Facebook, these new Parse tools make Facebook an even more desirable destination for app developers looking to integrate a social network into their apps. Overall, it turns Facebook into a more comprehensive suite of tools and resources.

If You Still Want To Feel What It Was Like

If you just aren’t content with getting the bare-bones summary of the conference, you can watch the 15 recorded sessions of keynote, introductory, and advanced talks given by the speakers. These videos will be posted on the Parse blog periodically over the next few months.

The first two videos are already up on the Parse blog. You can now watch the keynote address, given by Ilya Sukhar, CEO of Parse, as well as the exciting Developer Show and Tell.

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

DNS

There are hundreds of domain name registrars you can choose to register your website domain name with. EG: Gandi, Namecheap, Godaddy to name a few popular ones. However, we recently had a couple of clients who use markmonitor as their domain name registrar. Looking around on markmonitor website and searching through the whois records revealed something rather surprising.

All of Google, Gmail, Youtube, Blogger, Yahoo, Flickr, Microsoft, MSN, Bing, Baidu, Ebay and even Facebook use markmonitor as their domain registrar. Further whois queries shows that 9 out of the top 10 websites by traffic use markmonitor as their domain registrar. This was also the same case with websites of HSBC, Bank of America, UBS and pharmaceuticals like Pfizer, Novartis, Merck and so on. The list of popular domains registered by markmonitor goes on and on.

To be clear, markmonitor do not have traffic flowing through them as all companies listed above run their own authoritative DNS servers.
EG with Whois of Google.com the name servers are ns3.google.com, ns2.google.com, ns1.google.com, ns4.google.com and all these servers are controlled by Google.

In theory markmonitor could change nameserver records to another server and take over any of these websites. Potentially a rogue markmonitor employee or hackers could also change the nameserver records of these top websites on the internet. However, I would assume that most of these nameserver queries are cached by different ISPs for a long time and someone could jump in and fix the issue before it affects a lot of users.

In summary, it is surprising that Facebook, Google, Microsoft, Yahoo, Ebay all use the same registrar. These sites and many more under markmonitor account for significant traffic on the internet. Potentially creating a single kill switch for bulk of the internets. Does anyone know of a suitable alternative to markmonitor? Is there a solid safeguard against external parties changing these nameserver records?

Using an iOS device to control a game on your browser

Accelerometer support is available in Mobile Safari and this enables the browser to sense movement, speed and direction with Javascript on iPhone and iPad devices. If we push the movement data from the iOS device instantly through a nodejs server to a browser, then we can control a game on the browser. This is exactly what we have put together in this fun little html5 demo.

Try the game before you go through the components that make up this demo.

iPhone / iPad controller

The user scans the QR code or visits the unique link created for them from the demo landing page to start the controller. The controller code reads accelerometer values and then passes the movement to the nodejs server.

Key parts of the iOS device controller code

//Detect if the browser supports DeviceMotionEvent
if (window.DeviceMotionEvent != undefined) {
//ondevicemotion is fired when iOS device detects motion
  window.ondevicemotion = function(e) {
//ax is the movement on the x axis.
//This motion is used to move the ship in the game
  ax = event.accelerationIncludingGravity.x * 5;
  ay = event.accelerationIncludingGravity.y * 5;

//Status 0 is start, 1 is left, 2 is right, 3 is stay
if(status == 0){ //initial condition
  status = 3; //stay
  socket.emit('spaceChange', {'ax': 3});
  statusmsg = 'Waiting for movement';
}
if(ax > 14 && status != 2){ //move right on device
  status = 2;
  socket.emit('spaceChange', {'ax': 2});
  statusmsg = 'Moving ship right';
}
if(ax < -14 && status != 1){ //move left on device      status = 1;      socket.emit('spaceChange', {'ax': 1});			         statusmsg = 'Moving ship left';  }  if(ax > -14 && ax < 14 && status != 3){ //device held steady
  status = 3;
  socket.emit('spaceChange', {'ax': 3});
  statusmsg = 'Ship held steady';
}

The controller code detects movement from accelerometer and only pushes data to the nodejs server if there is a change in direction of the device. This reduces the data pushed from the phone to the server when compared to sending  all the live accelerometer values to server. Finally, the value 14 in ax is set as a threshold to detect if the user is moving the device to the left or right.

Node.js server with SocketIO (Server side)

Node.js is a server-side JavaScript environment based on Google’s V8 Javascript engine. Programs are written in JavaScript, using event-driven, asynchronous I/O to minimize overhead and maximize scalability. Socket.IO sits on top of Node.js and makes it easy to deliver realtime data between almost every browser and the node server. Socket.IO code runs on the server and the client side. This makes Node.js and Socket.IO ideal candidates to be able push accelerometer values instantly from mobile safari to the desktop browser.

Each visitor to the game landing page is assigned an unique random id that links the browser and the iOS safari instance. User loads the URL provided on their iOS device and then safari detects accelerometer motion, which is then pushed by socket.io on client side to the node server. The randomly generated id is used as a room for the user so that push from user device is only sent to a particular browser.

Server side Socket.IO code

//Start on connection
io.sockets.on('connection', function (socket) {

 //Set room for user when connection is made
 socket.on('setChannel', function (data) {
 socket.join(data.channelName);
 });

 //When iOS device moves send data to browser
 //Multiple browsers can be listening to same device
 socket.on('spaceChange', function (data) {
 socket.broadcast.to(data.channelName)
                   .emit("spaceChanges",data);
 });

});

Browser game and client side Socket.IO

The browser game can be played with the keyboard arrows or with iOS device movement. The space invaders game itself behaves like a standard HTML5 game which uses HTML canvas. Thanks to Erop Balyshev for developing the well tested game in a couple of days. The html game code is commented and you should be able to understand the underlying code for the game quite easily. The socket communication and movement based on feedback from the iOS device was later plugged into the game code.

Code below shows how data from server is handled on the browser.

//iOS detection and corresponding action
var lastkey = 37;
var dataStart=0;
  socket.on('connect', function() {
   //if sockets gets disconnected then mention room again
   socket.emit('setChannel',
              {'channelName': '<!--?php echo $randRoom; ?-->'});
  });

  socket.on('spaceChanges', function (data) {
     if(dataStart == 0){
        //First movement data arrived
        document.getElementById('status').innerHTML
                  = 'Receiving data from your iOS device';
        dataStart = 1;
     }
    ax = data.ax;
    var	posob=new Object();
    if(ax == 2){
        //move right
        lastkey = 39;
    	posob.keyCode = lastkey;
        posob.type = 'keydown';
        document.getElementById('status').innerHTML
                   = 'iOS device tilted right';
    }
    if(ax == 1){
        //move left
        lastkey = 37;
    	posob.keyCode = lastkey;
        posob.type = 'keydown';
        document.getElementById('status').innerHTML
                   = 'iOS device tilted left';
    }
    if(ax == 3){
        //hold ship in place
    	posob.keyCode = lastkey;
	posob.type = 'keyup';
        document.getElementById('status').innerHTML
                   = 'iOS device held steady';
    }
    //Send action received above
    keypressaction(posob);
  });

//Fire automatically once first data starts
window.setInterval(function(){
  if(dataStart == 1){
    var posob=new Object();
    posob.keyCode = 32;
    posob.type = 'keydown';
    keypressaction(posob);
    posob.keyCode = 32;
    posob.type = 'keyup';
    keypressaction(posob);
  }
//Timer is correctly a shot ever 200ms.
//Decrease 200 to lower for even faster firing!
}, 200);

Conclusions

- We are very impressed with the instant movement detection and control over the game.
- You can also run multiple browsers on your desktop with the same id get parameter and have it all controlled with the same iOS controller.
- Current space invaders game uses only X axis movement on the iOS device. However, all three dimension values are available on iOS safari ondevicemotion method. It is technically possible to do much more with the iOS device. Probably the ship can fire when user shakes the device?

UPDATE: Watch a presentation of the HTML5 space game by Roshan Abraham

Enjoyed the demo? Looking forward to your feedback and ideas.

Cool new stuff in PHP 5.4

PHP 5.4 was released yesterday. It took nearly 2 years since the release of version 5.3 and has been a huge undertaking. Congratulations to the guys that made it happen. Let’s take a look at the features:

1) Speed
PHP 5.4 is the fastest of all PHP versions. Benchmarks both Synthetic and real-life show a pretty impressive jump in performance. Drupal, WordPress, etc are faster by almost 10% while Zend Framework was faster by 21%. There is a lot of improvement on memory usage, performance (req/sec), etc. Andy Gutmans of Zend claimed the memory foot print is also lowered by upto 35 percent (that is huge!). Read more about the tests here

2) Short echo tags
Short echo tags will always work irrespective of the ini settings.

<?= "Always works even if ini short tags are disabled" ?>

3) Compact Array Syntax and Array Dereferencing
Both of these changes makes the code look much more cleaner and easier to read. Take a look at the examples below

$a = [1, 2, 3]; //Same as array(1, 2, 3);

//Dereferencing
$a = "Zero One Two Three Four";
echo explode(" ", $a)[4]; // outputs Four

//Function Array Dereferencing
function movies() {
return ['Mission Impossible', 'Transformers', 'Titanic'];
}
echo movies()[1]; //Outputs: Transformers

4) How long did your script take to execute?
Previously you set a start variable and store time in it. Then you write your code and compute the difference in the end. Like this

$time_start = microtime(true);
// Run a lot of your code
$time_end = microtime(true);
echo "Took:", $time_end - $time_start; //Time spent

// Just one line at the end of your script with PHP5.4
echo "Took:", (microtime(true) - $_SERVER['REQUEST_TIME_FLOAT']);

5) Built in Web Server (CLI)
Well, we’ve been strongly recommended not to use this on production as this is brand new and not intended to replace Apache/nginx !

$ php -S localhost:8080

The above shell command gets the web server running at port 8080 after setting the Document Root as the current working directory. It also serves static assets and supports URL routing.

6) Traits
Traits is “compiler assisted copy-paste” literally, it is also known as “Horizontal Reuse” and similar to functionality of “Multiple Inheritance”. This implementation adds 4 new keywords: trait, use, as and insteadof. As and insteadof are used to resolve conflicts when you use multiple traits.

trait sayHello { //First Trait
public function hello() { echo "Hello"; }
}
trait sayWorld { //Second Trait
public function world() { echo "World"; }
}

//Then we define the class
class sayHelloWorld {
use sayHello, sayWorld; //use brings in both Hello and World functions
}

$say = new sayHelloWorld();
$say->hello(); //Hello
$say->world(); //World

Conclusion
No concrete plans for PHP 6 or other versions announced yet, However, there are lots of cool stuff here to get excited about. With PHP 5.4, the new Default Page Charset is now utf-8. There are other features like a callable type hint, support for $this in anonymous functions.With closures, cleaner array syntax, PHP is now looking more like Javascript.

Build better facebook pages with iframe tabs

There are two major changes announced for Facebook pages. The most prominent is the change to the the layout and fan page design (forced update due on March 10th 2011). The second is that Facebook pages now support iframes. This means that developers are free to use popular, simple and standards-based web programming model (HTML, JavaScript, and CSS) compared to highly restricted FBJS and FBML.  There are lots of reasons to be excited about this. Here are a few of our best:

1) Google maps on pages

You can now have fully functional Javascript based maps within Facebook pages. This makes it easier to display business location, location of stores, hotels, etc. To make things even more flexible, mapping services will now have access to your location if you use newer browsers.

Google maps with location on Facebook iframe tabs

To see this functionality in action, go to the maps page. You need to be logged in to Facebook to view the page. Please note that your location is not stored by us and used just to display a map for the demo purposes.

2) Add youtube videos and other music players

Embed Youtube Videos on fan pages

The iframe technique also make it much easier to embed youtube videos and other flash/HTML5 multimedia. This gives users access to related videos and more added functionality. This also includes the ability to view the video in full screen. Click on the image above to go to the video demo page.

3) Embed slides and PDFs

Embed external docs to your fan page

Embed external docs to your fan page

Like how a video is embedded, you can now embed slides, PDF, other documents using Slideshare or related apps. Here is a direct link to the docs demo page.

4) Create amazing landing pages

Use any Javascript library of your choice: jQuery, ExtJS, mootools, etc. You can even use flash or HTML5 to create great landing pages. In short, the only limitation on design, layout and functionality is now your imagination and the restricted width of around 520px.

5) Create your own top navigation menu

Create your own top level menu

Create your own top level menu

The previous Facebook page design had top level navigation tabs which have now moved to the left side of the page. This does free up some space and lets the developer create their own top level navigation tab. Including multi level level navigation.

6) Add a like button within the page

No longer need a click above to Like

No longer need a click above to Like

There are thousands of Facebook pages including top brands like Coca cola which have the text like “Click on like button above”. This will no longer be required. You can now have the like button within the page. An example is what we have on our page here.

7) Special content for Facebook page fans

You can have a special page displayed for Facebook fans. This is possible because Facebook sends a signed request to your server each time your page loads. This request from Facebook has details like user language preferences, age restrictions and also information showing if an user is a page fan, page admin, etc. All the source code for all the above pages is available on this page.

Notes:

- Our page has been updated to the new version. This is a requisite for working on the new iframe enabled facebook pages.
- All the code is free to use as usual and is intended to demo the features of iframes on Facebook tabs.
- You seem to need to be logged in to Facebook to be able to view the demo pages in action!
- For those beginners who are not sure how to create the iframe tabs, please visit the Facebook guide on creating pages

What features or possibilities excite you the most?

Retain leading zero in CSV

Leading Zeros in Excel with CSV

Most web applications at some point will have some sort of an export data feature to get data out of the database in some csv or excel format. CSV is probably the simplest to generate on the fly from PHP and other server side scripting languages. However, I had a particular issue where leading zeros were just not displaying when the csv file was opened with Excel. Look at the example csv below where when opened in Excel will not show leading zeros.

"Comment","Number","Zip"
"Leading Zeros will not be displayed","0003833","0596"

The best solution to work around this is just to add an = in front of the column to avoid Excel from formatting the column when displaying numeric value. So below works fine.

"Comment","Number","Zip"
"Leading Zeros shown in Excel",="0003833",="0596"

Hope this simple trick helps you avoid Excel eating up leading zeros in csv! Any other CSV related suggestions and comments are welcome.

Tracking user engagement on Facebook fan pages

In our previous blog post we showed how to setup Google Analytics for Facebook fan pages. The article was very well received and highlighted the importance of improved analytics. Please review the older article for detailed instructions on how to setup Google Analytics. Here are a few interesting concepts which will help you build better Facebook fan pages and also take your Analytics information one step further:

Fans versus Non Fan activity

An interesting way to look at your Facebook fan page activity is to split them with activity by your Fans and non fans. To do this, we need to use segments in Google Analytics to split activity into Fan and Non-Fan activity. You can create a segment based on pages visited by your user or specific event.

fans-vs-non-fans2

Using segments to track Fan/Non Fan activity

We will need to use FBJS (Facebook Javascript) and the tag <fb:visible-to-connection>. The tag will allow us to display a section to Fans and another to Non-Fans. We have managed to use this to create a single action button but calling different FBJS functions depending on whether the user is a fan of the page or not. Once a Javascript function is activated, the appropriate tracking image has to be shown to log the visit correctly on Google Analytics. Displaying this tracking image causes a hit to be registered on Google Analytics and this can be used to segment traffic. Visit our tracking page to get the code and see this in action.

Tracking activity on forms and on your pages

This is a good method to track user engagement with the Facebook page. Several users might visit your Facebook page but only a few might actually engage with the form. When your custom Facebook fan page loads, Facebook does not activate the Javascript you have written. This is only activated when a user performs an activity. Something like clicking on a button, clicking of your form, playing a video, entering some details onto the form, clicking on a button of your carousel, etc. This is a good opportunity to track activity on your page. All you have to do is use a script tag like the one used in the Advanced tracking page.

Goal and Funnel Visualisation

This can be a quite powerful tool, you can track for example how many users visit your contact page, how many then proceed to engage with the page and how many eventually click on the contact button. Here is an example of a funnel visualisation.

A simple funnel visualisation

A simple two step funnel visualisation

The above two step funnel visualisation shows you how many users visited our contact page and how many proceeded to submit the form. This could have also been made into a three step funnel displaying how many visited the contact page, how many clicked around and how many actually clicked the contact button.

Tracking Purchases or clicks on your fan page

To track clicks which can be purchases, clicks on links, etc. We generate a tracking code for each action that we want to track using our trusted Google Analytics code generator. We then load this image location on click of a button, or link, etc using the usual onclick event handler.

In conclusion

These techniques require some knowledge of Javascript and a reasonable understanding of how the image technique lets you work around Facebook’s Javascript restriction. You can get the complete source code to how we segregate fan and non fan visits, etc here. We are a web development company and will be happy to help you out with your unique tracking needs on your Facebook page. Please share your thoughts, comments and ideas on how to track user behaviour in more depth.

Google Analytics for Facebook Fan Pages

We launched our Facebook fan page earlier this month and as with all Facebook pages only Facebook Insights program is available to page administrators. Facebook Insights shows demographic details and interactions on your pages BUT limited to show information of fans only. It is far less sophisticated and comprehensive when compared to the free Google Analytics. One of the limitations of Facebook Fan pages is that you can only run limited Javascript on it and Google Analytics needs Javascript code included to correctly track visitors. We have successfully managed to get ALL functions of Google Analytics working on our Facebook fan page (including visitor statistics, traffic sources, visitor country, keyword searches with all other powerful reporting & maps overlays etc).

Google Analytics Example

How to setup Google Analytics on your Facebook fan pages

The workaround we use in our code is to include Google Analytics as an image instead of setting the standard Javascript. This method tracks every visitor to the custom facebook pages on Google Analytics. It required a combination of server side cookie management and an additional <img> tag to the bottom of the facebook fan page. Here are the steps to get Google Analytics working on your facebook fan page.

1) Setup Google Analytics account. If you already have one, create a new website profile. You can name it facebook.com or facebook.com/your_page_name. You will finally get your tracking code which looks like this UA-3123123-2
2) Create your custom img tag for each of your pages you like to track. EG: contact form, services, products etc. You can use our tool to create the Google Analytics link generator for Facebook pages.
3) Add the entire custom image html tag from step 2 to the bottom of each Facebook fan page that you need to track.

That is all there is to it! Google Analytics is not real-time, so you will need to give it some time. Approximately a day before you see the fruits of your “hard” work.

For advanced users

Use this method, if you don’t want to use our hosted link redirection as mentioned in the method above. You can download the entire source code which is just about three files to get this setup working on your own server (running PHP4.3 or above). The code is written in PHP and essentially creates the Google image tracking URL with the referrer, page information, ID, etc. The additional advantage of hosting this on your own server and domain is that visits from your website to your facebook fan page gets tracked, etc. You will also be able to customise further if you wish. Please do share any useful updates you apply to the tracking link code.

Facebook – Google Analytics Tracker v1.1 (Updated 21st Feb, 2010).  For advanced method – Download this code to use on your server.

If you don’t have a Facebook fan page yet, visit our tutorial for code and help on creating customised Facebook fan pages.

PS: We could not find any other source / blog that described how to get Google Analytics on Facebook fan pages! There is support for canvas pages and applications but nothing for StaticFBML fan pages. Hope this helps and please leave your comments below.

UPDATE:
1) A lot of users have asked how to track visits to the wall. Yes, this can be done. Please see the comments by iphp below.
2) Here is a screenshot to a staticFBML where the code should be placed
3) We have managed to set up funnels, goals and segments to separate fan and non fan activity.
4) Video: Here is a link to the Webdigi youtube channel check our favourites to get step by step walkthrough!
5) This blog and comments cover all aspects of setting up Google Analytics. If you still want help, we are available to offer paid support and installation of Analytics for your page. Please contact us here.

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.

Nutella 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.

apptabs

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.

portfolio

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

dialog

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.

Contact Us tab (Containing form, AJAX submit and Dialog boxes) code

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.