Thursday, December 6, 2007

Add Emotwicon in Twitter client Snitter

To add Emotwicon features inside the Twitter client Snitter there are only 3 lines of modifications to add.

1) Add the emotwicon javascript in "index.html"
Open the index.html in the snitter folder (eg. C:\Program Files\Snitter) and add the following line:

<script src="http://emotwicon.com/js/min_emotwicon.js" type="text/javascript"></script>

among the other script tags inside the head tag
Note : the min_emotwicon.js is a minimized version (to minimize file size). I will post the full source code soon.

2) Add parsing method in "snitter.js"
- Open the snitter.js file in the snitter/js folder (eg. C:\Program Files\Snitter\js).
- Search the text 'var txt = o.text;'
- Add the text
'if (typeof (emotwicon) != "undefined") txt = emotwicon.parseString(txt,false);' on the next line just after 'var txt = o.text;'

3) Add function to retrieve the emoticon images from the server in "snitter.js"
- Open the snitter.js file in the snitter/js folder (eg. C:\Program Files\Snitter\js).
- Search the text 'complete:function(msg)'
- Add the text
'if (typeof (emotwicon) != "undefined") emotwicon.getEmotwiconsXhr(true);'
on the next line after the line which contains
"els.status.innerHTML = msg ? msg : 'Last received';" in the 'complete:function(msg)' function block.

4) Voila. Run Snitter and start adding the emoticon codes found at the Emotwicon gallery

Here is a screen shot of how the emoticons look like inside Snitter application:



Unfortunately, the animated gifs are not animated!! This is an issue with the Adobe AIR platform. Hopefully will soon be fixed.

No comments: