tutorial: how to make ad-filled error pages
I just built an error page and decide to write up how I did it. This assumes a PHP/Unix hosting environment. all files referred to sit in the domain root.
Note I wasn’t planning to write a tutorial, so I wasn’t thinking in terms of that as I made the page; I was just working. So I may have left something out, feel free to ask questions.
winkwink.gif
There’s four steps and at the end of this post, a link to download the code I used.
TUTORIAL
1. Edit your .htaccess to add this:
Code: ErrorDocument 400 /400.phpErrorDocument 401 /401.phpErrorDocument 403 /403.phpErrorDocument 404 /404.phpErrorDocument 500 /500.phpFor the most common errors, this redirects users to the pages listed.
2. Make the redirect pages. These are just one line of code each. For example, the 400.php just consists of this:
Code: <? $error_status = ’400′; include ‘error.php’; ?>So you make the five redirect pages, just changing the error status for each one.
3. Make the error.php page. Following is the PHP code:
Code: <?phpswitch ($error_status) { case ’400′: $title = "Bad Request"; $body = "Your browser (or proxy) sent a request that this server could not understand."; break; case ’401′: $title = "Authorization Required"; $body = "This server could not verify that you are authorized to access the URL. You either supplied the wrong credentials (e.g., bad password), or your browser doesn’t understand how to supply the credentials required."; break; case ’403′: $title = "Forbidden"; $body = "You don’t have permission to access " . $_SERVER["REQUEST_URI"] . " on this server."; break; case ’404′: $title = "Not Found"; $body = "The requested URL " . $_SERVER["REQUEST_URI"] . " was not found on this server."; break; case ’500′: $title = "Internal Server Error"; $body = "The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there was an error in a CGI script."; break; default: $title = "Unknown Error"; $body = "Unknown Error"; $error_status = ”; break;}?>All the PHP does is take the error code and set variables that will be used in the HTML. Here’s the skeleton HTML I used:
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" ><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="pics-Label" content=’(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://mistresstalia.com" r (n 3 s 3 v 3 l 3 oa 2 ob 2 oc 2 od 2 oe 0 of 2 og 2 oh 0 c 1) gen true for "http://mistresstalia.com" r (n 3 s 3 v 3 l 3 oa 2 ob 2 oc 2 od 2 oe 0 of 2 og 2 oh 0 c 1))’ /> <meta http-equiv="PICS-Label" content=’(PICS-1.1 "http://www.classify.org/safesurf/" L gen true for "http://mistresstalia.com/" r (SS~~000 9 SS~~001 8 SS~~002 9 SS~~003 9 SS~~004 8 SS~~005 9 SS~~008 2 SS~~009 9))’ /> <title><? echo "$error_status $title"; ?></title> <style type="text/css"> /* page defaults */ html * {margin:0; border:0; padding:0} html, body {width:100%; height:100%; font-family:Verdana, Geneva, sans-serif; font-size:0.8em; background-color:#eeeeee; color:#111111; text-align:center; overflow:auto;} a:link {color:#0000ff;} a:visited {color:#880088;} a:hover {color:#ff00ff;} a:active {color:#ff0000;} ul {margin:1.5em; list-style:none;} li {margin:.5em 0;} h1 {margin-top:.5em; font-size:1.5em;} h2 {margin:1em; font-size:1.3em;} h3 {margin-top:1em; font-variant:small-caps; font-size:1.1em;} h4 {font-style:italic; font-size:0.9em;} p, address {margin:.5em 1em;} blockquote {margin:.5em 2em; font-style:italic;} /* page layout */ #wrapper {width:810px; margin:0 auto;} #leaderboard {width:810px; margin:0 auto; background-color:#ffeeff;} #leftSidebar {width:160px; margin:0 auto; float:left; background-color:#ffeeff;} #rightSidebar {width:160px; margin:0 auto; float:right; background-color:#ffeeff;} #content {width:488px; float:left; background-color:#eeeeee; text-align:center;} #error {width:468px; background-color:#eeeeee; text-align:left; margin:0 auto;} #links {width:468px; background-color:#eeeeee; text-align:left; margin:0 auto;} #footer {float:left; width:808px; background-color:#ffeeff; text-align:center;} .clr {clear:both; height:20px;} </style></head><body><div id="wrapper"> <div id ="leaderboard"> <p>put some ads here</p> <div class="clr"> </div> </div><!– end leaderboard –> <div id="leftSidebar"> <p>put some ads here</p> <div class="clr"> </div> </div> <div id="rightSidebar"> <p>put some ads here</p> <div class="clr"> </div> </div> <div id="content"> <div id="error"> <h1>MistressTalia.com web site error</h1> <p>We’re sorry, but there’s been an error accessing our site. Your browser has been given this information:</p> <blockquote> <p> <? echo $title ?> <br/><? echo $body; ?> </p> <? echo str_replace ( ‘ADDRESS’ , ‘address’, $_SERVER["SERVER_SIGNATURE"] ) ?> </blockquote> </div> <div id="links"> <h2>links you may find helpful</h2> <ul> <li><a href="http://mistresstalia.com">Mistress Talia Presents…</a> – a regularly-updated collection of freesites & galleries on BDSM, fem domme and other fetish topics</li> <li><a href="http://womeninbondage.mistresstalia.com">Women in Bondage blog</a> – dedicated to artistic bondage imagery, both clothed and nude softcore bondage pictures and hardcore lesbian bondage scenes including women bound & girls tied up, shibari: Japanese rope bondage, PVC, rubber & latex bondage.</li> <li><a href="http://sadisticdomme.com">femdom phonesex</a> – the kinkiest phone domination on Niteflirt including fetishes for sissies, giantess fans, masochists, humiliation slaves, money pigs, hypnotic submissives and more.</li> <li><a href="http://sadisticdomme.com/blog">Sadistic Domme blog</a> – Mesmerizing, spellbinding, exquisite torment. Mistress Talia and Lady Johanna’s femdomme blog at http://www.sadisticdomme.com covers fetish discussions (including sadomasochism, forced bi, giantism, bondage, strap-on, cuckolds, erotic hypnosis, sissies and cbt), scene reports (crossdressing, dildos, anal play, corporal punishment, tickling, OTK), our favorite BDSM fantasies (often leatherdyke-oriented) and reviews of toys, books and web sites. We update daily for your reading pleasure.</li> </ul> <p>put a bunch of banners here</p> </div> </div><!– end content –> <div id="footer"> <p>put more ads here</p> </div> <div class="clr"> </div></div><!– end wrapper –></body></html>The PHP variables we set earlier are just printed out within the content to make it look "official". The only tricky bit at all was this line:
Code: <? echo str_replace ( ‘ADDRESS’ , ‘address’, $_SERVER["SERVER_SIGNATURE"] ) ?>which was necessary because the $_SERVER["SERVER_SIGNATURE"] variable has an uppercase HTML tag in it and that fails XHTML validation.
The basis setup is a header across the top (for ads), a left and right sidebar (floated left and right respectively, for more ads), a content section for the error message, useful links and some banners, and a footer (for even more ads).
It’s not an SEO-friendly template as the sidebars come first in the code, before the content. I did this for two reasons, first, I don’t expect search engines to actually index error pages. Second, if I’m wrong, I stuffed a lot of text in the sidebars so prefer they get indexed first anyways.
Obviously, you edit up the styles to suit you. Because I have many different sites I’m going to use this for, I didn’t do an elaborate look-and-feel. Instead, I just did a very plain site, so it wouldn’t clash with anything else. A light gray background, a dark gray text, default link colors, and a light pink background on the header, sidebars and footer to make them stand out a bit.
This page validates for both CSS and XHTML.
This shows you what the skeleton looks like (no error is passed): Unknown Error
You’ll notice the columns don’t go to the bottom; I fix that after putting in the ads.
If you use this skeleton yourself, be sure to edit the meta PICS tags for your own site.
4. Stuff it with ads.
I used a few Flash ads which caused me some problems (see postscript)
After stuffing it with ads, the last thing I needed to do was make the columns the same length. Each column ends with a
Code: <div class="clr"> </div>I edited to add some length to the shorter column:
Code: <div class="clr" style="height:48px;"> </div>It was trial-and-error to figure out the height to add, I’ve got it so one column is a pixel short in FF and the other column is a pixel short in IE6, a compromise not terribly noticeable in either.
Also, in FF, it looks like there’s room for an additional banner, but in IE it’s clear there’s not. The problem is a lot of stuff provided by sponsors uses CSS border or padding (which I usually avoid to skip the problems with IE’s box model), so the ability to make it look the same in all browsers is kinda limited when you use sponsor stuff.
The final pages with ads and an error code can be viewed here: http://mistresstalia.com/blah
CODE
All the code in this tutorial, including ads, can be downloaded here: http://mistresstalia.com/error.zip
You *could* just unzip it in your web root and then start editing, but if you do so, if you have anything necessary in your own .htaccess it will overwrite it.
winkwink.gif
P.S. All this is "advanced" stuff, most people don’t have to worry about it.
I had difficulties getting the code provided from Amazon widgets to validate. I tried the FlashSatay hack, but it didn’t work on the Amazon widgets. Since the widgets are served from Amazon’s server, I can’t figure out what the problem is. I can get a lot of the way towards validation, replacing ampersands, replacing uppercase tags, adding closing tags to param tags, swapping out the script language attribute for the type, etc. But not all the way, and I opted for it to work rather than validate, so the page has 18 validation errors, 6 for each embed.
The VirtuaGirl Flash validates, but I had to edit it a bit to get it there, and I also needed a couple IE hacks for the CSS to get it to work for IE6.
Read more at: netpond.com
No Comments »
No comments yet.
RSS feed for comments on this post. TrackBack URL