Server Side Includes (SSI)

Ahh, server side includes, or SSI, as it is called by most. Possible the most useful thing in existance for a webmaster. Simply put, SSI is the ability to include lines of code from an external source inside a document. The great thing about this, however, is that it's done server side, which means it's added to the document by your host, so visitors don't have to wait for it to load. But keep in mind that not all hosts offer SSI (I am pretty sure it requires a Linux/Apache server), so check if your host does before signing up.

What can be done with server side includes, and why is it useful? Well, every website has a way of navigating through it, usually with a Navigation Bar, or navbar for short. If you look on the left, you will see a buncha links to different pages on this site. This is The Spriting Shack navbar, and it lets visitors navigate around the site easily.

Now, there are a lot of different links on the navbar, pointing to all the pages on the site. But what if you make a new page? Let us say you have just added a guide on recoloring Pokemon sprites, and you want it to be on your navigation bar. Well, without server side includes, you would have to go to every single page of your site and update the navbar.

Thats ridiculous :O

So instead, someone smart said, "Thats ridiculous," and invented server side includes.

Now, we can have one .txt document called navbar.txt and link to it from all of our pages. That way, when we update the navbar, all we have to do is change navbar.txt!

Most webmasters have something along the lines of a top.txt file and a bottom.txt file, which both contain all of the code that would be the same on every page of your site. Even though I do this too, I recommend starting the top.txt document after the start of the head tag, the title and the meta description is declared. That way, you can make each page have a different title, and each have a different description.

SUPER IMPORTANT NOTE: If you are gonna have an html page that uses SSI, it MUST have the extension .shtml.

To add SSI on .html extensions, add the following lines to your .htaccess file:

AddType text/html .shtml .html .htm
AddHandler server-parsed .shtml .html .htm
Options Indexes FollowSymLinks Includes 

Even though I've already shown you the syntax for SSI in an example, I have yet to officially give it to you, so here it is. When using SSI, write
<!--#include virtual="top.txt"-->, replacing top.txt with whatever file you want.

IMPORTANT - A VERY COMMON PROBLEM:
Well, some sites you see will have all of their pages in the main site folder, like example.com/page1.shtml. However, some sites, like mine, have all of the content in their own folder. For example, the link to the Anti-Aliasing tutorials is thespritingshack.com/tutorials/anti_aliasing/index.php. (Note that you do not need to type /index.php into the address bar when accessing that page).

Now, if you use the latter on your site, you might encounter some problems with SSI. You see, if you call up "top.txt" on the page thespritingshack.com/tutorials/anti_aliasing, your host will search for a top.txt file in the folder "/anti_aliasing", which will result in a bunch of critical error messages popping up on your site. The top.txt you want is in the main directory, yourdomain.com/.

How to fix this? Well, you could try linking to http://www.yourdomain.com/top.txt instead of just top.txt, but I'm pretty sure that won't work. What I recommend is using a PHP include instead of an HTML include.

In PHP, all you have to type is <?php include('top.php') ?>. Yes, ALL PAGES THAT ARE INCLUDED SOMEWHERE WITH A PHP INCLUDE MUST END WITH THE EXTENSION .php. Also, ALL PAGES THAT USE ANY PHP SCRIPT LIKE INCLUDES MUST HAVE THE EXTENSION .php AS WELL. However, if you just link to top.php again then you'll run into the same problem. Luckily for you, I learned how to fix it when I downloaded CuteNews, because CuteNews uses PHP includes as well. Instead of include('top.php'), write include('/home/www/YOURDOMAIN.com/top.php')(where /home/www/YOURDOMAIN.com/ is the UNIX directory to your site's contents). This way, no matter what folder your page is in, the link to top.php will still work.