Build a MySpace video widget

In this tutorial we’re going to take an RSS feed from the top videos page on MySpace and make a widget to display the latest videos using jQuery pagination, ajax and a spot of PHP to parse the feed. The basic logic of what is going on is simple. We parse an XML file echo all the results, then we use the quick paginate plugin to display a select number of results with the option to browse pages.

Lets first take a look at the PHP page where we use CURL to parse the feed. You’ll need to make sure that your server has PHP5. Right at the top of the code we have the RSS feed source file stored in the variable $file, then the process section of code deals with the CURL request saving the result in the variable $data. We then use the Simple XmlElement to display the specific xml nodes in the right place.

The PHP

	//source
	$file = 'http://mediaservices.myspace.com/services/rss.ashx?fuseaction=vids.charts&RSSAction=VideoCharts';

	//process
	$ch = curl_init($file);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($ch, CURLOPT_HEADER, 0);
	$data = curl_exec($ch);
	curl_close($ch);

	//execute
	try
	{

	$i=0;

		$doc = new SimpleXmlElement($data, LIBXML_NOCDATA);
		function parseRSS($xml) {

			foreach($xml->channel->item as $entry) {
				$namespaces = $entry->getNameSpaces(true);
				$media = $entry->children($namespaces['media']);
				$myspace = $entry->children($namespaces['myspace']);
				$description = $entry->description;

	    $length = strlen($description);

	   if($length > 20){
	   $description = substr($description, 0, 20)."...";
	}

				if($entry->title) {
						if($odd = $i%2){$class='odd';}else{$class='even';}
					echo "<div class='vids ".$class."'>";
					echo '<div class="left"><a class="ms-video" target="_top" href="'.$entry->guid.'"><img width="100" border="0" src="'.$media->thumbnail->attributes()->url.'" alt="'.$entry->title.'" /></a></div>';
					echo '<div class="right"><div class="video-title"><a class="ms-video" target="_top" href="'.$entry->guid.'"><span>'.$media->title.'</span></a></div>';

					echo '<div class="video-description">'.$description.'</div>';
				    echo  $myspace->statistics->attributes()->plays.' Plays</div>';

					echo '<div class="clear"></div>';
						echo "</div>";
				}

					$i++;
			//end foreach
			}

		}

		if(isset($doc->channel->item)) {
			parseRSS($doc);
		} else {
			#no videos;
			exit;
		}
	} catch (Exception $e) {
		echo 'Bad XML file.';
		exit;
	}

The JavaScript

This must be the simplest JavaScript widget I’ve ever written. The basis of this code is to load in the results of an ajax request in to a div then with the help of the quick paginate jQuery plugin.You can see below that you if you want to adjust the number of results on each page just change the 3 to what ever you like.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script src="quickpaginate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

$(document).ready(function(){
$('#content').hide();
$('#content').load('videofeed.php', function(){
	$('#content').fadeIn('slow');
$('.vids').quickpaginate({ perpage: 3, pager : $("#pagination") });
 });
});
</script>

You can use any RSS feed for this widget, you’ll just need to adjust the PHP file to accept a different feed.