The other side of the moon

I wanted my twitter updates to show up on the sidebar of my blog. At first I found that blogger already had a gadget for that, so I just included it. Unfortunately, this gadget loaded my timeline in an iframe. The iframe pointed to a script on someone else's domain, and every now and then that domain was unresponsive resulting in the rest of my page not loading.

It also did not work on Opera.

I decided to jump into twitter's API and figure out if I could get this to work on my own. I didn't bother with making it customisable, but if you want to reuse it, you'll need to change my username to your own. Here's what I did.

First, create a div that will hold my timeline:

<div id="twitter">
   <ul class="twitter-timeline">
   </ul>
   <div class="follow-me"><a href="http://twitter.com/bluesmoon">Follow me on twitter</a></div>
</div>

Put this wherever you want your timeline to go.

Next, write the Javascript that will draw the timeline. This is fairly simple:

function show_twitter(o) {
   var div = document.getElementById("twitter");
   var ul = div.getElementsByTagName("ul")[0];
   ul.innerHTML = "";
   for(var i=0; i<o.length; i++) {
       var li = document.createElement("li");
       li.innerHTML = o[i].text.replace(/@(\w+)/, "<a href='http://twitter.com/$1'>@$1</a>");
       ul.appendChild(li);
   }
}

I put this at the start of the document, but you can put it anywhere before you make a call to the twitter API, which is the next step:

<script src='http://twitter.com/statuses/user_timeline.json?id=bluesmoon&count=5&callback=show_twitter'
        type='text/javascript'></script>

A few things to note about this call:

1. It's got my userid in it. It only works with userids that have public timelines
2. count is limited to 5 items
3. the callback parameter's value is the name of the function we defined in the previous step.
   

That's it. Put all this together and you have your latest 5 tweets on your blog. If your blogging software requires XML valid templates (like this blogger thing), then you'll need to either put your javascript inside a CDATA section or escape all quotes, &, < and >

Short URL: http://tr.im/bloggertwitter

Blogger's templating system includes data tags that you can use to reference parameters of your blog, blog posts, labels and much more in your template or in widgets. All of blogger's templates are built with these tags, and that's how you see posts, comments, timestamps and all the other dynamic content on a blogger blog.

Using these tags in your HTML (XHTML actually) is quite easy. For example, to print to the blog's title, you'd use this:

   <data:blog.title/>

Notice the / before the >. That's needed because templates are XML so all tags have to be closed. If a data tag has to go inside another tag, the syntax is a little different. For example, to enclose the title in a link to the blog, you'd do this:

   <a expr:href="data:blog.url"><data:blog.title/></a>

Notice the expr: before href. That tells the template engine that the value of this attribute is an expression to be expanded. I don't know the details, but that's what I've understood from it.

So knowing all this (and it took me a while to figure it out because the documentation sucks), my next problem was, how to include in in javascript. In particular, I needed it for the delicious tagging at the bottom of each post. I needed the post title and url to be passed to the delicious badge function. This is the code I needed to use:

   Delicious.BlogBadge.writeBadge("delicious-blogbadge-"+Math.random(), "http://url", "title", {});

Now I generally put my javascript inside <![CDATA[ ]]> tags so that I don't have to worry about escaping quotes and relational operators. However, this also means that any data tags I used would be treated as plain text and ignored. I searched for docs on how to do this, and there was none.

I then went to the Edit Template section, and clicked the checkbox that said "Expand Widget Templates" and then searched through the template code for other <script> tags. I found some, and got my answer from there, and this is what my delicious call became:

   <script type='text/javascript'>
      Delicious.BlogBadge.writeBadge(
               &quot;delicious-blogbadge-&quot;+Math.random(),
               &quot;<data:post.url/>&quot;,
               &quot;<data:post.title/>&quot;,
               {}
      );
   </script>

First, there's no CDATA section. Second, I need to replace the quotes that surround the values passed the function with &quot; and then just use the data tags as usual.

Pretty simple, but it took me a really long time to find any documentation on the subject. Let this blog post serve as documentation for anyone else who needs to do the same.