Search i-r-paulus

Close Panel
PHP

PHP (1)

More archived tutorials - this time using PHP in Joomla! websites and in those sites that don't use Joomla!

 

{definitionbot=disable}

You might have seen my Joomla module that allows you to place your Skype status in your webpages, but you might be thinking 'well, thats great but I don't have a Joomla website' - if this is the case, but you do have a php processor on your server, then this is for you ...

Hopefully, this will give you the basics of integrating your own images into your website - if you don't have php, then I can't imagine it's too difficult to convert :)

If you are a bit impatient, like me, then you can download all the files you will need over in my Downloads section - and alter the Skype name in the file transparent_skype.php and you are away - or the file transparent_skype_styled.php if you choose to download the file with a bit more panache.

If you are feeling a little more sedate, and want a more in depth tutorial ... please continue ...

Firstly, I should say that I got a lot of my ideas and inspiration from the following sources, and their musings on the subject are well worth look at further:

Building a custom Skype-me button with status icon - an article from the personal blog of Nicolò Volpato that helped put me on the right track :)

Smarty skype status function plugin - a plugin for the Smarty (Template Engine) that helped with the cURL setup.

Skype Status Class - A PHP class from the brilliant http://www.phpclasses.org/ - this class written by lubosdz.  You have to register at PHP Classes, but it is a fantastic resource.

There were several other sources I employed, but I can't find those at the moment :( I will add to the list above as soon as I find the references!

Anyway - lets start with the complete php file (in the download I have called it transparent_skype.php)

{codecitation class="brush: php; gutter: true;" width="450px"}<?php
//Basic php version for sayeed_vir
//This checks to see you have curl installed
if (function_exists('curl_init')) {

  $cUrl = curl_init();
 //replace hippynerdywebdude with your Skype name in the next line
  curl_setopt($cUrl, CURLOPT_URL, 'http://mystatus.skype.com/hippynerdywebdude.num');
  curl_setopt($cUrl, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($cUrl, CURLOPT_TIMEOUT, 5);
 //Grab the status code sent from skype
  $status_code = trim(curl_exec($cUrl));
 //close our curl connection
  curl_close($cUrl);

  $status_code = intval($status_code);
  //For error testing
  //echo $status_code;
  
  //Dependant on the code returned - we change the image displayed
 //You need to change all references to 'hippynerdywebdude' to your own Skype username
 //You need to change all references to the folder skype_images below to the name of your folder that
 //Contains the png's you have that relate to each of the codes
 //or put your images in a folder called skype_images :)

      if ($status_code =='0'){
      $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/unknown.png" alt="call hippynerdywebdude" /></a>';
   }

    if ($status_code =='1'){
        $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/offline.png" alt="call hippynerdywebdude" /></a>';
   }
 
    if ($status_code =='2'){
      $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/online.png" alt="call hippynerdywebdude" /></a>';  
   }

    if ($status_code =='3'){
        $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/away.png" alt="call hippynerdywebdude" /></a>';
   }
 
    if ($status_code =='4'){
        $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/not_available.png" alt="call hippynerdywebdude" /></a>';
   }
 
    if ($status_code =='5'){
       $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/do_not_disturb.png" alt="call hippynerdywebdude" /></a>';   
   }
    if ($status_code =='6'){
      $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/offline.png" alt="call hippynerdywebdude" /></a>';   
   }
    
   if ($status_code =='7'){
        $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/skype_me.png" alt="call hippynerdywebdude" /></a>';
   }           
 
  
//print out the result
//Add any extra formatting here - styling or text before outputting the result
echo $skype_render;

}else {

$skype_render = "You do not have the cURL library installed - Contact your Hosting Company";
echo $skype_render;
}
?>{/codecitation}

Just in case you are only interested in how to do this, and not how it works, lets get the results out of the way ...

You end up with the following ...

The unstyled result

Obviously this has not had any styling, and it's a little difficult to see if the transparent part has worked, so I decided to upload another version, in which I have added a little styling to show what can be achieved :)

The code for the styled version is below:

{codecitation class="brush: php; gutter: true;" width="450px"}<?php
//Formatted Version for php non-Joomla sites
//This checks to see you have curl installed
if (function_exists('curl_init')) {

  $cUrl = curl_init();
 //replace hippynerdywebdude with your Skype name in the next line
  curl_setopt($cUrl, CURLOPT_URL, 'http://mystatus.skype.com/hippynerdywebdude.num');
  curl_setopt($cUrl, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($cUrl, CURLOPT_TIMEOUT, 5);
 //Grab the status code sent from skype
  $status_code = trim(curl_exec($cUrl));
 //close our curl connection
  curl_close($cUrl);

  $status_code = intval($status_code);
  //For error testing
  //echo $status_code;
  
  //Dependant on the code returned - we change the image displayed
 //You need to change all references to 'hippynerdywebdude' to your own Skype username
 //You need to change all references to the folder skype_images below to the name of your folder that
 //Contains the png's you have that relate to each of the codes
 //or put your images in a folder called skype_images :)

      if ($status_code =='0'){
      $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/unknown.png" alt="call hippynerdywebdude" /></a>';
   }

    if ($status_code =='1'){
        $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/offline.png" alt="call hippynerdywebdude" /></a>';
   }
 
    if ($status_code =='2'){
      $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/online.png" alt="call hippynerdywebdude" /></a>';  
   }

    if ($status_code =='3'){
        $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/away.png" alt="call hippynerdywebdude" /></a>';
   }
 
    if ($status_code =='4'){
        $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/not_available.png" alt="call hippynerdywebdude" /></a>';
   }
 
    if ($status_code =='5'){
       $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/do_not_disturb.png" alt="call hippynerdywebdude" /></a>';   
   }
    if ($status_code =='6'){
      $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/offline.png" alt="call hippynerdywebdude" /></a>';   
   }
    
   if ($status_code =='7'){
        $skype_render = $skype_render.'<a href="skype:hippynerdywebdude?call"><img src="skype_images/skype_me.png" alt="call hippynerdywebdude" /></a>';
   } 
}else {

$skype_render = "This is where your Skype Status Button should be - if you are reading this - you do not have curl installed :)";
}
         

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>An Example of using Transparent and/or custom images for Skype Status</TITLE>

<STYLE type="text/css">
body
{
   font-family:"Arial", Times, serif;
   color: #fff;
}

img
{
   border: none;
}


#header
{
        height: 50px;
        background-color: #666;
        margin-bottom: 10px;
}

#nav
{
        float: left;
        width: 25%;
        height: 150px;
        background-color: #999;
        margin-bottom: 10px;
}

#content
{
        float: left;
        margin-left: 5%;
        width: 65%;
        background-color: #999;
        margin-bottom: 10px;
}

#footer
{
        clear: both;
        height: 50px;
        background-color: #666;
        margin-bottom: 10px;
}
</STYLE>
</HEAD>
<BODY>
<DIV>
<DIV id="header">
<H2>A Header - Sort of :)</H2>
</DIV>
<DIV id="nav">
<UL>
<LI>Link1</LI>
<LI>Link2</LI>
<LI>Link3</LI>
</UL>
</DIV>
<DIV id="content">
<P>Your content here and hopefully a transparent image below :)</P>
<P>
<?
//Below we render our result
echo $skype_render;
?>
</P>
<P>Some filler text</P>
<P>Some more filler text</P>
</DIV>
<DIV id="footer">Copyright - me :)</DIV>
</DIV>
</BODY>
</HTML>{/codecitation}

 This renders the following (rather more tastefully styled) result ...

php-skype-result-styled.jpg

As you can see, it uses a transparent image and renders fine against the grey background.

If you play around with the png's in the skype_images folder, as long as you keep the names the same, you can customise them as much or as little as you like :)

When I have some spare time, I will add some more information about how all this works, but in the meantime, I hope this helps out.

 

 

 

 

Published in PHP
Written by i-r-paulus