Everything was working nice and smoothly until Twitter changed the way users can retweet from the main Twitter website. Not that this was a bad thing, the new(ish) functionality was a great addition to an already great service. Before the changes, users manually typed ‘RT’ at the beginning of their tweet to signify that they have retweeted it from another user. Now days, you simply click a button which will take care of it for you.

But, as Kerem pointed out in the comments of the original article, our code does not display these new retweets. Instead, it just displays an empty space where your latest tweet should be sitting pride of place. In nearly all circumstances, I would imagine that this is not the desired effect, especially as the retweet functionality is used a lot more these thanks to the new functionality.

As a result, I have got back to the drawing board to investigate how we can get around this problem and improve the current script. If you wish, you can download the sources files before continuing on.

The Cause of the Issue

The find out why this was happening, we started looking in the Twitter API Wiki. The statuses user_timeline page revealed that the user_timeline API call does not support the new retweets when the data has been requested in the JSON or XML formats:

“Note: For backwards compatibility reasons, retweets are stripped out of the user_timeline when calling in XML or JSON (they appear with ‘RT’ in RSS and Atom).”

The obviously impacts the code we wrote in the original article as we used the JSON format for our returned data. Unfortunately, they don’t expand as to why the no longer support these formats, so we are just going to have to take their word for it.

The Solution

As it turns out, the solution to this issue is relatively simple, but implementing that solution is slightly trickier as it will require some server-side code (of which I will go into later).

As per the Twitter API, the user_timeline API call still supports the RSS and Atom formats. Therefore we can simply change the API request URL to return our data as an RSS feed. If the latest tweet is a retweet now, the text is simply prefixed with an ‘RT’. This is much more useful that a blank tweet, as I’m sure you will agree.

This method does have a few drawbacks though. In our code, we use the jQuery .getScript() method to send our API call to Twitter and return our tweet. This is fine for the JSON format (it’s JavaScript, which can be opened with .getScript), but is not valid for the XML of the RSS feed.

Therefore, we are going to use jQuery’s .get() method instead. However, it not a straight swap because for security reasons, this method will (quite sensibly) only let you request local files with this function and our request is going directly to the Twitter API (i.e, not local).

Cache the tweet locally with PHP

There is a really simply solution to this problem though, using a PHP proxy script, we can load the data locally.

This file will sit locally on you server, and instead of calling the Twitter API directly, we will call it in the query string of this proxy.php file. This means that our new request URL will look as follows:

proxy.php?url=http://twitter.com/statuses/user_timeline/' + username + '.rss?count=1

Here is the source code of the proxy.php script (the file is included in the download at the bottom of the page). Save the file to a web accessible folder on your server:

<?php
// PHP Proxy
// Loads a XML from any location. Used with Flash/Flex apps to bypass security restrictions
// Author: Paulo Fierro
// January 29, 2006

$session = curl_init($_GET['url']);
curl_setopt($session, CURLOPT_HEADER, false);
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
$xml = curl_exec($session);
header("Content-Type: text/xml");
echo $xml
curl_close($session);
?>

Basically, this script uses the PHP cURL Extension to open the file sent to it in the query string. It then strips away any additional information, such as the file headers, to leave the raw data (the XML of the RSS feed in our case). Finally, it changes the output header to XML and the returns the raw data.

The new jQuery

As we have changed the format of our data, will we need to change the way jQuery parses that data. In the original article, we basically took Twitters own code and tweaked it slightly. This time around, it’s going to be easier and quicker just to rewrite it.

The new JavaScript file (named twitter2.js) is included in the download for this article.

Here is the twitter2.js file in full. I will run through the code in chunks to give you an understanding of what is going on.

UPDATE: Ed Knittel quite correctly points out in the comments that the date format in the RSS results differs to that of the JSON results. Therefore, I have updated the code below to reflect this format difference.

function relative_time(time_value) {
    var newtime = time_value(',','');
    var values = newtime.split(" ");
    time_value = values[2] + " " + values[1] + ", " + values[3] + " " + values[4];
    var parsed_date = Date.parse(time_value);
    var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
    var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
    delta = delta + (relative_to.getTimezoneOffset() * 60);

    if (delta < 60) {
        return 'less than a minute ago';
    } else if(delta < 120) {
        return 'about a minute ago';
    } else if(delta < (60*60)) {
        return (parseInt(delta / 60)).toString() + ' minutes ago';
    } else if(delta < (120*60)) {
        return 'about an hour ago';
    } else if(delta < (24*60*60)) {
        return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
    } else if(delta < (48*60*60)) {
        return '1 day ago';
    } else {
        return (parseInt(delta / 86400)).toString() + ' days ago';
    }
}

$(function() {

    var username = '<yourtwitterusername>';

    $.get('<path-to-file>/proxy.php?url=http://twitter.com/statuses/user_timeline/' + username + '.rss?count=1', function(tweets) {
        $(tweets).find('item').each(function() {
            var tweet = $(this);
            var pattern = new RegExp("^"+username+": ","g");
            var status = tweet.find('description').text().replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
                return '<a href="'+url+'">'+url+'</a>';
            }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
                return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
            }).replace(pattern,'');
            var tweetDate = relative_time(tweet.find('pubDate').text());
            $('.loading').fadeOut(750, function() {
                $('#latest_tweet').append($('<p>&ldquo;'+status+'&rdquo; <small>- <span>'+tweetDate+'</span></small></p>').hide().fadeIn(750));
            });
        });
    });
});

First of all, we define a function that turns the time and date of the tweet into something that is more understandable to humans. This is identical to the original, so I won’t go into detail again.

$(function() {

    var username = '<yourtwitterusername>';

Here we create the standard jQuery on DOM ready function and set a variable called username to store your Twitter username:

$.get('<path-to-file>/proxy.php?url=http://twitter.com/statuses/user_timeline/' + username + '.rss?count=1', function(tweets) {

Next we request the RSS data from Twitter using jQuery’s .get() method. This is where we load your latest tweet via the proxy.php file (make sure you include the correct file path to the proxy.php file if it is in a different directory to this JavaScript file). If you would like to load more than one tweet, change the final option in the URL (e.g. enter count=3 at the end of the query string if you would like to return three tweets). The data returned from the Twitter API in then stored in an object called tweets which can the be called in the callback function.

$(tweets).find('item').each(function() {
    var tweet = $(this);
    var pattern = new RegExp("^"+username+": ","g");

In the next block of code, we need to search through the XML to find the text and time of each tweet. We use the .find() method to search through the XML and locate each XML element called ‘item’. We then loop through each of the discovered elements. We set a variable called tweet which caches the currently selected element in the loop.

The next step is to create a new RegExp object. By default, you may have noticed that the Twitter API not only prefixes the tweet with RT if necessary, it also prefixes every tweet with your Twitter username. The regular expression here simply matches your Twitter username so we can remove it from the tweet later on.

var status = tweet.find('description').text().replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
    return '<a href="'+url+'">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
    return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
}).replace(pattern,'');

Now, at first glance, this chunk of code may look a bit confusing, but don’t let that put you off. We start by extracting the actual text of the tweet from the XML data, again using jQuery’s .find() method. We then pass this text through three regular expressions. The first regular expressions searches for any URL’s in the text and replaces them with HTML <a> links. The second expressions searchs for the Twitter @ references and again turns them into actual links. The final filter uses the regular expression that we set up earlier that removes the username from the beginning of the tweet.

 var tweetDate = relative_time(tweet.find('pubDate').text());
     $('.loading').fadeOut(750, function() {
         $('#latest_tweet').append($('<p>&ldquo;'+status+'&rdquo; <small>- <span>'+tweetDate+'</span></small></p>').hide().fadeIn(750));
     });

This final chuck extracts date and time of the tweet and passes it through the relative_time to turn it into a nice readable format. The last bit inserts the tweet into your website in exactly the same way as the original script.

Conclusion

The code in the original article has proved quite successful and I think many of you have found it useful. Hopefully the new version will continue to be helpful in your projects. Please let us know if you have used this script, we would love to hear if you have found this useful in any way.

Thanks!

Resources

• The original article
• Twitter API Wiki
• Twitter API – statuses user_timeline
• PHP proxy script
• PHP cURL Extension

I’m pretty sure that it has not escaped your attention that Twitter is an invaluable tool if you want to communicate with your clients and peers. As you are spending all this time tweeting, it makes sense to display this information on you own website so you can draw in more followers on Twitter and get your voice heard.

There are quite a few tutorials available on this subject and several jQuery plugins that will display your tweets for you, all of which are very good in their individual way. However, this tutorial will show you just how easy it is to use the Twitter API tools with a tiny bit of jQuery to display your latest tweets in a fully customisable, simple and functional way.

First we will create a very basic HTML document to display our latest tweet. Then I will show you how to get the Twitter JavaScript code which will translate the returned data for us. We will be using our Twitter account, @carronmedia in the examples, please feel free to follow us.

View Demo

The Twitter API

The nice people over at Twitter have provided us with a selection of tools, know as API’s, that allow us to easily use and update information on their servers. For this tutorial, we are going to concentrate on the most basic of these functions which is to simply retrieve the latest tweet for a selected Twitter account. There is an API for pretty much any programming language and plenty of documentation to back it up. Head over to the Twitter API Wiki where you will find all the information you need.

Why bother using jQuery?

Although Twitter is a wonderful service, it can suffer time to time from a bit of overcrowding and as a result, their servers can be a bit slow in returning data to your website. This can cause undesirable problems with your site and prevent the other data on the page from downloading.

We can reduce these problems by using the jQuery $(document).ready() method to load the our modified JavaScript file after the DOM has loaded and also allows to to give the end user some feedback (in the form of an loading .gif image) to let them know that some data is on its way.

The basic HTML

Create a new file in your project and call it index.html. Open it up and enter the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My latest Tweet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="twitter.js" type="text/javascript"></script>

</head>

This is standard XHTML document so we have specified a DOCTYPE and a page title. The first thing we need to do is load the jQuery library. This is best achieved by loading the core file from a content delivery network such as Google’s. I have gone into more detail about this in a previous post, Extend Google Analytics with jQuery, so I won’t go into it again here.

We have also referenced a bespoke JavaScript file called twitter.js which we will create shortly. Make sure you get your folder path correct. For example, if you create your twitter.js is a sub-folder called ‘js’, the src attribute will become src="js/twitter.js".

Create a loading image

Before we continue, head over to ajaxload.info which, if you have never seen this before, is a great site where you can easily create a nice loading animated .gif file. Choose your design, or download the project source code and use the one I generated.

Now lets create the body of the html file. Here we will create a <div> element that will insert our tweet into. Also, there is a nested div within it that will hold our nice animated gif that lets the end user know that something will be loaded into this area.

Enter the following at the end of the file:

<body>

<div id="latest_tweet">
    <h3>Twitter</h3>
    <div class="loading"></div>
</div>

<a href="index.html">Reload</a>

</body>
</html>

There isn’t too much explanation need for this markup. The <div> with a class of ‘loading’ will have our loading .gif as a background image and will be faded out once our tweet has been successfully loaded.

Style the tweet

Finally we need to style this markup, add the following in the <head> section beneath the last <script> tag (in a real live project, you should create these styles in a separate .css file):

<style type="text/css">
body {
    font: 12px/16px normal Arial, Helvetica, sans-serif;
    color: #666;
}
#latest_tweet {
    border: 1px solid #dfdfdf;
    width: 250px;
    padding: 20px;
}
#latest_tweet small, #latest_tweet a {
    color: #7aa6cb;
}
.loading {
    background: url('ajax-loader.gif') center no-repeat;
    height: 60px;
}
</style>

Again, if you put your .gif file in a different folder, make sure you change the path to it in the styles.

Creating our Twitter JavaScript file

First of all, we need to create a local copy of the Twitter code that will translate and format the JSON data. Go to your Internet browser of choice and enter http://twitter.com/javascripts/blogger.js. Depending on your browser, you will be shown the file in plain text or prompted to download it. Either way, save a copy of it into your project folder and call it twitter.js.

Open up your twitter.js file and you should see two functions, twitterCallback2 and relative_time. The twitterCallback2 function will translate the JSON data that we will request with jQuery and output it HTML and the relative_time function will format the time.

Lets start to modify the original code. Look for the follow line in the twitterCallback2 function:

 statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');

and replace it with this line:

 statusHTML.push('<p>“'+status+'” – <small>'+relative_time(twitters[i].created_at)+'</small></p>');

The original code will output a list item tag (<li>), which seems a little pointless as we are only going to display one tweet. So we have replaced it with <p> tags and reformatted the HTML a little bit.

Next, delete the following line at the end of the twitterCallback2 function:

document.getElementById('latest_tweet').innerHTML = statusHTML.join('');

and in its place type:

$('.loading').fadeOut(750, function() {
    $('#latest_tweet').append($(statusHTML.join('')).hide().fadeIn(750));
});

This jQuery code will fade out the placeholder <div> which contains the loading image and then fade in our latest tweet in it’s place.

Finally, at the very end of the twitter.js file, type the following (make sure you change the username variable to the Twitter account who’s latest tweet you are going to display):

$(document).ready(function() {
    var username = 'carronmedia';
    $.getScript('http://twitter.com/statuses/user_timeline/' + username + '.json?callback=twitterCallback2&count=1');
});

This uses the jQuery getScript method to load the Twitter API script that will return our tweet. To break this down a little bit, the twitter API will accept a few different arguments to be appended to the end of the file which we are loading. The first argument we require is called callback. This refers to the name of the function that we want to load the returned JSON data into. In our case, the callback argument is equal to the name of the first function in our twitter.js file. The second argument, count, simply tells the Twitter API how many tweets to return. In our case, this is set to 1.

Conclusion

UPDATE: May 2010 – There is now a new updated blog article that follows on from this article. Once you have finished reading this, please read part 2.

Twitter is a fabulous marketing tool and can really help you communicate with your end users on your site. Having the ability to automatically display your latest tweet really helps visitors relate to you as a person. It is also a handy little way of showing that your site is active and there is a real human being behind it.

Have you extended this code further? Do you think that there are other uses for this technique? Perhaps you have written your own jQuery plugin with it. Please comment below and let us know, we would love to hear if you have found this useful in any way.

Thanks!

Resources

• Twitter
• Twitter API Wiki
• ajaxload.info

The aim of this tutorial is to show you how you can modify the standard Google tracking code using the power of jQuery to get extra information from your Google Analytics reports. With jQuery, we can get Google Analytics track your file downloads and clicks to external sites without having to trawl through your code and write any extra mark up.

We are also going to use a new feature of Google Analytics which are known as ‘Events’. This should give you a good base for you to build your own code and extend the power of Google Analytics even more.

Getting started

If you haven’t already, head over to the Google Analytics site and sign up for a free account. You will need to setup a Website Profile, which should be pretty self explanatory.

When you have your unique tracking code, either from your new Google account or from your current websites tracking code, take a note of the UA number, for example: UA-1234567-1. This is your unique identifier which tells Google what website to track and we will need it later on. If you already have the tracking code installed on your website, remove it now. Otherwise you could end up duplicating your stats!

Google Analytics Events

Before Google released the new pageTracker._trackEvent() function, we would use the normal pageTracker._trackPageview() function. To make your external links and file downloads stand out from your normal page visits, you can pass this function a modified url. For example, say we wanted to track the download of a PDF called myfile.pdf. We would add a pretend folder in front of the file name. This folder may not exist on your site, it’s there so you can easily spot downloads in your Google Analytics reports.

We could call this function like so:

pageTracker._trackPageview('/downloads/myfile.pdf')

You may wish to use this method instead of the newer functions, it’s up to you. However, I would recommend that you take a look into the new functions as it allows you to track much more.

For more information about tracking events read, the Google Analytics Event Tracker Guide. You will see how flexible the new method is and you can expand on this tutorial to track other events on your website.

Viewing you new events in Google Analytics

At present, the new event tracking function is still in beta on the Google Analytics site and not all accounts have access to view them by default. However, this is not a problem as you can add it in manually. When you are logged into your Analytics, type the following url into your browser: https://www.google.com/analytics/reporting/events. This will take you to events page. Once there, click on the “Add to Dashboard” button above the report and this will add the Events Tracking Overview section to your dashboard.

Integrating jQuery

There are a couple options available to you when you load the jQuery code; you can download a copy from the jQuery site and call it locally, or as we will do, call it directly from the Google code library. For more information why this is the better way to load jQuery, read 3 reasons why you should let Google host jQuery for you.

In the <head></head> section of your HTML, copy and paste the following code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

This load the minimised version of jQuery 1.3.2, which is the current verison at the time of writing, you may wish to check to see if there is a newer version available. For more information about jQuery, take a look at the jQuery Documentation.

Writing the custom tracking code

Still in the <head></head>, directly beneath the code we have just inserted, enter the following:

<script type="text/javascript">
$(document).ready(function(){

    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    $.getScript(gaJsHost + "google-analytics.com/ga.js", function(){

        try {
            var pageTracker = _gat._getTracker("UA-xxxxxxx-x");
            pageTracker._trackPageview();
        } catch(err) {}

        var filetypes = /\.(zip|exe|pdf|doc*|xls*|ppt*|mp3)$/i;

Instead of loading the Google Javascript directly in the mark up, we are using the jQuery $(document).ready function to load the code as soon as the DOM is ready, which means that our code is ready before any of the page content gets loaded. Therefore we can target elements, such as links, when they are loaded by the browser.

Next, we include the standard Google tracking code to register that the current page has been visited. The difference here is that we are using another jQuery function, $.getScript, to load the Google JavaScript file and then create a function to run once the file is loaded. Make sure you replace the UA-xxxxxxx-x with your own unique UA number. We then set a variable called filetypes which holds a regular expression to find any links with popular file extensions, you can add or remove any file extensions you wish.

Outbound links

Now we get to the part where we add the code which will actually start tracking the additional links. We will start with all of the external links on the page.

Add the following code to your script:

        $('a').each(function(){
            var href = $(this).attr('href');

            if ((href.match(/^https?\:/i)) && (!href.match(document.domain))){
                $(this).click(function() {
                    var extLink = href.replace(/^https?\:\/\//i, '');
                    pageTracker._trackEvent('External', 'Click', extLink);
                });
            }

The $('a').each function will target each <a> tag in turn and execute the code within the function itself against that tag. The first part of this function is to set a variable, href, which will hold the value of the href attribute of each <a> tag.

Our first if statement performs two checks. It is making use of the .match function to check to see if the value of our href variable either starts with http: or https: (using a simple regular expression) and that it does not contain the current domain of the website (i.e. it is external).

If this if statement is returned true, we then add a click event to the current <a> tag the our script is currently looking at. When this click event is triggered, we use another regular expression to strip the http:// or https:// from the link path. Finally, we use Google’s pageTracker._trackEvent function to send the event details to our Google Analytics account. The first option for the function it to set the link category, I have used ‘External’. The next option is the to set the action, this has been set to ‘Click’. The last option is to sent the link label. This is set to the url of the external link.

Mailto: links

The next type of link we are going to target are any email address links that may be on the current page. As you know, the email address is preceeded with mailto:, so we can easily pick them out with jQuery.

Directly after the last if statement, add the following code to your script:

            else if (href.match(/^mailto\:/i)){
                $(this).click(function() {
                    var mailLink = href.replace(/^mailto\:/i, '');
                    pageTracker._trackEvent('Email', 'Click', mailLink);
                });
            }

This works in exactly the same way as the external link if statement. We use a regular expression to find any email links, clean the link up by removing the preceeding mailto: and then fire off the Google tracking event.

File downloads

The last type of links we are going to track are file downloads. Again, using a regular expression, we will check each link and match ita againsts the filetypes variable we created earlier.

Add the following code to your script under the last statement:

            else if (href.match(filetypes)){
                $(this).click(function() {
                    var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
                    var filePath = href.replace(/^https?\:\/\/(www.)mydomain\.com\//i, '');
                    pageTracker._trackEvent('Download', 'Click - ' + extension, filePath);
                });
            }
        });
    });
});
</script>

Again, the process is the same, but this time we are going to extract the file extension into a variable called extension using yet another regular expression. If the link is an absolute link (i.e. it has the full http://www.mydomain.com/ in the file path), we removed the protocol and domain name as we don’t really need this in our Google Analytics reports as we already know that the link is local to our site. Make sure you replace mydomain.com with your own domain name.

Here is the code in full (with the gaps removed so it fits on the page better):

<script type="text/javascript">
$(document).ready(function(){

    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    $.getScript(gaJsHost + "google-analytics.com/ga.js", function(){

        try {
            var pageTracker = _gat._getTracker("UA-xxxxxxx-x");
            pageTracker._trackPageview();
        } catch(err) {}

        var filetypes = /\.(zip|exe|pdf|doc*|xls*|ppt*|mp3)$/i;

        $('a').each(function(){
            var href = $(this).attr('href');

            if ((href.match(/^https?\:/i)) && (!href.match(document.domain))){
                $(this).click(function() {
                    var extLink = href.replace(/^https?\:\/\//i, '');
                    pageTracker._trackEvent('External', 'Click', extLink);
                });
            }
            else if (href.match(/^mailto\:/i)){
                $(this).click(function() {
                    var mailLink = href.replace(/^mailto\:/i, '');
                    pageTracker._trackEvent('Email', 'Click', mailLink);
                });
            }
            else if (href.match(filetypes)){
                $(this).click(function() {
                    var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
                    var filePath = href.replace(/^https?\:\/\/(www.)mydomain\.com\//i, '');
                    pageTracker._trackEvent('Download', 'Click - ' + extension, filePath);
                });
            }
        });
    });
});
</script>

Conclusion

With the power of jQuery and the new Google ‘Events’, it is clear that you can take your website statistics further and produce more meaningful reports. This will help you gain a better understanding of how your website is being used and what your users and looking for, which can only be better for all concerned.

You can download the full code below, make sure you add in your own UA number and domain name.

Have you extended this code further? Have you found any other uses for the new Google ‘Events’? Perhaps you have written your own jQuery plugin with it. Please comment below and let us know, we would love to hear if you have found this useful in any way.

Thanks!

Resources

• jQuery
• jQuery Documentation
• Google Analytics
• Google Analytics Event Tracker Guide
• 3 reasons why you should let Google host jQuery for you

Sometimes, however, it might be necessary for you to create a RSS feed yourself. Perhaps you have just won a new client who’s current site has a old bespoke CMS which they like and want to keep, but you want to be able to publish their updated content via RSS. Hopefully this tutorial will help you to achieve this.

What is RSS?

RSS, in its current form, stands for Really Simple Syndication and is a family of web formats to publish frequently updated content. The RSS Feed (as it is commonly known) can then be read by the users feed reading software or by another website which wishes to ‘syndicate’ the content of that feed.

The RSS format is based on XML that is built using standardised tags. Here is an example of a basic RSS document, we will be generating something similar using PHP later in this tutorial:

<?xml version="1.0" encoding="ISO-8859-1"?>
<rss version="2.0">
    <channel>
        <title>My RSS feed</title>
        <link>http://www.mywebsite.com/</link>
        <description>This is an example RSS feed</description>
        <language>en-us</language>
        <copyright>Copyright (C) 2009 mywebsite.com</copyright>
        <item>
            <title>My News Story 3</title>
            <description>This is example news item</description>
            <link>http://www.mywebsite.com/news3.html</link>
            <pubDate>Mon, 23 Feb 2009 09:27:16 +0000</pubDate>
        </item>
        <item>
            <title>My News Story 2</title>
            <description>This is example news item</description>
            <link>http://www.mywebsite.com/news2.html</link>
            <pubDate>Wed, 14 Jan 2009 12:00:00 +0000</pubDate>
        </item>
        <item>
            <title>My News Story 1</title>
            <description>This is example news item</description>
            <link>http://www.mywebsite.com/news1.html</link>
            <pubDate>Wed, 05 Jan 2009 15:57:20 +0000</pubDate>
        </item>
    </channel>
</rss>

Take a look at the RSS Wikipedia page for a full history of RSS and it’s various different versions.

Creating the feed

As we know, RSS is made up of standardised XML tags which you would normally find in a flat XML file. What we are going to do is create this standard XML data dynamically using PHP. This means that the URL for our feed will end with the .php extension, but we will tidy this up later in the tutorial.

So, lets start building the PHP script. The first thing we are going to do is tell PHP what type of data we would like to output (I am going to break each section of the script down, but I will include it in full at the end):

<?php
    header("Content-Type: application/rss+xml; charset=ISO-8859-1");

The header() function that we have called is telling PHP to output our data using the XML MIME type as well as to use the ISO-8859-1 character set. This makes sure that our content is delivered to the users in the correct format.

Now we are going to define our database connection details and create the header XML tags for our RSS feed. I’m going to statically assign the feed information tags just to keep it simple, however, you may wish to expand on this to dynamically set these. That way, you can re-use this code as a function or even go a step further and use it to build your own PHP class. The actual feed data will be kept in a variable called $rssfeed.

    DEFINE ('DB_USER', 'my_username');
    DEFINE ('DB_PASSWORD', 'my_password');
    DEFINE ('DB_HOST', 'localhost');
    DEFINE ('DB_NAME', 'my_database'); 

    $rssfeed = '<?xml version="1.0" encoding="ISO-8859-1"?>';
    $rssfeed .= '<rss version="2.0">';
    $rssfeed .= '<channel>';
    $rssfeed .= '<title>My RSS feed</title>';
    $rssfeed .= '<link>http://www.mywebsite.com</link>';
    $rssfeed .= '<description>This is an example RSS feed</description>';
    $rssfeed .= '<language>en-us</language>';
    $rssfeed .= '<copyright>Copyright (C) 2009 mywebsite.com</copyright>';

Next, we need to extract our data by looping through our MySQL database to create the <item> tags. I’m not going to explain this part in too much details as it’s not point of this tutorial and you may do this differently. We are going to assume that our MySQL table (“mytable”) has columns called title, description, link and date which hold the relevant data:

    $connection = @mysql_connect(DB_HOST, DB_USER, DB_PASSWORD)
        or die('Could not connect to database');
    mysql_select_db(DB_NAME)
        or die ('Could not select database');

    $query = "SELECT * FROM mytable ORDER BY date DESC";
    $result = mysql_query($query) or die ("Could not execute query");

    while($row = mysql_fetch_array($result)) {
        extract($row);

        $rssfeed .= '<item>';
        $rssfeed .= '<title>' . $title . '</title>';
        $rssfeed .= '<description>' . $description . '</description>';
        $rssfeed .= '<link>' . $link . '</link>';
        $rssfeed .= '<pubDate>' . date("D, d M Y H:i:s O", strtotime($date)) . '</pubDate>';
        $rssfeed .= '</item>';
    }

    $rssfeed .= '</channel>';
    $rssfeed .= '</rss>';

    echo $rssfeed;
?>

The first part of this section connects to the MySQL database using the constants which we defined at the start of the script. Then we perform a basic SQL query to pull out all our data from the database in date order. The final part of the query, DESC, ensures that the newest content will appear first in the users RSS reader.

Next, we look at each row of data from the results of the query using a while loop. In each loop cycle, the first action performed is the extract() function to create a set of variables that take the name of the columns of the database, in my case $title, $description, $link, and $date. We then add the data contained in these variables to our main $rssfeed variable. When it reaches the final row of data, the while loop ends and we apply the closing XML tags.

The final step of the script is to actually output the data we have collected. This is simply done by echoing the $rssfeed variable. Here is the code in full:

<?php
    header("Content-Type: application/rss+xml; charset=ISO-8859-1");

    DEFINE ('DB_USER', 'my_username');
    DEFINE ('DB_PASSWORD', 'my_password');
    DEFINE ('DB_HOST', 'localhost');
    DEFINE ('DB_NAME', 'my_database'); 

    $rssfeed = '<?xml version="1.0" encoding="ISO-8859-1"?>';
    $rssfeed .= '<rss version="2.0">';
    $rssfeed .= '<channel>';
    $rssfeed .= '<title>My RSS feed</title>';
    $rssfeed .= '<link>http://www.mywebsite.com</link>';
    $rssfeed .= '<description>This is an example RSS feed</description>';
    $rssfeed .= '<language>en-us</language>';
    $rssfeed .= '<copyright>Copyright (C) 2009 mywebsite.com</copyright>';

    $connection = @mysql_connect(DB_HOST, DB_USER, DB_PASSWORD)
        or die('Could not connect to database');
    mysql_select_db(DB_NAME)
        or die ('Could not select database');

    $query = "SELECT * FROM mytable ORDER BY date DESC";
    $result = mysql_query($query) or die ("Could not execute query");

    while($row = mysql_fetch_array($result)) {
        extract($row);

        $rssfeed .= '<item>';
        $rssfeed .= '<title>' . $title . '</title>';
        $rssfeed .= '<description>' . $description . '</description>';
        $rssfeed .= '<link>' . $link . '</link>';
        $rssfeed .= '<pubDate>' . date("D, d M Y H:i:s O", strtotime($date)) . '</pubDate>';
        $rssfeed .= '</item>';
    }

    $rssfeed .= '</channel>';
    $rssfeed .= '</rss>';

    echo $rssfeed;
?>

I mentioned earlier that I would tidy up the .php extension of the feed. I don’t know about you, but I find this a little bit ugly. When you see RSS feeds that have been generated by WordPress for example, you don’t see the actual file name, you just get the containing folder. To do this, create a folder in the root directory of the site and call it ‘feed’. Create a file in this new folder called ‘index.php’ and copy the code above into it. This leaves us with a nicer looking feed URL, in the case of this example, http://www.mydomain.com/feed/.

It really isn’t that necessary to tidy the feed URL, but I think it just looks a little neater.

Conclusion

Now that you have created your feed, you can link to it from your site or publish it using a service such as FeedBurner. But there is an extra step which will allow your visitor’s browsers to automatically detect the RSS feed on your site. In the <head> section of you pages, include the following tag (obviously changing the URL to your feed):

<link rel="alternate" href="/feed/" title="My RSS feed" type="application/rss+xml" />

Thanks for reading, it’s the first tutorial we have published and we hope it helps you out in some way. Please leave a comment below, we would love you hear what you have to say.

Resources

• RSS Wikipedia page
• PHP.net – extract() function
• W3C RSS feed validation
• FeedBurner