PBS SoCaL's Step-by-Step Guide to News Tickers

by Kelsey Savage, PBS Interactive

As the 2012 Election begins to heat up, PBS SoCaL wanted to explore how they could better showcase PBS NewsHour content. They were already promoting streaming of NewsHour live on their website, but were aiming to create better publicity on their homepage. Their online team decided to create a news ticker that features PBS NewsHour headlines, as well as local weather updates.

Jasmine Bulin, Senior Manager of Interactive Media at PBS SoCaL and former PBS Interactive New Media Editor, created the news ticker and says “the code is pretty simple and can be duplicated on just about any websites with some tweaks”. So far, the PBS SoCaL team has noticed that the time spent on their homepage has increased and it took her just a little over an hour to implement the ticker.

#Localpbs can download this ticker or something similar to your station’s homepage. Read through Bulin’s step-by-step process, outlined below, for how she included this ticker on her site.

First I downloaded a free scrolling news ticker built in Javascript by Mio Planet. In addition to some code to place on our website there was also a file to download and place on our server.

Once we had the code and the file on our server we followed the Mio Planet instructions to place static text into the ticker. Then we used an RSS feed parser to output the PBS NewsHour Headlines RSS feed to HTML and replace the static text.

We needed the parser to convert the headlines into a single string of text for the ticker to display them properly. We used AJW Feed Parser for ExpressionEngine to do this effortlessly. In the future we would like to use an aggregator that combines and parses multiple feeds so that we can include our local news or other producers in the ticker.

Since the NewsHour Headlines feed does not include weather, we found an easy solution with a Google Weather plug-in for ExpressionEngine. We placed the code for this in front of the code for the RSS feed in the text area of the Mio Planet ticker.

The last thing we included was a conditional statement that will show “Watch PBS NewsHour Live 3pm-4pm PT” with a link to the live stream of PBS NewsHour on our website as the first message of the ticker between 3pm and 4pm PT. Our code specifically leverages ExpressionEngine conditionals but anyone can create conditionals using JavaScript or php.

Bulin did note that PBS SoCaL "used some tools that are specific to ExpressionEngine because these helped us skip several steps but there are identical tools for other CMS solutions like WordPress. There is also documentation and tools not specific to any CMS for converting RSS to html, the Google Weather API, and conditionals.”

Will your station add this to their website? Do you have any questions about how to implement this? Feel free to leave a comment or two.

1 comment:

  1. Use Yahoo Pipes to combine multiple RSS feeds and then have your ticker read that feed.