bari's blog » jQuery

Parse Twitter search atom feed using PHP and jQuery

Bari — Tue, 19 May 2009 12:34:30 +0000

Many of us have twitter accounts and we all know twitter has an excellent search feature. Hundreds and thousands of tweeple are tweeting various topics every moment. Twitter gives us the facility to search in those tweets from outside using Search API’s search method. This method returns the results in 2 formats – json and atom. I will show how to parse the atom format of search results using PHP and how to display them using jQuery in this post.

Parsing the Atom feed

Lets take a look at a search feed’s source file :



  tag:search.twitter.com,2005:search/twitter
  
  
  twitter - Twitter Search
  
  
  adjusted since_id, it was older than allowedsince_id removed for pagination.
  2009-05-20T03:54:29Z
  15
  en
  
  
    tag:search.twitter.com,2005:1855677271
    2009-05-20T03:54:29Z
    
    Respond to tgis twitter with a challenge u want to see accomplished in the next video!
www.youtube.com/fitzner123
    Respond to tgis twitter with a challenge u want to see accomplished in the next video!

www.youtube.com/fitzner123
    2009-05-20T03:54:29Z
    
    TwitterFon
    en
    
      nihongotako (Fitzner123)
      http://twitter.com/nihongotako
    
  

...................................
other results are truncated
..................................

As we can see, its an XML file. Every search result is inside an entry tag. We have to parse contents of the tags inside those entry tags. I used PHP’s curl and simplexml_load_file to load and parse the atom feed (of search results for “twitter”). Here is the file that does the works : search.php


echo "";

//loop through all the entry(s) in the feed
for($i=0;$ientry);$i++)
{

	//get the id from entry
	$id = $xml->entry[$i]->id;

	//explode the $id by ":"
	$id_parts = explode(":",$id);

	//the last part is the tweet id
	$tweet_id = array_pop($id_parts);

	//get the account link
	$account_link = $xml->entry[$i]->author->uri;

	//get the image link
	$image_link = $xml->entry[$i]->link[1]->attributes()->href;

	//get name from entry and trim the last ")"
	$name = trim($xml->entry[$i]->author->name, ")");

	//explode $name by the rest "(" inside it
	$name_parts = explode("(", $name);

	//get the real name of user from the last part
	$real_name = trim(array_pop($name_parts));

	//the rest part is the screen name
	$screen_name = trim(array_pop($name_parts));

	//get the published time, replace T and Z with " " and trim the last " "
	$published_time = trim(str_replace(array("T","Z")," ",$xml->entry[$i]->published));

	//get the status link
	$status_link = $xml->entry[$i]->link[0]->attributes()->href;

	//get the tweet
	$tweet = $xml->entry[$i]->content;

	//remove  and  from the tweet. If you want to show bold keyword then you can comment this line
	$tweet = str_replace(array("", ""), "", $tweet);

	//get the source link
	$source = $xml->entry[$i]->source;

	//the result div that holds the information
	echo '
			
			
				
					'.$screen_name.' '. $tweet .'
				
				
					'. $real_name .' at '. $published_time .' via '. $source .'
				
			
		';
}

echo "";

?>

When I parsed the XML feed into object using simplexml_load_file first time, I found its not loading the contents of twitter:source and twitter:lang tags.

web
en

So, I removed twitter: from these tag names :

//remove "twitter:" from the $response string
$response = str_replace("twitter:", "", $response);

That means these tags now became :

web
en

Now simplexml_load_file nicely parsed them.

These are the other extra works I did after parsing some useful data from each entry :

This is the id inside every entry:

tag:search.twitter.com,2005:1846263500

We just need 1846263500 from it.

//get the id from entry
$id = $xml->entry[$i]->id;

//explode the $id by ":"
$id_parts = explode(":",$id);

//the last part is the tweet id
$tweet_id = array_pop($id_parts);

The content of name tag is processed to separate real name and screen name :

bauerbauerbauer (Danny Bauer)

in this part :

//get name from entry and trim the last ")"
$name = trim($xml->entry[$i]->author->name, ")");

//explode $name by the rest "(" inside it
$name_parts = explode("(", $name);

//get the real name of user from the last part
$real_name = trim(array_pop($name_parts));

//the rest part is the screen name
$screen_name = trim(array_pop($name_parts));

The published tag contains time of this tweet was published :

2009-05-19T11:32:11Z

it is processed here to remove the T and Z from it :

//get the published time, replace T and Z with " " and trim the last " "
$published_time = trim(str_replace(array("T","Z")," ",$xml->entry[$i]->published));

I will describe the output part later.

The display page index.php

This is the simple page to display the search results – index.php



	Twitter Search
	
	
	


	
		Search Results for "Twitter"

This page acts as the client side page for AJAX. It sends request to search.php and displays response result in the #twitter-update div.

The AJAX part using jQuery – search.js

We saw that search.php was used to manage the search atom feed and it will act as the server side page. This is the javascript file from where we will send request to search.php and process the response – search.js :

function loadSearch()
{
	//show message when the feed is loading
	$("#update-alert").text("Loading new results...");

	//ajax request to get the results from search.php
	$.ajax({
			url : "search.php",
			success : function(results){

			//counter to count new results
			var counter = 0;

			//find each 'div' with class 'result'  from the response and loop through them
			$(results).find("div.result").each(function(i){

				//get the id of the div
				var div_id = $(this).attr("id");

				//check if any div with the same id already exists
				if( $("#twitter-update div#" + div_id).length == 0 )
				{
					//if doesn't exist then prepend this div
					$("#twitter-update").prepend(this);

					//increase the counter
					counter++;
				}
			});

			//show the number of new results
			if(counter == 0)
				$("#update-alert").text("no new result");
			else if(counter == 1)
				$("#update-alert").text("1 new result");
			else
				$("#update-alert").text(counter + " new results");
   		}
	});

}

$(document).ready(function(){
	loadSearch();
	setInterval("loadSearch()",30000);
});

loadSearch() is the main thing here. This function mainly does all the works related to AJAX and display. This function is called first time when the page is loaded and after then its called every 30 seconds. Now lets see the response that is sent from search.php :

//wrapping the whole output with 
echo "";

//loop through all the entry(s) in the feed
for($i=0;$ientry);$i++)
{
.....................................................
other codes are truncated
.....................................................

	//the result div that holds the information
	echo '
			
			
				
					'.$screen_name.' '. $tweet .'
				
				
					'. $real_name .' at '. $published_time .' via '. $source .'
				
			
		';
}

echo "";

When I first made this part it was not wrapped with any tag like results. There were only the .result divs and I simply populated the #twitter-update div with the response. But for many keywords twitter search atom feed does not change that much within 30 seconds. Search API’s search method sends 15 results every time (you can load more results by adding extra parameters in the feed request URL) and in case of a slow feed it is not a new set of 15 results every 30 seconds, may be 2-3 new results and 12-13 old results which are already loaded in the #twitter-update div. So, I had to find a way to handle these duplicate entries. I added $tweet_id as id in the .result divs. So, every .result div got a unique id.

echo '

And also I wrapped all .result divs with results tag :

echo "";
.........................
15 .result divs each having unique id
.........................
echo "";

So, now the whole response will act as XML and it can be handled with jQuery. Here is the part that does the trick :

//find each 'div' with class 'result'  from the response and loop through them
$(results).find("div.result").each(function(i){

	//get the id of the div
	var div_id = $(this).attr("id");

	//check if any div with the same id already exists
	if( $("#twitter-update div#" + div_id).length == 0 )
	{
		//if doesn't exist then prepend this div
		$("#twitter-update").prepend(this);

		//increase the counter
		counter++;
	}
});

As you can see, this part finds every .result div from the response XML (results) and loops though them. Then it gets id of the div and finds if the #twitter-update div already has any div with that id. If it does not find any .result div with that id then it prepends that new .result div inside #twitter-update. Unfortunately, this part won’t work in IE. IE won’t let you parse the response XML! Good news is that all the other browsers are very friendly with this part and they will behave very well!

The #update-alert div shows “Loading new results…” and messages based on number of new search results (counter).

//show message when the feed is loading
$("#update-alert").text("Loading new results...");
.........................................................
.........................................................

//show the number of new results
if(counter == 0)
	$("#update-alert").text("no new result");
else if(counter == 1)
	$("#update-alert").text("1 new result");
else
	$("#update-alert").text(counter + " new results");

CSS Stylesheet – style.css

I added a simple stylesheet to beautify the search results in index.php. You can check this file from here.

Download the source files

Well, that’s all. I hope you enjoyed it. I will be grateful if anyone comes up with a working solution for the IE problem. I am waiting for your comments.

Create an Event calendar using PHP and jQuery

Bari — Tue, 05 May 2009 11:01:40 +0000

When I first saw this cool astonishing iCal-like calendars with jQuery by Stefano Verna I became a fan of it. Its a great looking calendar. But it is static, if you want to show another month or want to change the current date you have to change the html code inside. So, I thought it would be great if I can make this calendar dynamic using PHP & MySQL. So, here is my attempt to make this great thing more useful.

MySQL table creation

First of all we have to create a new table named ‘eventcal’ in MySQL. We can create a new database to contain this new table or can use any exisiting database. Here is the SQL code :


CREATE TABLE eventcal (
id int(10) unsigned NOT NULL auto_increment,
eventDate date,
eventTitle varchar(100),
eventContent text,
PRIMARY KEY  (id)
)

Add New Event Area

Now we will make a simple panel to add new events to the ‘eventcal’ table in MySQL.

For this part we will use Keith Wood’s jQuery Datepicker plugin.

Here is the source code of the page to add new events – addevents.php:




Add New Events






	
	
		
			
				Add a New Event
			
		
		
			Date : 
			
		
		
			Event Title : 
			
		
		
			Event Details : 
			
		
		
			
		
	
	
alert("'.$alert.'");';
}
?>

I configured the date format of the datepicker plugin to match the MySQL date data type.


$('#date').datepick({dateFormat: 'yy-mm-dd'});

MySQL date data type stores date in YYYY-MM-DD format (2009-04-05).

The Calendar

We came to the last part, generate the dynamic calendar. I did some little changes to the original calendar made by Stefano Verna – removed the weekdays from the tfoot and added links for month navigation, changed the popup position in coda.js ( mainly to handle the problem of popups hiding in the top for first days of the month ) and added a little bit of css in the master.css for the month navigation links in tfoot.

Here is the source code of the calendar page calendar.php

 and . We will add them inside  in later part
	$events[intval($row_event->day)] .= ''.stripslashes($row_event->eventTitle).''.stripslashes($row_event->eventContent).'';
}

$first_day_of_month = mktime(0,0,0,$current_month,1,$current_year);

//geting Numeric representation for the first day of the month. 0 (for Sunday) through 6 (for Saturday).
$first_w_of_month = date("w", $first_day_of_month);

//calculate how many rows will be in the calendar to show the dates
$total_rows = ceil(($total_days_of_current_month + $first_w_of_month)/7);

//trick to show empty cell in the first row if the month doesn't start from Sunday
$day = -$first_w_of_month;

$next_month = mktime(0,0,0,$current_month+1,1,$current_year);
$next_month_text = date("F \'y", $next_month);

$previous_month = mktime(0,0,0,$current_month-1,1,$current_year);
$previous_month_text = date("F \'y", $previous_month);

$next_year = mktime(0,0,0,$current_month,1,$current_year+1);
$next_year_text = date("F \'y", $next_year);

$previous_year = mktime(0,0,0,$current_month,1,$current_year-1);
$previous_year_text = date("F \'y", $previous_year);
?>



<?=$current_month_text?>





	
	0 && $day<=$total_days_of_current_month)
					{
						//YYYY-MM-DD date format
						$date_form = "$current_year/$current_month/$day";

						echo ' and close it
							echo ' class="date_has_event"> '.$day;

							//adding the eventTitle and eventContent wrapped with  and  to 
							echo ''.$events[$day].'';
						}
						else
						{
							//if there is not event on that date then just close the ";
					}
					else
					{
						//showing empty cells in the first and last row
						echo '';
					}
				}
				echo "";
			}

			?>
		
		
		
			Sun
			Mon
			Tue
			Wed
			Thu
			Fri
			Sat
		
		
		
			 tag
							echo '> '.$day;
						}

						echo "  

		

			
				««
			
			
				«
			
			 
			 
			 
			
				»
			
			
				»»

Sun	Mon	Tue	Wed	Thu	Fri	Sat
tag echo '> '.$day; } echo "
««	«				»	»»

You can see the changes in tfoot from the source code.

This is the change I did in coda.js

popup.css({
		top: 20,
		left: -76,
		display: 'block' // brings the popup back in to view
	})

I just changed the bottom:20 from the code original to top:20.

This is the extra snippet of CSS I added to the original master.css for month navigation links.


th a{
text-decoration:none;
font-size:120%;
font-weight:bold;
color: #000;
outline-width:0;
}

Harish Chauhan’s Calendar Events Class on phpclasses.org helped me a lot. Thanks to him.

View the online demo (only the calendar)

Download the source files

Well, that’s all. This is the first blog post of my life. I hope you enjoyed it.