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

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

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

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

 
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:

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

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

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

 
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 (==)

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

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.

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

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.

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

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

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, performance, Web

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:

<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, Security, Web, 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 fromat but still not correct]

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, Web

Does your website really need a CAPTCHA?

What is CAPTCHA?

CAPTCHA is an acronym for “completely automated public Turing test to tell computers and humans apart.” This can be with images / audio or whatever we will see in future.

Why do sites use it?

CAPTCHA is used to prevent bots from automatically submitting forms with SPAM or other unwanted content. Google and other companies use it to prevent bots from creating multiple Gmail accounts.

What is wrong with it?

Users will have to enter this additional information every time they have to submit a form. This is getting more and more difficult to decode for humans as the bots are getting better at it. I am sure that everyone reading this post has atleast once got a CAPTCHA entered wrongly.

Alternative Simple soultion:

NOTE: Does not apply for highly targeted sites like gmail, yahoo mail and others alike.

However,
If you have a sales form which requires an entry of username, email and phone number for a call back
OR
a simple contact us form with just name, number, description.

1) Have server validation of data.
All the forms have only client validation in javascript. Just validate in server and you can have 70% of spam bot submissions caught.
EG: If your form has Name, Email, Telephone.
The bot will send some 500 character text in Name and valid email and some random data in phone field. A simple validation on the server to trash Name having more than 30 characters will do the trick.

2) Hidden input element
Add an extra text input element to your form. In an external style sheet you set the element to display: none; thus making it invisible to all users with CSS enabled. Spam bots will usually fill all fields in a form you know that any forms submitted where this invisible field is not empty are spam.

With the above two simple steps you can see that most sites can avoid spam messages and still not having to use a captcha.

So in short - for all the websites with simple contact forms why do we use CAPTCHA and risk giving the customer an additional field to fill and risk not to getting them to fill it at all ??

Tags: captcha, forms, Web