We have added an article ticker on the school’s website that shows the latest posts from our blog site. jQuery tickers are always a plus if you’re promoting your blog.

Brent Review Ticker

Brent Review Ticker

On this tutorial, I will show you how to create a horizontally scrolling news/article ticker that will load content from a feed. I’m assuming that you are a website admin and has control/access on your host (ftp or ssh).

To be able to load feeds from our blog site, we’ll use SimplePie. It’s a free code library that you can download from here. After downloading and unzipping SimplePie, create server-writable “php” and “cache” folders on your web host’s root directory (where your index or home page is located). Upload “simplepie.inc” to the “php” folder you created. Edit your home page and add these lines before the DocType declaration:

<?php
require_once(‘path/to/simplepie.inc’);
$feed = new SimplePie();
$feed->set_feed_url(‘http://website.url/feed/&#8217;);
$feed->init();
$feed->handle_content_type();
?>

Create a div that will contain your feed and add these lines that will fetch the article titles.

<!– some codes here –>
<div>
<?php foreach ($feed->get_items() as $item) : ?>
<a target=“_blank” href=“<?php echo $item->get_permalink(); ?>“><?php echo $item->get_title(); ?></a>
<?php endforeach; ?>
</div>
<!– more codes here –> 

Save your index page as a php file (index.php). Once you open your index page, you should be able to see your article titles.

We’ll now download two files from the liScroll website – jquery.li-scroller.1.0.js and li-scroller.css. Upload the files to their respective directories (usually js and css) and add these lines inside your index page’s head tag:

<head>
<!– other codes here –>
<link href=“css/li-scroller.css” rel=“stylesheet” type=“text/css” media=“screen” /> 
<script type=“text/javascript” src=“js/jquery.li-scroller.1.0.js”></script> 

<script type=“text/javascript”>
$(function(){
$(“ul#ticker01”).liScroll({travelocity:0.1});
});
</script>
</head> 

The first two lines pointed where our jQuery code and css files are contained. The chunk of code after that called the liScroll() function. “Travelocity” specifies the scrolling speed. And finally, we’ll wrap our feeds inside an unordered list tag and add “ticker01” id. 

<!– some codes here –>
<div>
<ul id=“ticker01”>
<?php foreach ($feed->get_items() as $item) : ?>
<li><a target=“_blank” href=“<?php echo $item->get_permalink(); ?>“><?php echo $item->get_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div> 

This will create a list of your feeds and liScroll will do its task of scrolling them horizontally. liScroll works with jQuery 1.4+.

Update

You may download the source files (feedticker_src.zip) from here. Unzip the file and upload them on your personal/test server (WAMP, MAMP, XAMPP, etc) and open index.php using your browser.