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

The people at the Hampstead Theatre came up with the idea to create a play using content completely written by visitor submissions and then to perform it at the theatre during their writing festival. Every visitor to the site can see the last five submitted lines and then add their own line to the play.

Please visit the You Write The Play site and submit your line. There have been some hilarious lines submitted already and the final play is set to be fantastic, if not a little bizarre.

Thanks!

There are several well supported campaigns running in the web design community (and beyond) to bring the end to this life sapping browser. The most notable are the Death to IE6 and the Bring Down IE6 campaigns, both of which receive my full support for trying to change the web for the better. Most of the big names on the Internet are getting in on the action as well with Facebook and YouTube (amongst others) displaying messages to users who visit their sites using IE6.

The big reality check

However, a conversation with a old friend of mine brought me crashing back down to Earth and to remind me of the true reality of the situation. There are an extraordinary amount of web users out there who still have to rely on (through no choice of their own) the services of IE6 to provide them access to the Internet.

Why? Because the corporate networks on which the users browse through to 8 hours a day are still running IE6. For example – my friend works in the IT department of a fairly large law firm in London. They have spent the last 2 and a half years deploying Internet Explorer 7 to their users. The main reason for this massive project is the amount of bespoke web based applications that their business relies on to function. The money men of world don’t care if a users browsing experience is ruined by an out of date browser, especially when the bill to replace the old systems could run into the tens of thousands of pounds.

There is even more reason for large companies to stick with the old browser, Microsoft will still support Windows XP SP3 (of which IE6 is a supportable feature) via their Extended Support program until April 2014 – See Microsoft’s Windows XP: The facts about the future article and the Microsoft backs long life for IE6 BBC News report.

Use your website statistics wisely

This notion of large companies sticking with IE6 is supported when we looked at some global usage stats for the different browsers. The W3Counter Global Stats site claims that in August of 2009, IE6 still held a 14.04% share of the global Internet browser market, while Hitlist market share stats show the August figure to be 25.25%.

Of course, every website is different. You (or your web developer) must all check your own site statistics to see what your percentage of your visitors are using IE6. If the numbers seem too big for you to ignore, then don’t ignore them! Using my friends company as an example again, their website statistics show that over 40% of their visitors are using IE6, and that doesn’t include their own staff! I can only imagine how many companies out there are in the same situation.

Conclusion

The moral of the story is this – for the majority of websites, IE6 is here to stay. If yours or your clients site stats suggest that your visitors are still using IE6, then you should support it. Simple as that. It’s your responsibility to provide as many of your visitors with the best possible experience when they visit your site. If that means spending those extra hours fixing the problems created by IE6, then so be it. The web, after all, is for everybody to enjoy.

What are your views on this? We would love to hear them. Please comment below and let us know what you think.

Thanks!

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

Ever since we launched Carron Media in March, there have been a few little bits of our site which we a) were not happy with or b) didn’t get around too in the first place. The main part of the site that required updating was the contact form. Although the Wordpress plugin we used has been around for ages and is used by millions of bloggers, it didn’t give us the flexibility we were looking for. So now we have hand coded our own forms and along with a new standard contact form, we have launched a new online get a quote form.

The second element that was in need of an update was the footer of each page. We believe the new style footer not only looks better, but is easier to use and provides a lot more information and it gives us somewhere to include our latest updates on Twitter.

We would love to here any feedback you may have about any aspect of the new features or of Carron Media as a whole, so please comment below. Also, you can follow us on Twitter.

Thanks!

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

I’m going to list a few of the more important tags here with some examples of their use. Hopefully this article will provide you with some guidance to why we should use them.

1. <address>

As the name suggests, the <address> tag is used to display contact details of the author of a web page. This means that you can standardised the format of either yours or your users contact details to make them easily identifiable.

The important thing to note is that the <address> tag is not limited to just a postal address, but you can include any contact details, such as a name, email, phone number, URL, etc.

For example:

<address>
    Written by: Ian Harris<br />
    Email: <a href="mailto:info@example.com">info@example.com</a><br />
    Phone: 01234 567 890
</address>

Although the <address>tag should be used where possible, that is a better alternative in the form of microformats. Take a look at the hCard Microformats wiki page for more information.

2. <abbr> & <acronym>

The <abbr> and <acronym> are two very similar tags that are used to provide the user with additional information about an abbreviated phrase. The <abbr> tag is used to define terms such as CMS (Content Management System). The <acronym> tag defines an abbreviated term as if it can be spoken as a word, for example Radar (Radio Detection and Ranging). These tags are incredibly useful because when the user hovers their mouse over the abbreviated phrase, the full defined description is displayed as a tool tip.

Here is the code for these two examples:

<abbr title="Content Management System">CMS</abbr>

<acronym title="Radio Detection and Ranging">Radar</acronym>

Hover over the following to see them in action: CMS and Radar

It is common practice to style these tags with a dotted bottom border so that users can identify that these tags have additional information attached to them:

abbr, acronym {
    cursor: help;
    border-bottom: 1px dotted #000;
}

Another good reason for using these tags is that they are used by screen readers and search engines to draw extra information from your content. This helps you to create accessible and search engine friendly content, which of course is what most of us are trying to achieve.

3. <cite>

The <cite> tag is used to indicate a citation and allows you to reference the source of information. This tag is probably most commonly used in conjunction with the <q> and <blockquote> tags as it allows you to specify the source of the quote.

As with the <abbr> and <acronym> tags, you can add the titleattribute to display some extra information when the user hovers their mouse of it.

For example:

<p><q>O Romeo, Romeo, wherefore art thou Romeo?<q> - <cite title="Romeo And Juliet Act 2, scene 2, 33–49">William Shakespeare</cite></p>

O Romeo, Romeo, wherefore art thou Romeo? – William Shakespeare

It’s worth pointing out that the <q> tag has only just been supported by Internet Explorer in version 8.

4. <del> & <ins>

The <del> and <ins> stand for deletion and insertion respectively. It’s quite common these days for an author to show the end user where content has been edited after it’s initial publication, especially when the content can be updated by more that one person. The <del>tag will add a strike-through to it’s contents, where as the <ins> will add an underline.

<p>My favourite type of music is <del>rock</del> <ins>reggae</ins>.</p>

This is displayed as: My favourite type of music is rock reggae.

5. <dl>, <dt> & <dd>

You are no doubt aware of the <ul> and <ol> tags and their uses, but there is another list called a definition list which looks like <dl>. In the traditional sense, this type of list should be used if you create a list of definition terms with associated descriptions. However, W3C list specification seems to indicate that you can use the <dl> tag to list any terms where there is a direct relationship between them.

The <dl> tag has two child elements which are <dt> and <dd> which stand for definition term and definition definition. There can be multiple <dd> tags associated with each <dt>.

For example:

<dl>
    <dt>HTML</dt>
        <dd>Hypertext Markup Language</dd>
</dl>
<dl>
    <dt>The FA Cup Final</dt>
        <dd>When: 30th May, 2009 3pm</dd>
        <dd>Where: Wembley Stadium</dd>
</dl>

This is displayed as:

HTML

Hypertext Markup Language

The FA Cup Final

When: 30th May, 2009 3pm

Where: Wembley Stadium

6. <sub> & <sup>

The final two tags in this list are subscript, <sub> and superscript, <sup>. The same results can be achieve using CSS, but whats the point when you can use these two built in HTML tags.

There usage can be seen in the following examples:

<p>The chemical formula for water is H<sub>2</sub>O.</p>

The chemical formula for water is H₂O.

<p>Today is the 12<sup>th</sup> April.</p>

Today is the 12^th April.

Conclusion

In reality, you may rarely use some of the tags listed above. However, you should definitely keep them in mind and make sure you use them correctly when the need arises. The key to writing semantic code is to use the correct HTML tags for the correct application.

Semantically written code will help you product search engine friendly and accessible content, which after all, is what we should all be doing.

Resources

• Wikipedia article about HTML
• hCard Microformats wiki
• W3C list specification

1. ‘Previous Page’ link

This snippet will take the user back to the previous page that they have viewed. Pretty much like the standard browser back button really:

<a href="javascript:history.back(1)">Previous Page</a>

2. ‘Print this page’ links

I’ve read quite a few mixed opinions about adding a link that allows users to print the current page. Some developers think that their users will already know how to print the page using the browsers toolbar and don’t need us cluttering our pages with unnecessary links. Others believe that we should make it easy for the user and remind them that they can print this content if they so wish. I am with the latter, but whatever your opinion, here it how you add a print link:

<a href="#" onclick="window.print();return false;">Print</a>

3. Close the current browser window

On occasions, you might need want to give the user the option to easily close the current browser window. For example, you have created a CMS that uses pop-up top display information. This snippit will close the current browser window (or tab):

<a href="javascript:window.close();">Click to Close</a>

4. Confirm prompt

If you are asking the user to perform a certain action, like deleting something, you can prompt them to confirm that they definitely want to go ahead. This snippit intercepts by prompting with a Yes/No box and a message of your choice. If the user selects Yes, it will carry on to the URL in the link. Selecting No will just cancel the action.

<a href="delete.php" onclick="return confirm('Are you sure you want to delete this?')">Delete</a>

5. Replace broken images

Sometimes you may link to images that are hosted on other domains, such as photos in your Flickr account. As this is external, you cannot guarantee that this content will always be available and if the site hosting the image was to go offline, you would be left with that nasty red cross that gives the impression that you don’t look after your site. The snippet below will display a default image if the external image is unavailable (obviously, you should only link to images where you have permission to do so, nobody likes a bandwidth thief).

<img src="http://www.mydomain.com/image.jpg"
onerror='this.src="/images/unavailable.png"' />

I hope these are useful to you, they have certainly helped us. Thanks.

You can see how it is easy to get it wrong though, take a look at the Wikipedia list of UK counties. The list of counties has changed quite considerably over time, especially in Wales.

As we were only interested in postal addresses for the web form, we decided it would be quicker and easier to compile our own list using the postal county data in this Wikipedia article. So here is a zipped file containing the HTML list as well as a XML list we created of the current UK postal counties. We hope this helps you out in some way. It may be worth just keeping these lists on file somewhere, you never know when you may need them.

Resources

• Wikipedia list of UK counties

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