Skip to Main Content

Apr 22, 2010 | 9 minute read

Add An RSS or Twitter Feed to Your Product Detail Pages

written by Armando

Want your Twitter feed to show up on your product detail pages? How about adding related videos from YouTube?

Recently, I was shopping on Skateboard.com when I discovered that the site doesn't only offer related products on its product detail pages, but includes related videos and news articles from GrindTV—which makes perfect sense for this retailer's customers.

Screen captures shows the product detail page sidebar on Skateboard.com

In this post, I am going to demonstrate how to use a PHP class called, SimplePie, to parse RSS feeds and place them neatly on a retail site.  Because SimplePie offers almost complete flexibility, it is easy to integrate into nearly any web site design.

Screen capture from the SimplePie web site

Fire Up Your Server

As you may know, PHP is a server-side scripting language, as such, it generally won't run using the local file system on your PC or Mac. This is only a problem during development, since PHP should run just fine on most  servers.

More specifically, you'll need PHP 4.3 or higher, PHP's XML extension, and PHP's PCRE extension.

As you develop with SimplePie, you can either work directly on your server or create a local server like WAMP, which is an Apache, MySQL, and PHP server for Windows; XAMPP, which is for Windows, Linux, Mac OS X, and Solaris; or MAMP for Mac OS X 10.

Screen capture of the WAMP web site

For this project, I am going to need a couple of folders on my server, specifically, lib, which stands for library, and cache. You may need to reset permissions for the cache folder, allowing SimplePie to write to it. In many hosting environments this will mean setting the folder permissions to either 755, 775, or 777.

Download SimplePie

With the development server ready, it's time to download SimplePie. Grab the most recent version of it in either .zip or .tgz format. When you extract the folder contents, you will find several important files for testing your web server's compatibility with SimplePie, and a number of demonstrations, which can be a great way to learn how to work with SimplePie.

The key file, however, is simplepie.inc. Place this file in the lib folder on the web server. By the way, for this article, I used version 1.2.

The PHP and HTML Mark Up

I am going to start with some basic HTML that will provide the framework for adding the feed. In a live site example, you would, of course, add the PHP to an existing page template.

<!doctype html>

<html lang="en">

<head>

<title>Add an RSS feed to Product Detail Pages</title>

<link rel="stylesheet" href="style.css"></head>

<body>

<script src="js.js"></script>

</body>

</html>

This first bit of PHP code will be placed at the very top of the page before the HTML <!doctype html> tag.

<?php

require_once('lib/simplepie.inc'); //include the class

$feed = new SimplePie(); //start an instance

$feed->set_feed_url('http://twitter.com/statuses/user_timeline/23154824.rss'); //name a feed

$feed->init(); //parse the feed

$feed->handle_content_type(); //Set HTTP header and output encoding

?>

As you can see from the code,  I included the simplepie.inc file. Next, I create $feed as a new SimplePie feed. I added the URL for GetElastic's Twitter RSS feed, initiated SimplePie, and used handle_content_type to set the proper page encoding.

SimplePie is now grabbing and parsing the GetElastic Twitter RSS feed, but it doesn't know what to do with it, so I add the following PHP inside the <div> tag in the mark up.

<?php

foreach ($feed->get_items() as $item):

?>

<div class="item">

<h3><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h3>

<p>Posted on <?php echo $item->get_date('F j Y | g:i a'); ?></p>

</div>

<?php endforeach; ?>

The first section of the PHP code establishes a loop, retrieves items from the RSS feed, and temporarily saves each individual item in the loop as $item.

Next, the PHP describes the HTML that should be used with each iteration of $item. Notice, for example  the code:

<h3><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h3>

This PHP creates an <h3> tag around each instance of $item or, put another way, each Twitter tweet. It then uses the get_permalink() method to create a link to that particular tweet. Finally, it uses the get_title() method to find the title of the tweet.

The next portion of the PHP captures the date and time the tweet was posted.

<p>Posted on <?php echo $item->get_date('F j Y | g:i a'); ?></p>

In this example, "F" represents the name of the month, "j" is the day, and "Y" is the four digit year.

Screen capture of the feed as seen in FireFox

So far, I have demonstrated how to grab a feed with SimplePie, but there are still a few things, I want to do like improve performance, include a second feed, and have the feed look a little better.

Cache Feed Content

As we have it coded right now, SimplePie is putting a fair amount of stress on your server and Twitter's notoriously fragile server too. So to boost performance, I am going to take advantage of SimplePie's built in caching feature, which I'll configure to check the server every 15 minutes. This way, I'll decrease the burden on my web server and Twitter's, while causing my pages to load more quickly.

This new PHP code is included at the top of the page.

$feed->enable_cache(true); //enable the cache feature

$feed->set_cache_location('cache'); //describe where the feed is cached

$feed->set_cache_duration(900); //set how long the server should wait in seconds

Here is what the code looks like in context.

<?php

require_once('lib/simplepie.inc'); //include the class

$feed = new SimplePie(); //start an instance

$feed->set_feed_url('http://twitter.com/statuses/user_timeline/23154824.rss'); //name a feed

$feed->enable_cache(true); //enable the cache feature

$feed->set_cache_location('cache'); //describe where the feed is cached

$feed->set_cache_duration(900); //set how long the server should wait in seconds

$feed->init(); //parse the feed

$feed->handle_content_type(); //Set HTTP header and output encoding

?>

Screen capture of the code as seen in Notepad ++

Cleaning Up the Feed Titles

Twitter's feed is a little messy. For example, it includes the Twitter account name at the beginning of the title for each tweet.

Screen capture pointing out the Twitter username at the front of feed items

I am going to use a PHP function called preg_replace to remove this from each title. The additional code is added  within the wrapper div, replacing part of the original loop.

<h3><a href="<?php echo $item->get_permalink(); ?>"><?php $text = ($item->get_title()); $text = preg_replace('/getelastic: /', '', $text); echo $text; ?></a></h3>

Now the Twitter titles start a bit more cleanly.

Screen capture of the feed with the Twitter username removed

But even this is not ideal, since the Twitter feed also includes a URL at the end of each title.

Screen capture showing the URL at the end of the Twitter Posts

To remove both the opening "getelastic:" and the closing URL, I modify the code again, using a slightly more complicated regular expression.

<h3><a href="<?php echo $item->get_permalink(); ?>"><?php $text = ($item->get_title()); $text = preg_replace('/(getelastic: )(.*)( http:\/\/.+)/i', '$2', $text); echo $text; ?></a></h3>

Specifically, for preg_replace() I am using the regular expression:

/(getelastic: )(.*)( http:\/\/.+)/i

Regular expressions can be a bit confusing, so I will try to take it slow. First the "/" is the opening of the expression. You will notice that there are three parenthetical phrases. The first of these is "(getelastic: )," which simply tells the server to watch for this phrase and assign it the variable $1. The next parenthetical phrase is "(.*)," which tells the server to watch for a string of undetermined length and composition and assign it the variable $2. The third phrase, "( http:\/\/.+)," tells the server to watch for a string starting with "http://" followed by some unknown combination of numbers and letters and assign this string the variable $3. Finally the last "/" closes the main portion of the expression and the "i" tells the server not to worry about capitalization.

Next, using the preg_replace, I tell the server to replace the variables $1, $2, $3 with just the $2, eliminating both unwanted portions of the title.  The result is much easier to read.

Screen capture of the feed without the user name or the URL

Adding Another RSS Feed

We now have a readable Twitter feed that you can place on your ecommerce web site. But I want more. I want to be able to parse feeds from more than one social media site and place them in order on my product detail page.

While this might sound complicated, SimplePie, again, makes it easy. I simply need to adjust my PHP code at the top of the page to include the URL for ElasticPath's YouTube Channel RSS feed.

$feed->set_feed_url(array('http://twitter.com/statuses/user_timeline/23154824.rss', 'http://gdata.youtube.com/feeds/base/users/elasticpath/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile')); //name a feed or two

Now SimplePie is combining both the GetElastic Twitter RSS feed and the ElasticPath YouTube Channel RSS feed.

Screen capture show the blended feed

Limit the Number of Items

We are looking good, perhaps, too good. There are too many items to fit nicely into the sidebar of a product detail page, so I am going to use another technique to limit the total number of items to seven.

$items_per_feed = 7; //limit the items to seven

for ($x = 0; $x < $feed->get_item_quantity($items_per_feed); $x++)

{

$first_items[] = $feed->get_item($x);

}

This code belongs at the top of the page, just after :

$feed->init(); //parse the feed

Next, I need to make a minor change to the PHP in the body section of the page.

<?php

foreach ($first_items as $item):

Now our feeds are limited to just seven entries and will fit well in the sidebar of a product detail page, similar to what the folks at Skateboard.com have done.

Time for the CSS

When you use SimplePie, you will certainly want to integrate it into your web site's design. So now  I will add a few lines extra lines of PHP and some CSS as an example.

One of the first things I want to do is identify which items are from Twitter and which items come from YouTube. To do this, I add some PHP to capture the name of the feed. Essentially, I will use get_title() at the feed level rather than at the $item level.

<div>

This bit of code, gets the feed titles and then replaces those titles with a class name, either "youtube" or "twitter."  You can see the class names in the code that the web server output.

Screen capture shows that the server has added the desired classes and output them as part of the HTML

Here is the CSS.

body {background: #5B5A5C; }

#wrapper {width: 300px; margin: 50px auto; padding: 20px; background: #fff; border:#000 solid 1px;}

a {text-decoration:none; color: #287fae;}

.item {text-indent: 75px;}

.youtube {background: url('img/youtube.png') no-repeat;}

.twitter {background: url('img/twitter.png') no-repeat;}

Screen capture shows the finished product complete with YouTube an Twitter logos next to the proper items

The result is an attractive feed that can be used to boost your on-site marketing. I hope you enjoyed this post. Please let me know what you think in the comments below.

This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.