How To: Roll your own News Ticker with YQL, XML, and jQuery

The boss wanted me to find a news ticker to put on the homepage of our community portal, buzzmontgomery.com.

So the search was on to find a “widget” from Fox News and CNN. No luck, well, no luck in the sense that their “widgets” didn’t fit my needs – in particular I needed something 930 pixels wide and 40 pixels tall.

So, I decided to teach myself how to use YQL (Yahoo! Query Language), so I could have access to “the worlds” database.

Here are some quick facts:

• YQL is huge, it powers mega-sites/platforms like Zillow and Yelp
• The Open Data Tables is made up of thousands of web sites sharing their data
• YQL has the ability to export this data into both XML and JSON
• PHP5 has a SimpleXML parser built in

With this knowledge I put my head down and started coding. Here I’ll show you how to create your own “ticker” using SimpleXML, YQL, jQuery, and CSS.

Step 1: Finding the data

We need to visit the YQL Console and run a query using a statement. For demonstration purposes, I’ll run a query to select the titles and links from an RSS feed.

select title,link from rss where url="http://rss.news.yahoo.com/rss/topstories"

The console

Un-check, “Diagnostics” and push “Test”.

After running the query, here is the URL we'll use in a minute

The result is a URL (aka REST query) we can use in our code (more on that in a second).

What just happened? Running this query will render an XML v1.0 formatted file via  URL – no downloading, plus it’s totally dynamic and auto-updates the contents based on the RSS feed. (amazing huh?)

The results in XML format

Step 2: Grab the data

This is easy since PHP 5+ has a built in xml reader, called SimpleXML. If you look at the code below you’ll see:

$requestAddress = "http://query.yahooapis.com/v1/public/yql?q=select%20title%2Clink%20from%20rss%20where%20url%3D%22http%3A%2F%2Frss.news.yahoo.com%2Frss%2Ftopstories%22";

This is URL that the YQL Console gave us as a result of our query. (You can run ANY QUERY you’d like. YQL has many sample queries to try on your own.)

This function below does a few things:

• Grabs XML
• Reads the content
• Parses the XML and turns it into a PHP variable
• Displays the content in a Loop

Add this to custom_functions.php

function news_ticker_html() {
// Grab XML
$requestAddress = "http://query.yahooapis.com/v1/public/yql?q=select%20title%2Clink%20from%20rss%20where%20url%3D%22http%3A%2F%2Frss.news.yahoo.com%2Frss%2Ftopstories%22";
// Read content
$xml_str = file_get_contents($requestAddress,0);
// Create variable
$xml = new SimplexmlElement($xml_str);
// Start displaying content
echo "<div id='news_ticker'><ul id='ticker'>";
// Begin Loop
foreach ($xml->results->item as $items)
 {
 echo "<li><a href=".$items->link[0].">".$items->title[0]."</a></li>";
 }
// End Loop
echo "</ul></div>";
}
// Add to hook
add_action('thesis_hook_before_content', 'news_ticker_html');

What makes XML so cool when mixed with PHP is how easy it is to read and parse thanks to XML tags. Here is a great tutorial on parsing xml with PHP5.

Each one of these <results><item><link><title> is a tag, which are easily extracted

Step 3: Install the jQuery

liScroll is a very simple, lightweight  jQuery script which will take our parsed data and bring it to life. Visit liScroll to download the script and to see more options.

Add this to custom_functions.php

function footer_scripts_html() {
<script type="text/javascript" src="http://yourwebsite.com/ticker-scroller.js"></script>
<script type="text/javascript">
   $(function(){ $("ul#ticker").liScroll(); });
</script>
<?php }
add_action('thesis_hook_after_html', 'footer_scripts_html');

Step 4: Install the CSS

Add this to your custom.css

#news_ticker{display:block;height:41px;width:931px;overflow:hidden;}
.tickercontainer{border:1px solid #000;background:#fff;width:929px;height:27px;overflow:hidden;margin:0;padding:0;}
.tickercontainer .mask{position:relative;left:10px;top:8px;width:900px;overflow:hidden;}
ul.newsticker{position:relative;left:900px;font:bold 10px Verdana;list-style-type:none;margin:0;padding:0;}
ul.newsticker li{float:left;background:#fff;margin:0;padding:0;}
ul.newsticker a{white-space:nowrap;color:red;font:bold 10px Verdana;margin:0 50px 0 0;padding:0;}
ul.newsticker span{margin:0 10px 0 0;}

The result:

See it in action

This is just the tip of the ice burg. By learning how to grab, parse, and display XML data from YQL – you are only limited to the crazy amount of data in the YQL Open Tables Database. Have fun and good luck!

PS – this only works if your server is running PHP5!