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

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

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

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

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 shown in Excel when = is used (Row 3)

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.

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.

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.

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

Portfolio tab (Carousel using FBJS Animation features) code

Tags: Facebook, Facebook Pages, FBJS

Get your own cloud server running in 15 minutes

This article uses Amazon EC2 and does not require any additional software installed on your machine to get your own cloud instance running other than your browser. To further configure your instance once it is running you will need Putty or an RDP client depending on your server instance.

Amazon EC2 (Elastic Compute Cloud) is a service by Amazon which lets anyone create, launch, and terminate server instances as needed, paying by the hour for active servers, hence the term “elastic”. The service starts as low as 0.11$ per hour. For this article an instance of LAMP server and a Windows Server 2003 was launched and cost about $0.25. This is very cheap for your on-demand server needs.

Steps to Launch your server instance

1) Signup for Amazon EC2 here (If you already have an amazon account you can save 2 minutes!)
2) Login to the EC2 management console

AWS Management Console (Click to enlarge)

3) On the management console, Click on Launch Instances
4) Select an AMI (Amazon Machine Image). You will get a huge list ranging from windows servers to LAMP servers, Ruby on Rails server, Ubuntu, Debian, Open Solaris etc. If you also look at the community supplied options you will have nearly 3000 AMIs.

List of Amazon Machine Images

5) Create a key pair by following on screen instructions. This is to help you to login to your AMI once it is ready.
7) Configure firewall settings and limit access to the server (SSH, MySQL, Web, etc).

Authorise connection method

8 ) You will now arrive at the final step of your wizard. Enter number of instances. Select an instance type Small, High CPU, etc. You will also have to select the key pair that was generated for you at Step 5. Click Launch once set.

Set Number of Instances

9) Voila! your instance will be available in just a few minutes. Now you can pat yourselves on the back for all the hard work!

It is amazing how quickly you can get an instance running. Once your server is up and running how do you connect to this instance? Well, it is pretty simple if you are using windows you get to use RDP (Terminal Services). For non-windows instances you will have to use SSH to connect to the server.

Advanced configuration of your Windows instance using RDP (optional)

It is easy to connect to a windows amazon instance via RDP compared to SSH connection to a linux server. To retrieve the RDP password, you will have to right click your instance and retrieve connection information using the key pair you have been given.

Connecting via RDP

You will have to connect using Administrator as your username. You will find all other info you need on the management console.

Advanced configuration of your Linux instance using SSH (optional)

You will need putty to connect to your linux server via SSH on a windows machine. If you are on a linux machine you will be able to use the ssh command as shown on the management console. With putty you will also need an additional tool to create a PPK file from the PEM file that you are given from the management console. To do this you will have to download an additional tool called PuttyGen.exe. You have to load the PPK file under the SSH Auth section of the putty client.

SSH Connection to your instance

Once your instance is up and running you will be able to connect to the webserver, connect to the MySQL server, if it is enabled with the AMI. The last two sections are to help you further configure your instance further. There are so many AMIs available with a lot of features already built in. Technically you will have your services running after the first set of steps which can be complete in 15 minutes!

If you do not want to configure a server yourself take a look at the Windows Azure, Force.com or the Google App Engine which runs Java, Python and PHP using Quercus for free (certain usage limits apply).

Tags: Amazon EC2, AWS Management Console, Cloud Computing

Javascript Gotchas listed to help avoid mistakes

A gotcha in programming is something unexpected although a documented feature of a computer system and not a bug. These gotchas throw beginners off Javascript programming and send some people running and screaming. In my opinion, Javascript is one of the most widespread languages as it is available on all browsers but one of the least learned languages.  Let’s start with basic ones.

1. Floating point arithmetic

This can be a major cause of frustration for people who are new to Javascript and are trying to perform some kind of mathematical computation.

<br /><br />
<script><br /><br />
alert(0.02 / 0.1);  //0.19999999999999998 <br /><br />
alert(1.14 * 100);  //113.99999999999999    ;)<br /><br />
</script><br /><br />

This is where the Math.round() functions come in handy

2. Plus operator overloading 

The plus operator stands for both arithmetic operations and also string concatenation. This is convenient if used correctly. Lets take a look

<br /><br />
<script><br /><br />
var msg, one="1";<br /><br />
msg = 2 + "1"; // msg = "21"<br /><br />
msg = 2 + one; // msg = "21"<br /><br />
msg = 1 + 1 + 1 + " musketeers"; // msg = "3 musketeers"<br /><br />
msg = "Bond " + 0 + 0 + 7; //msg = "Bond 007"  <br /><br />
</script><br /><br />

 
The above behaviour is because the operations are performed left to right. If we use parantheses the behaviour will change based on the order of the string or number in it.

3. Semicolon insertion at line feed

Javascript automatically inserts ; at a line feed. Lets see this in action with a simple example:

<br /><br />
<script><br /><br />
function returnSame(a){<br /><br />
   return                 //Inserts semi-colon to convert to return;<br /><br />
   a                      //a becomes a; - Unreachable<br /><br />
}<br /><br />
alert(returnSame(2));  //Output is undefined<br /><br />
</script><br /><br />

The magical semicolon insertion can get things complicated while creating objects using object literals

4. typeof operator

typeof is a unary operator. The results are not one would normally expect. It suprisingly evaluates null to ”object”. 

<br /><br />
<script><br /><br />
var obj={};  //object created using object literal<br /><br />
var arr=[];  //array created by array literal<br /><br />
alert(typeof(obj));   //object  - Good<br /><br />
alert(typeof(arr));   //object  - Bad<br /><br />
alert(typeof(null));  //object  - Ugly!  ;)<br /><br />
</script><br /><br />

 
It should only be used to distingush objects from other primitive types.

5. false, null, undefined, NaN, Infinity

They stand for different things although they might look similar or at times look redundant. Javascript uses three primitive datatypes numbers, strings and boolean. In addition it has two trivial datatypes undefined and null. Both null and undefined are equal according to the equality operator (==)

 <br /><br />
<script><br /><br />
var a;<br /><br />
alert (a);    //undefined<br /><br />
alert (1/0);  //Infinity<br /><br />
alert (0/0);  //NaN<br /><br />
0/0 == 0/0;   //false - a NaN != NaN<br /><br />
alert (b);    //error<br /><br />
</script><br /><br />

6. String replace only replaces first occurence

Unlike PHP or other languages, string replace in Javascript only replaces the first occurence of a string by default.

<br /><br />
<script><br /><br />
var nospace = "I dont need spaces".replace(" ","_");<br /><br />
alert(nospace);    //I_dont need spaces   - Only first occurence<br /><br />
var nospace = "I dont need spaces".replace(/ /g,"_");<br /><br />
alert(nospace);    //I_dont_need_spaces<br /><br />
</script><br /><br />

7. ParseInt function

This is used to convert a string into an integer. The function does accept two arguments and the second argument specifies the radix. The radix here for decimal is10. If no radix argument is passed the parseInt function tries to guess the base and in this case because the string starts with 0, it is parsed as an octal number.

<br /><br />
<script><br /><br />
var str = "017";<br /><br />
var strInt = parseInt(str);      //strInt = 15  ;)<br /><br />
var strInt = parseInt(str,10);   //strInt = 17<br /><br />
</script><br /><br />

Please share your Javascript Gotcha’s using the form below:
(note use &lt; and &gt; to get past the comment filter for < and >)

Tags: gotchas, Javascript Development

Understanding FTP using raw FTP commands and telnet

Both FTP and SMTP are simple text based protocols. A previous article showed how to check if an email address exists using SMTP commands from the terminal. Here I would like to show you how you can use raw FTP commands to connect to an FTP server, login, traverse directories and even download files. But before we do this we need to understand how FTP is different from the other protocols. 

Firstly FTP (File Transfer Protocol) uses two channels, the data channel and the control channel.  This is called out-of-band control. The control channel sends commands to the FTP server and the data channel is used for data (to retrieve files from the server, etc).

Secondly there are two major modes of FTP operation, the active mode and the passive modes. The difference lies in the way the data channels are opened. In Active FTP, the FTP server will connect to the client port and send data to it. In Passive FTP, the FTP server will tell the client which port to connect to for retrieving data. Firewalls can complicate the process on both sides. 

In our example, we will use Passive FTP (avoiding firewall issues on client) to download a file using anonymous FTP login to the IETF servers. There are a lot of files on this server by some estimates it is about 4GB. We will pick up a small file called ftpext-charter.txt located in the /ietf/ftpext/ folder on the server.

Open the terminal/command prompt (On windows, Go to Start > Run > type cmd). Once you are on the command prompt, type this command to connect to the FTP server and issue commands

C:\> telnet ftp.ietf.org 21

220 ProFTPD 1.3.1 Server (ProFTPD) [64.170.98.33]
USER anonymous
331 Anonymous login ok, send complete email address as your password
PASS blogger@webdigi.co.uk
230 Anonymous access granted, restrictions apply
CWD ietf/ftpext/
250 CWD command successful
PASV
227 Entering Passive Mode (64,170,98,33,151,31).
RETR ftpext-charter.txt
150 Opening ASCII mode data connection for ftpext-charter.txt (6060 bytes)
226 Transfer complete
QUIT
221 Goodbye. 

                                     Commands/Response on control channel

We issued these five commands in the following order at lines 2, 4, 6, 8, 10 and 13. 
USER – Send username to the FTP server
PASS  - Send the password (Anonymous servers need email address)
CWD  - Change the working directory on the server
PASV – To enter the passive mode (To let client connect to the server)
RETR – To retrieve a remote file from the server
QUIT – To terminate the connection to the server 

Between line 10 and 12, you will notice that the file was downloaded. To start the download, I had to open up another telnet window to open the data channel. To figure out to which IP address and port I had to connect to, we have to look at line number 9. We received a set of numbers (64,170,98,33,151,31) from the server in response to the PASV command. The first four related to the IP address 64.170.98.33 and the last two 151 and 31 help us identify which port to connect to.  Multiply the first by 256 and add it to the second. So, 151 * 256 + 31 which is equal to 38687.  Now that we have the IP address and port number, all we have to do is to open a second terminal and telnet to IP:Port as shown below:

C:\> telnet 64.170.98.33 38687 

This will now show you all the contents of the file ftpext-charter.txt being thrown into your second terminal window. Once this is done, you can proceed to type further commands on the control channel (the first terminal window).

Notes:
- The anonymous FTP server on IETF has a 60 second timeout on its control channel connection. Please connect to your own FTP servers they might be more forgiving to humans on terminals.
- FTP is not very secure as you can see the password and username are sent in plain text! Also, there is no encryption as you saw on file downloads or uploads.
- Type HELP once you send your password to see what commands you can issue the server.
- Here is a list of raw FTP commands and the parameters
- Here is a list of anonymous FTP servers
- This is the FTP sequence diagram which explains stuff at DNS and TCP level
- On windows there is a built in command line FTP tool (called ftp). It is useful but it does not show us how to use raw commands and communicate to an FTP server.
- SFTP (SSH File Transfer Protocol), FTPS (FTP over SSL) are more secure ways of using FTP.

The FTP HELP command via terminal

Hope this helps!

Tags: FTP, telnet, terminal

Avoid Javascript blocking content download on your website during page load

Around 80% of the end-user response time is spent on the front-end. A fair share of this time is spent on downloading components of the page like scripts, Flash, stylesheets, images etc.  Javascript takes majority of the loading time of a webpage because scripts block parallel downloading and rendering in the page. Even if you do not have a lot of Javascript files to load on your webpage they can still block loading other content on your page while they load.  Lets have a look at how the standard javascript file include method and the script DOM element method in detail below.

Standard Javascript file include method

<SCRIPT src="A.JS" language="JavaScript/text"></SCRIPT>
<SCRIPT src="B.JS" language="JavaScript/text"></SCRIPT> 

<IMG src="1.GIF" />
<IMG src="2.GIF" />
<IMG src="3.GIF" />

Javascript blocks the other elements from loading (Example)

Script DOM element method

var p = g.getElementsByTagName("HEAD")[0];
var c = g.createElement("script");
c.type= "text/javascript";
c.onreadystatechange = n;
c.onerror = c.onload = k;
c.src = e;
p.appendChild(C);

Javascript executed without blocking any element from loading

This method creates a DOM element for each Script and then adds the element to the HTML. 

NOTE: 

1) Only when the appendChild function is called the Javascript will be executed.
2) For inlined code that depends on the Javascript and also for a similar method of Asynchronous Script Loading – See Steve Souders blog
3) If you go to MSN.com (Alexa top 10 site based on traffic) and hit view source you can see the javacript elements are included by using the script dom element to load the web pages faster. This is a good example of where you can use the script dom element method for certain js files that do not have inlined code dependency. Let us run a Pagetest waterfall report and you can see the following for MSN.COM

Pagetest Waterfall report of MSN.COM shows no blocking during page load

Tags: Javascript Development, performance, Web Development

Add Google Adsense to WordPress without plugins

I was just trying to add Adsense to this blog and found several plugins available to add Google adsense to wordpress. Finally, I managed to add Google Adsense to this blog without any plugins – this solution takes around 5 mins to setup and it only uses the text widget available in wordpress by default.

Step 1: Login to your blog as administrator
Step 2: Click on Appearance
Step 3: Select Widgets
Step 4: Select the sidebar you want (Default Sidebar 1)
Step 5: Add Text widget
Step 6: Click on Edit widget
Step 7: Enter Caption. I have used “Useful Links”
Step 8: Paste your Google Adsense code in the text area. See example code & screenshot

Example (Copy and Paste below into Widget):

<script type="text/javascript">
<!--
google_ad_client = "pub-9990819195828769";
google_ad_slot = "7810166087";
google_ad_width = 200;
google_ad_height = 200;
// --></script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js"
type="text/javascript"></script>

Screenshot

Wordpress Text Widget - Add Google Adsense code

Step 9: Click done & Save changes.

You should now be able to see Ads from Google showing on the left side of your sidebar. Just like we have on the top right of this page.

Tags: adsense, google, wordpress

How to detect if your webserver is hacked and get alerted

We all do our best to write excellent code and also keep our installations of popular open source tools like WordPress, Joomla, Oscommerce, Drupal, phpmyadmin and all its plugins always updated to prevent any attack or hackers using known exploits on them. This article is not aimed at going through all those methods to help you secure your website BUT focuses on how to send you an alert once your website is hacked and running “hidden” code that you didnt write.

Read more…

Tags: hash, PHP Development, Security, Web Development, webserver

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

We have all been doing email address validation for a very long time to make sure that the email is correctly formatted. This is to avoid users entering wrongly formatted email address but still they can accidentally give us a wrong email address.

Example of a correctly formatted email address but still wrong:

mailbox.does.not.exist@reddit.com [VALID email format but it does not exist]

Above case specifically happens when you take important customer email on phone and you type in the wrong email. So is there a QUICK solution to really check the email without sending a test message to the user? Yes.
Read more…

Tags: forms, mail, PHP Development, Web Development