My space is cooler than your space

If you’ve visited my MySpace profile recently, you’ve noticed that it doesn’t look much like a standard MySpace profile. Which I’m pretty stoked about, since the hideousness of most MySpace profiles approaches obscenity.

One key element in the makeover of my space is the blog. You see, I have way too many blogs already, so I really don’t want to post to all of them. And I usually just end up crossposting everything from my regular blog to the MySpace blog.

So I replaced it.

Drupal dynamically generated MySpace blog replacement

The first generation MySpace blog replacement was pretty sweet. I wrote a flash based RSS reader that would check my personal blog for new posts, and display them on the ‘space. but the powers that be decided that flash files shouldn’t be able to link to offsite pages. So the “read more” links didn’t actually work.

So we try it again. Enter MySpace blog replacement, generation two. This one’s really rad.

It’s made up of magical images, generated on the fly by my server. It’s static links like recent-posts?page=1, each of which magically redirect to the most recent (or second, or third…) post on my blog.

Moral of the story (regular people version): the blog links on my MySpace profile now work. go click on them!

Moral of the story (nerd version): check out this really cool dynamically generated MySpace profile hack!

For those that care, here is how to generate magical “recent blog post” images in Drupal. Or images for any other kind of content, for that matter.

I created two pages, one to generate the title images, and another to redirect clicks to the appropriate post.

I called the first page blog/recent it uses the pager to choose which blog post we care about, so blog/recent?page=1 will be the second blog post, ?page=2 will be the third, etc…

<?php

$result = pager_query(db_rewrite_sql(
    "SELECT n.nid
    FROM {node} n
    WHERE n.type = 'blog'
    AND n.status = 1
    ORDER BY n.created DESC"
  ), 1);

$node = db_fetch_object($result);

$url = url('node/' . $node->nid, NULL, NULL, true);

header('Location: ' . $url);

// the page stops here.
exit;

The second page is called blog/recent-title. It’s a bit more complicated. It uses the gd library to generate a dynamic image with the title of the post we care about. it does some really cool things like figuring out exactly what size the final image should be…

<?php

// some default values
$space = 4;
$font_size = 4;
$img_width = $max_width = 340;

// send a header
header("Content-type: image/png");

// a single post from the database
$result = pager_query(db_rewrite_sql(
        "SELECT n.title
        FROM {node} n
        WHERE n.type = 'blog'
        AND n.status = 1
        ORDER BY n.created DESC"), 1);

$node = db_fetch_object($result);
$title = ($node->title) ?
        $node->title : "no recent blog posts found";

$font_height = imagefontheight($font_size);
$font_width = imagefontwidth($font_size);
$max_chars = $max_width / $font_width;

// get the title, truncate it if needed.
$title_rows = explode("n", wordwrap($title, $max_chars, "n"));
$title = array_shift($title_rows);
if (count($title_rows)) {
        if (strlen($title) > ($max_chars - 3))
                $title = array_shift(explode("n", wordwrap($title, $max_chars - 3, "n")));
        $title .= "...";
}

// calculate the image size
$img_width = $font_width * strlen($title);

// create an image
$image = imagecreatetruecolor($img_width, $font_height);

// choose a color (R, G, B)
$font_color = imagecolorallocate($image, 153, 153, 153);

// write the title to the 
imagestring($image, $font_size, 0, 0, $title, $font_color);

// generate the image
imagepng($image);
imagedestroy($image);

// no more code is executed
exit;

You will notice that this page also uses the pager, but we can’t just point an image to blog/recent-title?page=1. MySpace doesn’t like dynamic images. it will only let you post an image without question marks in the path, and with a proper extension (like .png).

We’ll give MySpace exactly what it wants. we’re going to venture into the mystical realm of .htaccess

Open up the .htaccess file in the root directory of your drupal site. find the section that says

# Modify the RewriteBase if you are using Drupal in a subdirectory and
# the rewrite rules are not working properly.
RewriteBase /

Under that, add the lines

#rewrite rules for MySpace blog title images...
RewriteRule blog/recent-title/([0-9]*).png$ blog/recent-title?page=$1 [L,QSA]

Save and close the file. now when MySpace asks for blog/recent-title/0.png, it will actually go to blog/recent-title?page=. pretty cool, neh?

We’re almost done. All that’s left is to insert your new magic blog into your MySpace page. The HTML should look something like this:

<a href="http://example.com/blog/recent"><img src="http://example.com/blog/recent-title/0.png" /></a> (<a href="http://example.com/blog/recent">read more</a>)

<a href="http://example.com/blog/recent?page=1"><img src="http://example.com/blog/recent-title/1.png" /></a> (<a href="http://example.com/blog/recent?page=1">read more</a>)

<a href="http://example.com/blog/recent?page=2"><img src="http://example.com/blog/recent-title/2.png" /></a> (<a href="http://example.com/blog/recent?page=2">read more</a>)

<a href="http://example.com/blog/recent?page=3"><img src="http://example.com/blog/recent-title/3.png" /></a> (<a href="http://example.com/blog/recent?page=3">read more</a>)

<a href="http://example.com/blog/recent?page=4"><img src="http://example.com/blog/recent-title/4.png" /></a> (<a href="http://example.com/blog/recent?page=4">read more</a>)

if you want to list more posts, just add a few more lines like that to your MySpace profile. the drupal end of things is already set up.