Picture Moblogging with flickr and drupal

Picture moblogging is one of the easiest and most addictive things one can do with their camera phone. Building a moblog with flickr is one of the easiest ways to go. After listening to the G&G minicast on moblogging with flickr I decided to set one up.

To set this up I decided to use drupal and flickr. After looking at the built in way to blog images with flickr I wasn't pleased. I had seen this in action over at Bobs blog and didn't like that the RSS feed had css tags as readable text in it. It looked unprofessional to me.

There is, also, the drupal module for flickr. While this module does a great job of putting flickr images on your drupal site it isn't quite what I needed for a picture moblog.

Not finding anything to fit what I wanted I wrote 2 short php snippets and setup flickr to work with them. Here is what to do and the code behind it.

Setting Up Flickr

After signing up for an account, I configured flickr to upload pictures by email at http://www.flickr.com/account/uploadbyemail/. I programmed the email address listed into my phone and added the tag 'moblog' to all of the images I upload by email. That is important because all items with that tag will be used for my moblog.

Then, I sent flickr an image from my phone as a text message. The text message subject is the caption for the image. Next I viewed this image in flickr and clicked on the moblog tag (on the right of the image). This brought me to a list of the all the images I have with the tag moblog. I grabbed the rss feed for this as I would need it later in drupal. This feed is the feed for my moblog.

Setting Up Drupal

In drupal I enabled the aggregator module. This will read in my flickr rss feed. In admin > aggregator I added the flickr feed and grabbed the aggregator feed number associated with it. To get this I viewed the feed in drupal and grabbed the number at the end of the url. Something like, /aggregator/sources/[number].

Now, comes the code. First, the block on the right with the newest picture. I went to admin/block and added a new one. The block title is 'moblog', the input format is PHP and the code for the block is:

<?php
$agg_feed = '8';
$block_content = '';	
$query = "SELECT description FROM " .
            "{aggregator_item} WHERE fid = '$agg_feed' ORDER BY timestamp DESC LIMIT 1";
    $queryResult =  db_query($query);
    $item = db_fetch_object($queryResult);
    $block_content = "<div class=\"mafflickr\">";
    $block_content .= $item->description;
    $block_content .= "</div><div align=\"right\"&#62;&#60;a href=\"/moblog\">See More</a></div>";
    return $block_content;
?>

Set the $agg_feed variable equal to the number of the aggregator feed from before. This will create a block like the one titled moblog on my sidebar.

Now, to create the page. I started by creating a new page and set the input type to PHP. Here is the code for this page:

<?php
$agg_feed = '8';
$flickr_feed = "http://www.flickr.com/services/feeds/photos_public.gne?id=21956593@N00&amp;tags=moblog&amp;format=rss_200\";
$block_content = '';	
$query = "SELECT description FROM " .
            "{aggregator_item} WHERE fid = '$agg_feed' ORDER BY timestamp DESC"; 
    $queryResult =  pager_query($query, 10);
    while ($item = db_fetch_object($queryResult)) {
      $block_content .= "<div>";
      $block_content .= $item->description;
      $block_content .= "</div>";
    }
    $block_content .= theme_pager(NULL, 10);
    $block_content .= "<a href=\"$flickr_feed" class=\"feed-icon\">&#60;img src=\"/misc/feed.png\" alt=\"Syndicate content\" title=\"Syndicate content\" width=\"16\" height=\"16\" class=\"noborder\" /></a>";
    return $block_content;
?>

Set the $agg_feed variable equal to the number of the aggregator feed from before and the $flickr_feed variable equal to the flickr rss feed used in the aggregator.

The last few tweaks were to setup a path of /moblog for this page, to set the aggregator to discard items after 16 weeks, and set this feed to refresh every hour.

Now, when I want a new picture up on my moblog I just send flickr a text message with a new picture. This is so much trouble... like last night where this is what was happening.... Dan with his finger in a bug zapper....

Any questions? Anyone have their own story on setting up a moblog?

Technorati Tags: moblog, flickr, drupal, moblogging, php, software, hack