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);

In this article I will show you how you can display your (or any other user’s) recent tweets with some jQuery magic. We will create a widget (sort of) that will fetch n number of latest tweets from public timeline of a user using Twitter API and then we will display them in a nice list.

End result will look like the following.

Have a look at a live example.

Let us start creating it now. First write some HTML. Define some css styles in the head section which will control the display of list. In the body section, there is a select box with id layout which will be used to select either a wide or a narrow layout for displaying the tweets. Then create a div with id tweets. We will create a ul inside this div which will have tweets as list items.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Latest Tweets Widget - Vijay Joshi | http://vijayjoshi.org</title>
		<style type="text/css">
			body{ margin:0;font-family:verdana,arial;font-size:13px;width:100%;}
			p{margin:0;padding:5px;}
			span{font-size: 10px; font-weight: bold;}
			#container{margin:0 auto;padding:5px;width:600px;}
			#tweets{background-color:#ACAAFC;}
			#tweets ul, li{list-style:none;margin:0;padding:5px;}
			#tweets h2{margin: 0pt; padding:5px;}
			#tweets a { color: #FF0000;}
			.even{ border-bottom: 1px dotted #000;color:#343234;background-color:#FCFEFC;}
			.odd{border-bottom: 1px dotted #000;color:#343234;background-color:#DCDEFC;}
			.clear{	clear:both;	}
		</style>
	</head>
	<body>
		<div id="container">
			<strong>Select layout</strong>
			<select id="layout">
				<option value="600">Wide</option>
				<option value="300">Narrow</option>
			</select>
			<div class="clear"> </div>
			<div id="tweets"></div>
		</div>
	</body>
</html>

jQuery Code

Just before the body tag closes, add path to jQuery library either from your local file system or the Google CDN.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

With this we are ready to pull the tweets. Start by defining 2 variables userName and count. Inside document.ready add a change event handler to select box with id layout. It will change its width from 600px to 300px on selecting narrow and again back to 600px on selecting wide.

Now call a function getTweets and pass user name and number of tweets to it.

var userName = 'v08i';
var count = 8;
$(document).ready(function()
{
	$('#layout').change(function()
	{
		$('#container').css({ 'width' : $(this).val()+ 'px'});
	});
	getTweets(userName, count);

});

getTweets function will actually contact the Twitter API and will fetch tweets from there. We will request the response in JSON format from Twitter using jQuery’s getJSON method.

Before we proceed let us talk a bit technical. As you probably know, browsers do not allow cross-domain ajax requests due to security reasons. In this case the example we are creating is at domain vijayjoshi.org while the twitter domain is api.twitter.com. If both domains were same, a simple AJAX request would have sufficed. To overcome this problem JSONP aka “JSON with Padding” is used.

To use JSONP with jQuery, just change the dataType parameter from json to jsonp. Now you do not have to worry about cross domain restriction or anything else. Just define a callback function (showTweets in this example) and you will receive the JSON response there.

function getTweets(userName, count)
{
	$.getJSON(
		'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + userName + '&count='+ count +'&callback=?',
		{},
		showTweets,
		'jsonp'
	);
}

Now that we have the response, define showTweets function, iterate in the results and display them. Here is how.

function showTweets(tweets)
{
	var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
	var str = '<ul>';
	str+= '<h2>Recent Tweets from ' + userName +'</h2>';
	var i = 0;
	$.each(tweets, function(index,value)
	{
		if(i == count)	return;
		var dt = new Date(value.created_at);
		str+= '<li><p>';
		str+= value.text;
		str+= '</p>';
		str+='<span>';
		str+= dt.getDate() + '-' + months[dt.getMonth()] + '-' + dt.getFullYear();
		str+= ' at ' + dt.getHours() + ':' +dt.getMinutes();
		str+= ' From ' + value.source;
		str+= '</span></li>';
		i++;
	});
	str+= '</ul>';
	$('#tweets').html(str);
	$('#tweets > ul > li:odd').addClass('odd');
	$('#tweets > ul > li:even').addClass('even');
}

I have used only some of the values from the JSON response. You can view the full response by typing the following into your browser.

http://api.twitter.com/1/statuses/user_timeline.json?screen_name=your_twitter_username&count=10

With this we are done. Have a look at the demo I have created.

For full source code, just view page source. It’s all happening on your browser after all.

If you have any questions, let me know in comments.

Here is one more sample chapter from my book. It explains reading, writing and editing XML files with PHP and jQuery. Below are the chapter contents.

• Loading XML from files and strings using SimpleXML
• Accessing elements and attributes using SimpleXML
• Searching elements using XPath
• Reading an XML using DOM extension
• Creating an XML using DOM extension
• Modifying an XML using DOM extension
• Parsing XML with jQuery

To read the full chapter follow this link - https://www.packtpub.com/article/working-with-xml-documents

You can also read the chapter on using JSON with PHP and jQuery.

I mentioned in a previous post that I was writing a book on PHP and jQuery. Well, after a labor of around 7 months the book is out now. It is available on Packt website as well as Amazon.

Meanwhile, to help you make a decision, a sample chapter from the book is available on Packt website. The chapter is Working with JSON in PHP and jQuery and it contains 4 articles that explain creating, reading and writing JSON in PHP as well as jQuery.

Below are the topics that this chapter covers:

• Creating JSON in PHP
• Reading JSON in PHP
• Catching JSON parsing errors
• Accessing data from a JSON in jQuery

To read the full chapter, just follow this link http://www.packtpub.com/article/working-json-php-jquery

JSON(Javascript Object Notation) is defined as a lightweight data interchange format and fat-free lightweight alternative to xml. Since json is the native data form of Javascript, it can be used on the browser more easily then XML.

If you are a web developer who works with javascript/ajax a lot and still wondering what this json thing is, here is the first step to start with. Read this post about json and its uses.

Below is a list of 5 resources from where you can learn about json in detail.

1- json.org

First place to go to find definitive information. Douglas crockford is the man who invented json. json.org is a one stop place for everything json.

2- Mastering JSON

Detailed examples as well as retrieving and sending json data between browser and server. You cam also find tips on security and best practices.

3- JSON vs XML debate

Arguments are going on between which is better to use as a data format. Go read and judge yourself.

4- JSON with Ajax and PHP[video]

5- Slide on JSON

Recently JSON has become a very popular data interchange format with more and more developers and a large number of big players in the web arena opting for it over XML.  In this article we will explore what json is all about and how we can use it. We will proceed in the following manner:

• Definition, Characteristics and Structure of json

• Example

• Parsing json text

• Reading values from json

Let’s go through each of these one by one.

Definition, Characteristics and Structure of json

JSON which stands for JavaScript Object Notation can be defined as a lightweight data interchange format. It is also said a fat-free lightweight alternative to xml. It is a text format which is programming language independent and is native data form of JavaScript. It is lighter and faster than xml. The credit to make json popular goes to Douglas Crockford.

Since JSON is the native data form of JavaScript, it can be used on the client side in an Ajax application more easily then XML. Implementations of JSON has been done in most of the languages (check here) we will stick to javascript as of now.

A JSON object starts with { and ends with }.  In between you can have key value pairs which are enclosed with double quotes (“) and separated by a colon (:).

Keys are simple strings and values can be either array, string, number or Boolean. Values enclosed between { and } are objects and those between [ and ] are arrays.

Example

A JSON can be as simple as

{
“name”:”name1”, “age”:”25”, ”address”: "anywhere"
}

Example 1
An example using arrays

{
"name": "name1", "age":"25", "phoneNumbers": ["9999123456", "9999678900","1234567890" ]
}

Example 2
A more complex example which has values in objects and objects are array elements.

{
"results":
 {
   "students":
   [
     {
      "id" : "1",
      "name": "Ramu"
     },
     {
      "id": "2",
      "name": "Shyamu"
     },
     {
      "id" : "3",
      "name": "Damu"
     }
   ]
 }
}

Example 3

Those familiar with JavaScript will see that syntax is same we use while declaring objects in JavaScript.In the above example we have a json where results is the key and its value is an object.

The value for results again contains an object which has the value students. The value of students is an array ( note the [ ). This array contains 3 values which are again objects. The first one is

{
      "id" : "1",
      "name": "Ramu",
}

This object has 2 keys, id and name. The value for key id is 1 and the value for key name is Ramu.

Parsing json text

Now suppose you received a json string as responseText in an Ajax application. You will now want to read the values that this structure has brought with it and use them in your application. But wait  - there is one more step in between and that is parsing of this text.

Why do I have to parse it ??

Since JSON is a text format, we will have to parse it to a format that JavaScript can recognize and read upon. We can use eval to parse it.

var myJsonObject = eval( ' ( ' + JsonString + ' ) ' );

This will convert the string JsonString to a javascript object. Now you have an object available in javascript. You are free to do whatever with its values.

One word of caution. Use of eval is not recommended since eval is considered evil. This is because eval can execute any javascript code that is passed to it. So better use a JSON parser. It will make sure that the json string passed to it is thoroughly checked and scripts are rejected. I personally use json.js ( now json2) by Douglas Crockford.

var myJsonObject = JsonString.parseJSON();

Reading values from json

After a json string is successfully parsed, you can use it like a normal javascript variable. Here we will try to read values from the structure in example 3. This structure holds the records of 3 students.

Suppose we have the parsed object in variable studentRecords.

studentRecords.results will give an object. studentRecords.results.students will give the array that has 3 records. Now we can iterate over this array and get values.

var rec = studentRecords.results.students;
for(var i=0; i<rec.length; i++)
{
   var aStudent = rec[i];
   alert(aStudent.id);
   alert(aStudent.name);
}

With this we come to the end of this article. If you have any queries or suggestions, do tell me.

You can see a complete working example with the json string of example 3 here.

--