Electric Sheep Blog: blogger

My friend Akshat's start up, Activ, released a 'micro-blogging to blogspot via SMS' feature a couple of days ago. It's in alpha, running off a home internet connection, but I'm having fun playing around with it anyways.

I'm not very comfortable micro-blogging to my primary blog - the gods alone know what I might say in a moment of enthusiasm - so I created another blog, registered it with Activ and started posting from my phone. All was hunky dory. Now I wanted to embed a summary of my moblog posts in my main blog - something like the Twitter widget.

So first, I created a Yahoo Pipes app to read and modify (mangle?) the feed from my moblog. It takes the feed, truncates the content to a specified (configurable) number of characters and replaces the title of the post with the truncated content.

Next I tried to add this feed to my blog using the 'Display RSS' widget available in Blogger. At first it added it just fine, but a few minutes later Blogger started complaining it was an invalid feed for no reason I could find. I then tried another pipe based feed which had worked earlier and that didn't work anymore either. Curiouser and curiouser. Stumped, I spent some time prodding things in my pipes app hoping something would make the output palatable to Blogger, but no luck. Then inspiration struck - I ran the Pipes output into feedburner and sure enough, the feedburner output was kosher - you can see the result in the sidebar under 'Moblog Summary'.

Next I need to figure out if I can translate the time information embedded in the feed into 'a few minutes ago' and 'a few days ago' a la Twitter widget. All advice from Yahoo Pipes experts welcome.

I started out with the intention of filling in the url, title and content in Digg. Frankly, this turned out to be a pain in the neck. All I was able to achieve was to fill in the link in digg - I couldn't get it to automatically fill in the title and contents. Perhaps some day soon, when I learn javascript better and it isn't 4:30 in the morning. It's the nested ' and " symbols in the title and content that messed everything up I suspect - though it could be something more sinister...
At least my sample complies with the rules specified by Digg, like the 250 char limit and the URI encoding.
Here's the javascript, for what it's worth.
Drop this snippet in right before the span marked with the comment



<!-- Digg it -->       
<span  expr:id='"digg-link-"+data:post.id' class='post-comment-link'>            
</span> 
<script type="text/javascript"> 
var linkholder = document.getElementById('digg-link-"<data:post.id/>');
var childNode = document.createElement('a');
var contentText = encodeURIComponent('<data:post.url/>');
var diggUrl = "http://digg.com/submit?phase=2&amp;url=" + encodeURIComponent('<data:post.url/>').slice(0,250) + "&amp;title=&bodytext=&amp;topic=programming";
childNode.appendChild(document.createTextNode('Digg this!'));
childNode.setAttribute('href',diggUrl);
childNode.setAttribute('target','blank');
linkHolder.appendChild(childNode);           
</script>

Update: 20061127, 0100
I found that the code snippet keeps losing it's formatting and the code tags which wrap it and degenerates into an unreadable muddle. I've stuck it into a pair of pre tags now. Hopefully that will keep it in its place.

Update: 20061127, 0130
I humbly apologise for the crap code in the sample. I don't know what I was thinking. I've refined it so it doesn't repeat itself all over the place; here it is:
Drop the following in right after the opening <body> tag and before the div which is the outer-wrapper:



<body>
<script type='text/javascript'>
  var addDiggItLinkTo = function(postId, postUrl){
  var linkHolder = document.getElementById('digg-link-'+postId);
  var childNode = document.createElement('a');
  var contentText = encodeURIComponent(postUrl);
  var diggUrl = "http://digg.com/submit?phase=2&amp;url=" + encodeURIComponent(postUrl).slice(0,250) + "&amp;title=&amp;bodytext=&amp;topic=programming";
  childNode.appendChild(document.createTextNode('Digg this!'));
  childNode.setAttribute('href',diggUrl);
  childNode.setAttribute('target','blank');
  linkHolder.appendChild(childNode);
 }
 </script>
 <div id='outer-wrapper'>

This bit is what repeats after every post - as you can see, it's much shorter now. Drop it in right before the  comment:



<!-- Digg it -->
  <span class='post-comment-link' expr:id='"digg-link-"+data:post.id'>
  </span>
  <script type='text/javascript'>
    addDiggItLinkTo('<data:post.id/>', '<data:post.url/>');
  </script>

Update: 20061127, 01:45
Someone on Digg had a 'Dzone this!' request after reading this. It's simple. First replace all mentions of 'Digg' in the sample above with 'Dzone' (match the existing casing - 'digg' is 'dzone'). Then replace the line


var diggUrl = "http://digg.com/submit?phase=2&amp;url=" + encodeURIComponent(postUrl).slice(0,250) + "&amp;title=&bodytext=&amp;topic=programming";

with


var dzoneUrl = "http://www.dzone.com/links/add.html?url=" + encodeURIComponent(postUrl) + "&amp;title=";

and you're done. If you wan't both Digg and Dzone on you blog, do the Digg sample twice and change the second one to Dzone ;-)
Thanks to Marc Chung.

Update: 20061203, 0310
Thanks to Michael's comment, I realised that all the ampersands (&) in the url strings in my post which should have been escaped to read as & were actually being rendered as &. Now fixed. My apologies for the oversight.

Electric Sheep Blog

Hack hack hack

Adding a 'digg it' link to your blogger blog