I thought I would write, in simple terms, about some of ways I’ve used them.
‘What is a server side include,’ you may be wondering… Most websites run on the Apache webserver. As it delivers a page, to you the site visitor, Apache can insert bits of content (‘includes’) into the page dynamically.
For example, if you have a header that you would like to appear on several pages, you just save the HTML code for it in a text file and then, on your pages, pop in some code like this:
Apache will put in the code for the header wherever it sees that instruction. And for real beginners out there I’ll point out that the link above is relative to the root of the server (/) and the file is stored in a folder called ‘ssi’.
What are the benefits of this? Later, if you need to make changes to the header you only have to edit one file (header.txt) instead of dozens or even hundreds of pages.
You have to let the server know that it must process the page for server side includes. The standard way to do this is to name your pages something.shtml. Note the suffix there: .shtml. The server can be set up to process pages that have other suffixes, for instance pages on the BBC website end with .stm.
It can even be instructed to process all pages that end with .htm or .html. However this could mean that hundreds of pages that don’t have any includes are processed needlessly and it does have a slight extra impact on system resources.
You can also ‘nest’ server side includes. If your header file to be included is called header.shtml, then Apache will check inside that for includes too.
There is a long list of server environment variables that you can make use of. For example, to put the current time on your page, just put in the line:
Or for the page name:
I’d been using server side includes for quite a while when I discovered extended server side includes. Things get a bit more exciting with XSSI. It’s a way to make Apache insert different bits of content into your page, depending on certain conditions. However, I couldn’t find much information about this online. There were lots of pages with the same rather dull example.
Here’s a basic example of what you can do with XSSI:
The http_referer part is another Apache environment variable and stores details of the page the visitor came from. In this example, different content is inserted into the page depending on whether the visitor came from Google, Yahoo or somewhere else.
Let’s take a look at a more sophisticated way of using this. On my site I have a page for each video. I fancied having a ‘back’ button on each page. The problem was that numerous different pages on my site link to any one video page. So how could I send people back to the page they came from without making many different copies of the video page (and Google hates duplicate content and would mark down my website for that)?
I can do it with a server side include like this:
And the referrer will be inserted to create the back link. But there’s a slight problem. Quite a few people come to a video page direct from another website. Often a search engine like Google. Most people don’t expect a back button on a page to send them back to the previous website.
Turning the whole thing into a conditional server side include solves that problem:
Above, if the http_referrer includes ‘g7uk.com’, the back button is shown on the page. Otherwise nothing is shown. In other words, if the previous page was here on g7uk.com a back button appears and the visitor can click back to the previous page on my site. But if they came from another website no button is shown.
To see it working click here. Note the back button at the bottom of the right column.
But go to the search results on Google, click through to exactly the same page and you’ll see there is no back button. Magic!
DATE AND TIME
The date and time can also be used to control includes. You may have noticed that each time you go to the front page of my site you see a different photo at the top?
In this case the server is told to show a particular image for each second. Which photo you see depends on which of the 60 seconds the page loads.
The code below only includes the first five seconds. You need to fill in the rest up to sixty!
The symbols <= mean ‘less than or equal to’. So, if the second of the minute is less than or equal to one, the photo ’01.jpg’ is shown and so on.
Entering the details of sixty different photos could be a bit tedious. You can also specify a time or date range. You could go away on holiday for a fortnight (or even a whole year) and still have your web page updated with fresh content every day.
Here, the >= symbols mean ‘greater than or equal to’.
&& means ‘and’.
So, if the date is greater than or equal to 23 December 2009 AND is less than or equal to 28 December 2009, the Merry Christmas message is shown on the page.
If the date is greater than or equal to 31 December 2009 AND is less than or equal to 1 January 2010 the Happy New Year message is shown. Otherwise ‘nothing’ is shown.
THREE PAGES IN ONE
I had another idea for my video pages. I like to provide the videos in Flash video format (as used on YouTube) but also in Windows Media format for those people who have an older computer. Also, sometimes I want the Flash video to autoplay. Other times I want it to wait until the person clicks on it.
Instead of making three pages that are identical except for the player section, here’s how I do it with conditional server side includes.
I create three different text files, each has just the HTML code for the relevant player. On the video page I put this code:
Probably you have seen a ‘query string’ in your browser address bar at some time.
In the link above, the part after the question mark is the query string. In this case ‘windowsmedia’. When the visitor clicks on a link that has a query string in it, the Apache server remembers the string until the next page change.
So what happens in the conditional server side include code above? If I want the page to shown the Windows Media version of the video, I link to the page like this:
The server sees that the string includes the word ‘windowsmedia’ and inserts into the page the code that contains the Windows Media player.
For a Flash video that autoplays I link like this:
For a Flash video that doesn’t autoplay I link without a string:
See the page in action:
The text files containing each player can be inserted anywhere on my site by using a server side include. Again, a great time-saver if I ever need to update the player code: there is just one file to edit.
ADDING A COOKIE
One final example. I’d never used browser cookies until a few weeks ago. As you may know, a cookie is a small text file that contains bits of information about your visit to a website. It is stored by your web browser on your own computer and may contain your log in details or it could be something as basic as the fact that you chose to turn the colour scheme of a site blue rather than red.
Unlike the query string, a cookie can be stored for days, weeks or years. However, there are also session cookies that are deleted when you close the browser.
I had no idea how to write a basic cookie and boy did I have trouble finding something I could understand on Google. There were hundreds of websites which had over-complicated examples that I didn’t need and couldn’t understand. I searched for an hour or two and that’s why I decided to write this article. So you won’t have to.
Here’s the code to set a basic cookie. It goes in the HEAD part of your web page:
This cookie is called ‘sevisitor’. You can see this on the second to bottom line and you can change the value to whatever you want.
The bit with the numbers 1000 * 60 * 60 * 24 * 30 controls the date and time when the cookie expires: 1000 milliseconds, 60 seconds, 60 minutes, 24 hours, 30 days.
If you want a cookie that expires after ten minutes, change the line to look like this:
Why did I need a cookie in the first place? There is talk that if your website has a low click through ratio on Adsense ads, Google reduces your fee per click. In other words, if you have lots of visitors coming to your site, loading your pages (and the ads) but few click on an ad, you could be affected.
Visitors that come to your site from a search engine are most likely to click an ad. Those who come due to a bookmark or from a social networking site (pah!) are unlikely to. So, one way to improve your page impressons to click ratio is to only show ads to those visitors who come from search engines.
Here is the cookie code I use in the HEAD of each page:
Note that || means OR.
If the visitor comes from one of the search engines listed, a cookie is set called ‘sevisitor’ . Otherwise there is no cookie.
Then, put the following code anywhere you have an ad on your pages:
If a cookie called ‘sevisitor’ exists then the ad is shown, otherwise it is not.
So there you go. I don’t claim to be an expert and no doubt there are alternative and sometimes better methods to achieve what I have demonstrated.
I love the many and varied ways that conditional server side includes can add to my websites and I hope this has whet your appetite too.