Dr. Dobb's is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Channels ▼
RSS

Web Development

Shelling the Pod


Pod Plugging

Since I developed this idea while setting up my father's podcast pages, I'm going to use his podcast feed in my example. To demonstrate the application of the RssInfo class, I've included two "barebones" web pages (Listings Two and Three, available electronically; see "Resource Center," page 5). They're barebones in the sense that there are no graphics, other than the picture I get from the feed. I've done this so you can upload these pages to your web space along with the rss_info.php file (Listing One), substitute the feed URL with your own, and immediately see the results from your own RSS feed with no broken dependencies, such as missing image files.

I use the main podcast page (Listing Two, available electronically) as the index.htm page in the podcast directory of the site, <MySite>/podcast/index.htm. I use the ".htm" extension rather than ".php" in case I want to remove the PHP at some later time and other pages have already linked to my podcast page. (I add an ".htaccess" file to the podcast directory to tell the server to treat the ".htm" file as a ".php.")

The rss_info.php file also resides in <MySite>/podcast. I use the episode description page (Listing Three, available electronically) as the index.htm file in a subdirectory called "notes", <MySite>/podcast/notes/index.htm.

Figure 1 shows the output from the main podcast page in Listing Two. (I've removed some of the episodes in the podcast for space.) Looking at Listing Two, you'll see that I create an instance of the RSSInfo class, passing it the feed URL, in the HEAD section of the HTML file. (If you've uploaded the listings to your site, try substituting your own feed.) With my $rssInfo object now fully loaded, I place the title of the podcast in the caption bar of the browser.

[Click image to view at full size]

Figure 1: Main podcast page.

In the BODY section of the HTML file, I display the podcast title, author's name, podcast description, and the image. I then provide a link to subscribe to the podcast in iTunes. Apple has made this easy by letting you substitute the "http" in the feed URL with "itpc." I also include some instructions on how to deal with the browser's reaction when iTunes is attempting to launch. In addition, I provide a link to the feed itself that the user can input into the "Advanced | Subscribe to Podcast..." menu item in iTunes or use in another podcasting client.

Describing the different ways of obtaining podcast episodes to users who are probably somewhat Internet savvy but may know little or nothing about podcasting, presents a challenge for the web content provider. This is a subject that is probably worthy of an entire article.

Below the Subscription section (Figure 1) I have an Episode section that lists all the episodes in the podcast. I invite the user to click on an episode title for more information about that particular episode. This list of episodes runs from the latest to the earliest. But that is because that's the way I've entered them in my podcast feed. The other feeds I've seen do this the same way, but to be sure the list is ordered this way for any feed, you would have to implement some kind of sorting mechanism, probably based on the PUBDATE tag in each item.

The episodes in the list are linked to the podcast description page, with the GUID from the episode acting as a query string. In RSS land, a GUID is a string, which runs contrary to our software developer's COM-induced expectation. However, the GUID does act as a unique ID for the item. You can examine the RSS 2.0 spec to discern the exact role of the GUID, including the responsibilities of an aggregator in using the GUID tag, or just use the ITEM URL in the GUID tag and thank me later.

The episode description page is generated using the code in Listing Three (available electronically). Here, after creating an RSSInfo object in the HEAD of the HTML file as before, I use the query string to find the index of the particular episode in the array of items. If users have somehow come to this page without a query string, I default to the first episode in the list (in my case, the latest episode). I then put the episode title as well as the podcast title in the browser caption bar.

Browsers such as Firefox that support Live Bookmarks use the ITEM's TITLE tag to display the items and the ITEM's LINK tag as a destination when the user clicks on an ITEM title. Some podcasters use the ITEM's LINK tag to link to a place on their website. I use it to link to an MP3 stream file.

Putting the audio stream file (an ".m3u" file) in the LINK tag not only lets fans who have bookmarked the podcast be one click away from listening to any episode, but also lets me easily implement a Listen button on the website for any episode.

In the BODY section of the episode description page, I show the podcast title and author. When displaying the episode title, I link the title to the stream file simply to provide another way for the user to hear the episode. Below that is the episode subtitle and description. Then I provide explicit Listen and Download links.

To finish out the episode description page, I give users a way to return to the main podcast page and also display the date the episode was released (leaving off the time) as well as the podcast copyright information. If you'd like to see a sample of this podcast display mechanism in a "production" setting, go to www.dicksummer.net/podcast.

That's a Wrap

As podcasting continues its gain in popularity, your company will likely be interested in making use of this flexible and efficient means of communication. You may even want to start your own podcast. The information I've presented here should start you on your way toward letting the world know about your new podcast.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.