Flickr badge vs XHTML 1.0
My website has been XHTML 1.0 Transitional for a while now. I decided to take the next step in XHTML and start serving the mime type application/xhtml+xml to user agents that accept it and serve text/html to those agents that are slipping behind the times (read IE-7). First thing I did was include this PHP code in my files.
<?php
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml");
}
else {
header("Content-type: text/html");
}
?>
Everything looked fine, but wait! Where did my Flickr badge go? Turns out that the javascript Flickr badge relies on Document.Write(). This javascript function does not work in XML documents. So now what do I do? Here’s the code that I used originally on my site to generate the Flickr badge.
<div id="flickr">
<p><a href="http://www.flickr.com/photos/bas68">flickr</a></p>
<script type="text/javascript"
src="http://www.flickr.com/badge_code_v2.gne?..."></script>
<br clear="all" />
</div>I needed a way to run this code in something that was not XML, but I did not want to sacrifice serving XML to user agents that could accept it. Turns out the the <object /> tag is exactly what I needed.
Now I changed my content sniffing code to this.
<?php
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml");
$mime = "application/xhtml+xml";
}
else {
header("Content-type: text/html");
$mime = "text/html";
}
?>I’ll use that $mime variable to branch in the following code fragment.
<?php
if($mime == "application/xhtml+xml") {
print " <object data=\"/flickr.php\" type=\"text/html\"></object>n";
} else {
?>
<div id="flickr">
<p><a href="http://www.flickr.com/photos/bas68">flickr</a></p>
<script type="text/javascript"
src="http://www.flickr.com/badge_code_v2.gne?..."></script>
<br clear="all" />
</div>
<?php
}
?>Simply put, if the user agent can handle application/xhtml+xml then embed the object flickr.php. If the user agent can’t handle application/xhtml+xml then use the javascript as is.
Now what’s on flickr.php? Simple; flickr.php is a valid XHTML document served up with a mime type of text/html. Like this right here.
<?php header("Content-Type: text/html;charset=utf-8"); ?>
<!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" lang="en">
<head>
<title>Flickr Badge</title>
<link rel="stylesheet" type="text/css" href="/css/bas.css" />
</head>
<body>
<div id="oflickr">
<p><a href="http://www.flickr.com/photos/bas68">flickr</a></p>
<script type="text/javascript"
src="http://www.flickr.com/badge_code_v2.gne?..."></script>
</div>
</body>
</html>flickr.php is nicely embeded in the host XHTML document. The javascript is free to use Document.Write() inside the <object /> tag of the host document. I pretty it up with some CSS and everyone is happy!
Whoa! Nice write-up! Very helpful!!
Very helpful. One snag that I can see. In a browser that accepts application/xhtml+xml and therefore uses the object code, try clicking on one of the thumbnails. In my testing with Safari for windows, Firefox 3 and Opera, they all try to load the Flickr page in the embedded object rather than the main window. Are you seeing this and if so any ideas on a fix?
Michael
I ran across that very snag. I haven’t dug to deep into a fix yet.
My guess is that it may require some sort of JavaScript href / link interception and redirection on the object page. May be tricky. Regards, Michael