I have combined the 2 previous posts for expanding and shortening goo.gl URLs and have created a small class for it. Below is the download link for the class.

Expanding a URL

<?php
include('GAPIClass.php');

$objAPI = new GAPIClass('your_api_key_here');
$result = $objAPI->expand('http://goo.gl/WlFX');
if(FALSE === $result)
{
	echo $objAPI->error;
}
else
{
	echo 'Long URL:'.$result;
}
?>

Shorten A URL

<?php
include('GAPIClass.php');

$objAPI = new GAPIClass('your_api_key_here');
$result = $objAPI->shorten('https://www.packtpub.com/php-jquery-cookbook-to-create-interactive-web-applications/book');

if(FALSE === $result)
{
	echo $objAPI->error;
}
else
{
	echo 'Short URL:'.$result;
}
?>

As I have mentioned earlier that Google recommends an API key. The class has a flag variable called keyWarning. By default it is true and it will show the following warning message if you do not pass an API key while instantiating the class:

Currently you are not using an API key. It is recommended that you use one. Click here to learn more about the API key

To turn this notification off, just use this line:

$objAPI->keyWarning = false;

In past 2 posts you saw how short URLs can be expanded using the Google URL shortener API. This post shows how URLs can be shortened using this API.

API key is not mandatory for test purpose. Use this link to get an API key.

For shortening URLs, 2 points must be noted. First, a HTTP POST is required and the post data should be in JSON format. Here is the code:

//This is the URL you want to shorten
$longUrl = 'https://www.packtpub.com/php-jquery-cookbook-to-create-interactive-web-applications/book';
$apiKey = 'your_api_key_here';
//Get API key from : http://code.google.com/apis/console/

$postData = array('longUrl' => $longUrl, 'key' => $apiKey);
$jsonData = json_encode($postData);

$curlObj = curl_init();

curl_setopt($curlObj, CURLOPT_URL, 'https://www.googleapis.com/urlshortener/v1/url');
curl_setopt($curlObj, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curlObj, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($curlObj, CURLOPT_HEADER, 0);
curl_setopt($curlObj, CURLOPT_HTTPHEADER, array('Content-type:application/json'));
curl_setopt($curlObj, CURLOPT_POST, 1);
curl_setopt($curlObj, CURLOPT_POSTFIELDS, $jsonData);

$response = curl_exec($curlObj);

//change the response json string to object
$json = json_decode($response);

curl_close($curlObj);

echo 'Shortened URL is: '.$json->id;

Here is the JSON response from Google:

{
 "kind": "urlshortener#url",
 "id": "http://goo.gl/lBfOH",
 "longUrl": "https://www.packtpub.com/php-jquery-cookbook-to-create-interactive-web-applications/book"
}

You can also read these:

• PHP class for expanding and shortening URLs using Google URL shortener API
• Expanding URLs using cURL
• Expand URLs using file_get_contents

Yesterday I wrote this post explaining how short goo.gl URLs can be expanded using the newly launched goo.gl API. In that code we used php function get_file_contents to get the response from API.

How about implementing the same functionality using cURL now? If you have libcurl support installed with PHP, you are ready to use the cURL functions of PHP.

Here is the code. API key is not mandatory but Google recommends that you use one. It will increase your per day usage limits too. Follow this link to get an API key.

$shortUrl = 'http://goo.gl/WlFX';
$apiKey = 'your_api_key_here';

$curlObj = curl_init();

curl_setopt($curlObj, CURLOPT_URL, 'https://www.googleapis.com/urlshortener/v1/url?shortUrl='.$shortUrl.'&key='.$apiKey);
curl_setopt($curlObj, CURLOPT_HEADER, 0);
curl_setopt($curlObj, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curlObj, CURLOPT_SSL_VERIFYPEER, 0);

$response = curl_exec($curlObj);

curl_close($curlObj);
$json = json_decode($response);

if($json->status === "OK")
{
	echo $json->longUrl;
}
else
{
	echo 'Bad luck.';
}

And here is the full JSON response:

{
 "kind": "urlshortener#url",
 "id": "http://goo.gl/WlFX",
 "longUrl": "https://www.packtpub.com/php-jquery-cookbook-to-create-interactive-web-applications/book",
 "status": "OK"
}

Am important point to note. Since the API is on https, set the value for CURLOPT_SSL_VERIFYPEER to false. This will stop cURL from verifying the SSL certificate.

Yesterday. google launched an API for its URL shortening service http://goo.gl. Using this API developers will be able to expand/shorten URLs and get a user’s analytics and history programmaticaly.

Below is a small snippet of PHP code that expands a short URL. The response comes in JSON format, so we will use the json_decode function to convert it to object.

$shortUrl = 'http://goo.gl/WlFX';
$response = file_get_contents('https://www.googleapis.com/urlshortener/v1/url?shortUrl='.$shortUrl);
$json = json_decode($response);

if($json->status === "OK")
{
	echo $json->longUrl;
}
else
{
	echo 'Bad luck.';
}

Here is the full successfull response in JSON format.

{
 "kind": "urlshortener#url",
 "id": "http://goo.gl/WlFX",
 "longUrl": "https://www.packtpub.com/php-jquery-cookbook-to-create-interactive-web-applications/book",
 "status": "OK"
}

Finally, note that Google recommends the use of an API key. You can visit this link to read more about key and get a key from this link.

After using the key, your URL will look like the following:

$shortUrl = 'http://goo.gl/WlFX';
$apiKey = 'your_key_here';
$response = file_get_contents('https://www.googleapis.com/urlshortener/v1/url?shortUrl='.$shortUrl.'&key='.$apiKey);

Google has created a new interactive book called “20 things I learned about browsers and the web“. It has 20 small chapters each answering a topic related to web like browsers, html, privacy, security etc.

This book itself has been created in HTML 5 and has both mouse and keyboard navigation enabled. Moreover, after it loads once, you can read it offline.

Written by the chrome team and with beautiful illustrations by Christoph Niemann,this book is a delight to read. Its language is very simple and catchy and users without any technical background can also read it without worrying about technical jargons.

You can read the book at http://www.20thingsilearned.com/. For the lazy below are direct links for chapters.

Internet
Cloud Computing
Web Apps
HTML, JS, CSS and more
HTML5
3d in a Browser
A browser madrigal or old vs modern browsers
Plug-ins
Browser Extensions
Synchronizing the Browser
Cookies
Browsers and Privacy
Malware, Phishing and Security Risks
How modern browsers protect you from malware and phishing
Using web addresses to stay safe
IP addresses and DNS
Validating identities online
Evolving to a faster web
Open Source and browsers
Conclusion: 19 things later

Normally google maps js api is loaded at the time of page load via a script tag with src set. If map is not so major feature of your application or you want to reduce page download time, you can defer loading the javascript load it when required.
This is a javascript pattern called On demand javascript.

Bottomline is: “JavaScript being pulled from the server after the page has loaded“.

Google maps provide the facility to dynamically load the api when required.  So no need to load it at the time of page load. I will present an example here which will load the maps api on click of a button. Here is how to do it.

As said above, DO NOT load any javascript api from Google using script tags. Instead we will use a button.

To load the api onclick of this button, create a script tag, set its src and append it to document. This will load the Google AJAX API required to load other google APIs.

function loadAPI()
{
    var script = document.createElement("script");
    script.src = "http://www.google.com/jsapi?key=YOUR_API_KEY_HERE&callback=loadMaps";
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
}

Do not forget to replace the API key above with your API key. (You can get an API key by signing up here)

Important: Note the callback=loadMaps in script.src. This is the thing doing all the magic. It tells which function to call when AJAX API has loaded. In above case it will call loadMaps function. So, let us define that.

function loadMaps()
{
    //AJAX API is loaded successfully. Now lets load the maps api
    google.load("maps", "2", {"callback" : mapLoaded});
}

loadMaps function uses load method of google AJAX API to load a specific api. Above we loaded “maps” version “2″. Again callback is the name of function that will be called when maps api is loaded. callback function will be called only when the maps api is loaded successfully.

function mapLoaded()
{
    //here you can be sure that maps api has loaded
    //and you can now proceed to render the map on page
    if (GBrowserIsCompatible())
    {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setMapType(G_SATELLITE_MAP);
        map.setCenter(new GLatLng(28.631466106808542, 77.07853317260742), 5);
    }
}

That is all to it. I have created a demo along these lines. View source for code. You can see it here.

It was International Translation Day on 30th September and Google gifted users a new version of their website translator gadget.

From usability point of view this version is far more better then previous one and supports 51 languages. Earlier version of this gadget was a bit ugly in the manner it worked. It used to load the entire page in an iFrame which appeared like a full page reload every time user changed the language. It seems that the new gadget translates the page of text asynchronously. There is a progress indicator too which shows percentage of translation done. It is certainly faster then previous version.

There is one more feature to it. According to google if the language of a users browser visiting your page is different than the language of your page, they will be prompted to automatically translate the page in their language.

To use the gadget in your website just visit google at http://translate.google.com/translate_tools and follow these 3 steps:

• Select the language of your website.
• Select languages in which you want the translation.
• Copy the generated code in your webpages and you are ready to go.

Although the translation is not 100% correct, it is a great help to read and understand text of foreign languages.

Bookmarklets have become common over the internet nowadays. They are helpful too. Bookmarklets are like small tools for specific purposes.

They are relatively new things for me. But I found them pretty useful.

Wiktionary defines bookmarklets as “A small piece of JavaScript code stored as a URL within a bookmark.”
Users can drag this piece of code onto their browser toolbars. After that bookmarklet is ready to use. Just click on it from the toolbar when you are on a webpage.

Bookmarklets are supposed to do one click functions. I thought why not create some. Though I created several to experiment, only 2 of those are worth sharing(At least I think so). Others perform weird functions like disabling css of a page, making all images on the page invisible etc etc. If you want code for these also, just drop a message below.

Here is the first one that searches flickr for any term you select on any web page. If you do not select any text, it will prompt you for keyword.(Nonsense??? I know that). Slight modification can make it google search or dictionary search or whatever search you wish.

Search Flickr

The second one is slightly more useful.
Just click it and it will create tinyURL of that page you are visiting. You can then post it to twitter or share with friends(Cool, isn’t it).

Create TinyURL

Why wait now, Drag these to your browsers toolbar and have fun.

Give this  article a Thumbs-up on Stumbleupon if you liked it.

Google has been adding various new features like superstars, mouse gestures etc to gmail via gmail labs. Recent addition in this series are To-do lists and SMS facility. To-do lists which are called tasks in gmail were added on Monday.

Tasks allow you to create to-do lists and manage them. Since to-do lists are used widely by users, no doubt tasks will be a success. Add to this the fact that generally average users keep their mail window open all of the time while surfing the web.

To use tasks, enable them through Settings->labs->tasks.

After that a link for tasks will appear below the Contacts link. Clicking it will open a window on the right similar to the chat window. On bottom right there is a menu for adding new tasks and on left another menu for arranging task items. There is also a switch list menu at extreme right on bottom which lets you switch among lists and create/delete new lists.

Keyboard shortcuts like Ctrl+Up and Ctrl+Down can be used to move tasks up/down in the list. Shift+Up and Shift+Down can be used to toggle details of a task where you can enter its due date as well as notes.
Also remember that labs feature is only available with Internet Explorer 7.0+, Firefox 2.0+, Safari 3.0+, and Google Chrome currently. So, hard luck IE6 users.

Another labs feature is SMS facility from right inside gmail. Enable it from Settings->labs->Text Messaging (SMS) in Chat. To send an SMS just fill the phone number in the Search/Invite text box of chat window and click “Send SMS”. This feature is currently available for US phones only. I am eagerly waiting for this to be launched in India.

You love gmail. Don’t you. Having so much cool features within one application is great. Now you will love it even more. Today Google is launching voice and video chat within gmail. You will now be able to talk with your friends or video chat right from gmail chat window.

Remember earlier times when you used to have one application for mail, another IM if you want to chat and even another application if you want voice or video chat. Now all of these are under a single umbrella gmail. And the best part : ITS FREE.

To enable this feature, all you have to do is install a small plugin from http://mail.google.com/videochat ,restart your browser and you are all set.

To make use of voice/video chat feature open the chat window. Now select “Video & more” at the bottom and select “Start voice chat or “Start video chat”. It will prompt other person to accept or reject your call. Once its accepted , chat happily.

Do have a look at this video Gmail voice and video chat.It will be available globally from today onwards.

Google rocks. What do you say?