I have been doing some testing during the past few days and will be explaining what I did. Here’s my finished result:
This was achieved simply with a couple of variables sent to a the Google Charts static API. It generates the image and sends it to my script. the script then displays the image, with the header of image/png. This may seem complex at first, but it is very simple. Google’s API for the image used in the product is the following:
Let’s examine the URL: chst=d_bubble_icon_texts_big specifies the type of chart to displayed. This is a bubble board.
glyphish_user is the type of icon it will display on the sign. In this case it is the User icon.
bb is the position of the “arrow”. for example “bb”is the default bottom left, “bbtl” is Top Left, “bbbr” is Bottom right.
008888 is a HEX color for the background of the sign.
FFFF88 is the text color.
|Hello+World|Google+Chart+API|Very+interesting is the text to display. Each line is separated by a |. The first line is the title, and it will automatically scale to the correct width and lines depending on the amount of text and lines. The official docs with all of the APIs and possible charts are here.
Now for the actual PHP.
To get the IP address of the user, you can simply use $_SERVER[‘REMOTE_ADDR’]; . This will give you exactly that.
To load the image from Google and display it, simply use the following:
imagealphablending($image, true); // Enable transparency for images, otherwise bg will be black
imagesavealpha($image, true); // Save the transparency enable setting
header('Content-Type: image/png'); // set header to be png image
imagepng($image); // display image
imagedestroy($image); // no longer image has been sent and is no longer needed.
To get the browser and OS the user is currently using, You will need a script that scans the User Agent and gives you a more “friendly” way of showing what software is running. I used a script available here that does all of this work for you. I juist modified a few of the strings such as the iPhone browser appears as iPhone, when it is really Mobile Safari. To use it, I wrote the following:
require_once "browser.php"; // include browser.php in your script
$b = new Browser();
$browser = $b->getBrowser(); // create variable containing the string of your browser
$os = $b->getPlatform(); // create variable containing the string of your operating system
To test it, I simply typed echo “Browser: “.$browser.”, OS: “.$os;
Finally, I used an XML API available at IPInfoDB.
You need to sign up for an API key, but it’s free.
The actual API gives me a long XML file containing the lat, long, country, city, timezone and others.
Using a free PHP library available here.
I extracted only the countryName key using the following:
$xml = file_get_contents("url/to/xml/file");
$country = value_in('countryName', $xml);
Note that file_get_contents may not be installed on your server so you could use cURL instead. Google is your friend.
What we have done is imported the library, loaded an XML file and extracted a key from it. $country is now a string containing your country. To display it, use echo “You live in “.$country.”.”;
You will notice that the name will be in full capitals, which is not ideal. To end that problem, use $countryCorrectCase = ucwords(strtolower($country));
ucwords() makes the first letter of each word capital, while strtolower() changes the whole string to lower case before the first letters are capitalised. Otherwise, the whole string would be capital (the first letter would be changed to capital but it already is.
You could also replace countryName with cityName to get the user’s approximate city, but this was not very accurate to me. In the US it would be fine.
To put them all together, I created all the variables and added them to the URL of the board. Here’s the URL:
The complete source of the main script is available below. The libraries are not included as I don’t have the right to distribute them.
Main Script (Dont forget to add API key to $key.)
Be sure to change the include in the main spy.php script to link to the right classes.
You may have noticed that the URL of the demo image ends in .png. You may be asking, “How does that work?”
The answer is Apache. I used a simple RewriteRule to give you the contents of another file when you view the original. Here’s what I put in my .htaccess:
RewriteRule ^spy.png$ spy.php [L]
RewriteEngine On just enables RewriteRule.
RewriteRule ^spy.png$ spy.php [L] simply says that you will receive the contents of spy.php when you go the the URL “spy.png”.