Peter Sbarski22 March 2007, 9:43 PM
Instant messaging is cool - but the 'authorise buddy' process means it's not quite as convenient as making a phone call or sending an email. Here's how to let anyone see and chat with you via your web page.
Instant Messaging (IM) has been growing at an impressive rate over the past five years. A new generation of users has flocked to AOL Instant Messenger (AIM), Windows Live Messenger (WLM) and to a lesser extent Yahoo! Messenger, ICQ and QQ. According to a Nielsen poll conducted in March 2006, AOL had a lead of the market with 53 million active users (it has since claimed to have 70 million active users). With such widespread acceptance and proliferation of IM, a lot of Internet users are expected to use some form of this technology. However, what if you don't use IM or what if you don't want to share your account ID with a stranger?
One answer is to open a separate line of communication. This tutorial will show exactly how to do that by integrating an instant messaging system right into your web page. This approach will keep your buddy list clean and protect your IM privacy. Just for fun we also show how to add a webcam so that others could see you in real-time.
Before beginning make sure to have web hosting set up. The IM component will be stored elsewhere so even the most basic hosting service will suffice (providing it has FTP access for uploading images). For real-time image streaming you will need a webcam. The amount of upstream bandwidth will depend on the frequency of the upload and the size of the image. (This tutorial will try to be very modest with your bandwidth.) Finally you will need to construct an empty HTML file. Type Listing 1 (it's at the end of this tutorial) in to notepad, save the file as "talk.htm" and upload it to your host. Open Firefox (we hope you are using Firefox or Opera) and check that the file is accessible from the web.
Meebo Me
Meebo Me is a chat window widget that can be integrated into any html page. This widget is versatile. It can be used with blog systems such as WordPress and sites like MySpace. The only requirement is Adobe Flash version 7.0 or above.
To get Meebo Me on your page jump to http://www.meebome.com and follow the three step process. The first step will help you to customize the widget (Figure 1).
 Figure 1: MeeboMe Step 1 – Customize First |
Begin by entering the name for the widget and then enter a name for yourself. Next, select an appropriate size for the chat window. The image on the right will show how tall and wide the widget will be. Then choose a colour theme by clicking on a theme name. If you don't want a predefined theme click on "Customize It..." and select colours manually. You can select colours for the background, title text, title bar, chat input, history and text. When you are finished click on "next".
The second step (Figure 2) will ask you to log on to Meebo.
 Figure 2: MeeboMe Step 2 – Login Second |
You must have an account with Meebo in order to use it. Register, log on and then continue to step 3. The final step (Figure 3) will supply you with a few lines of code which will make Meebo Me alive on your page.
 Figure 3: MeeboMe Step 3 – Copy Third |
Copy these lines into "talk.htm" between <body> and </body>, save and re-upload the file again. Use your browser to check that the chat window is now visible on the page (Figure 4).
 Figure 4: Chatting with Meebo |
If everything went well your friends should now be able to talk to you. To reply you must login to meebo.com which will take you to a special personalized area complete with a buddy list. Meebo has a few special features which we will leave for you to discover. Hint: to see one feature click on "sign on" and then click on the "Network" drop-down tab.
Camera Ready
The next stage is getting your smiling face to appear on the page. Go to http://lundie.ca/fwink/ and download and install Fwink. This open source program takes images from your webcam and, at a regular interval, uploads them via FTP. Fwink can also add text messages, watermark logos and time stamps to images. We shall use it to create a live feed. Run Fwink and connect your camera.
First we need to configure file transfer settings (Figure 5).
 Figure 5: Fwink's easy to configure and use |
Input the FTP address (e.g. members.myisp.com.au), username, password and a filename for the image. You can leave the default filename if you wish. Under "Timing" set the frequency of image capture. For now 5 seconds should be a good start.
Next, click on "Video Capture" and then on "Change Device". Click on "Camera" and select your webcam from the list. If your camera isn't there make sure that it is connected and turned on. Some cameras automatically power-down after a short while. Finally set "Standard Size" to "Medium (320 x 240)" and then click on "Text Effects".
Text effects are entirely optional but they are fun. Here you can add personalized messages, date and time, select fonts and colours. You can also, optionally, add a watermark or a logo. To add a watermark, click on "Overlay", "Browse" and select a compatible image. Set an appropriate opacity (e.g. 60%), position (e.g. lower-right) and scale the image if you have to. The preview frame on the left will show how the end image will look like. When you are done click "Apply" and then "Close".
Open "talk.htm" and between <head> and </head> add:
<meta http-equiv="refresh" content="5">
The above meta tag will force the page to refresh every 5 seconds. On the next line type:
<meta http-equiv="expires" content="0">
This tag will prevent caching of your image. Finally between <body> and </body> add:
<img src="webcam.jpg" width="320" height="240" border="0" alt="My Picture" />
where "webcam.jpg" is the image you'll be uploading. Save "talk.htm" and re-upload it. Open the page in your web browser and check out the live web cast (Figure 6).
 Figure 6: : If you can see yourself – you've done it right |
Making it better
You may have already noticed that refreshing the page every few seconds is not a great idea. Each time the page refreshes Meebo disconnects and reconnects again, the page flickers and everything gets redrawn. Given these conditions it is all but impossible to have a deep and meaningful conversation. Therefore, the solution is to refresh the image without reloading the page.
Open "talk.htm" and remove:
<meta http-equiv="refresh" content="5">
from the header and
<img src="webcam.jpg" width="320" height="240" border="0" alt="My Picture">
from the body. Now type javascript code from Listing 2 between body tags.
The variable myPic, in Listing 2, must be constructed with a question mark and a unique number in order to change the GET command. In the document.getElementById('webcam').innerHTML line, myPic must be wrapped by two plus signs, two single quotes and two double quotations. The number 3000 specifies a 3 second refresh rate. Feel free to change it. Save and upload the file.
Enjoy (and let us know how you go)!
Listing 1
<html>
<head>
<title>My Visual Communicator Page</title>
</head>
<body>
</body>
</html>
End Listing 1
Listing 2
<span id="webcam" />
<script type="text/javascript" language="JavaScript">
function reloadImage()
{ uniqNum = new Date();
var myPic = "webcam.jpg" + "?" + uniqNum.getTime();
document.getElementById('webcam').innerHTML = '<img src="'+myPic+'" width="320" height="240" border="0" alt="My Picture">';
setTimeout("reloadImage()", 3000); }
window.onload=function(){reloadImage();}; </script>
End Listing 2