June 25th, 2010

tip  |   development  |   yii  |   ajax

Skype has very nice looking buttons but there is one fault: it is not possible to select transparent background although the buttons are in png-format. In the wizard, there is "Transparent" - option but it is set to be inactive.

Let's make transparency possible by using the Skype status API. We'll use an Ajax request to fetch the status since we don't want browser to lock up while requesting the status. A fade-in effect is also a nice one to have. We'll be using jQuery for easy Ajax and DOM handling functionality.


1) take screencaps from the Skype buttons page when the icons are automatically changing (see the "Skype buttons with status" - section of the page). Using the fuzzy selection tool (like "Magic Wand" in Gimp) select the button content and save it in a new image with transparent background.


2) Skype saves the connection status as a number to a file that is located at http://mystatus.skype.com/username.num, where username is the Skype Name that is used for loging into Skype. The possible status values are:

    0 - unknown
    1 - offline
    2 - online
    3 - away
    4 - not available
    5 - do not disturb
    6 - invisible
    7 - skype me

Statuses 0 and 6 seem very similar to 1, so we don't need images for these.


3) In order to get the status, we'll need to have a code that will read the content from the server and then use the right image to display the status. Since an Ajax request cannot access another domain, we will need to use a PHP script to fetch status from Skype.

In the PHP Framework Yii for example, an action function will look similar to this:

  1. public function actionSkypeStatus()
  2. {
  3.    if(isset($_GET['username']))
  4.    {
  5.       $ostatus = fopen('http://mystatus.skype.com/'
  6.       .intval(strip_tags($_GET['username'])) . '.num', 'r');
  7.  
  8.       if(!$ostatus)
  9.       {
  10.          $status = '1';
  11.       }
  12.  
  13.       while (!feof($ostatus))
  14.       {
  15.          $status = fgets($ostatus, 1024);
  16.       }
  17.  
  18.       fclose($ostatus);
  19.  
  20.       echo $status;
  21.    }
  22. }


4) The needed HTML and JavaScript codes are here:
 

HTML:

  1. <div id="skypeStatus" style="display: none;"></div>

JavaScript:

  1. <script type="text/javascript">
  2.   $(document).ready(function(){
  3.     var username = 'sven.kauber';
  4.     var skypeUrl = '/page/SkypeStatus/username/'+username;
  5.     $.get(skypeUrl, function(data){
  6.       var data = parseInt(data);
  7.       var offlines = [0,6,1];
  8.       var a = $('').attr('href', 'skype:'+username+'?call');
  9.       var img = $('').attr('src','/images/skype/'+data+'.png').attr('border','0');
  10.       var isOffline = false;
  11.       for(var i=0;i<offlines.length;i++){if(parseInt(data)==offlines[i])isOffline=true;};
  12.       !isOffline ? $('#skypeStatus').append(a.append(img)).fadeIn(1000) : $('#skypeStatus').append(img).fadeIn(1000)
  13.     });
  14.   });
  15. </script>



First we'll make a div where the Sype link and image will be added. Then we are setting username and skypeUrl that are used for building up the Ajax request. $.get executes the request and if it is successful, an integer value is parsed from the returned data. The offline - values are set in an array and then there is a check if the current value is among these. If the status is of type "online", a link is added that will allow Skype to be executed from browser. The image is added under the link or just to the display div.


The final result can be seen on the contact page


A tip: if it seems that the status is always "offline", it means that the web status display might not be switched on in the Skype software settings. Check that there is a tick at Preferences->Privacy->Status: Show my on the web.