Display Your Feeds on Your Tumblr Blog

It's pretty easy to insert a feed from some other social service into your tumblr timeline but what if you want to display a feed (e.g. Twitter, Shared Items from Google Reader, etc) on your Tumblr site without having that information clutter up your timeline?
With a little customization of your site's html this is pretty easy.
In my case I wanted to add a couple of these feeds on the left side of my page under my personal links.  I'll show you what I used to pull this information in.
For each of these I'm going to use the jQuery library to make life much easier so let's start by adding the code to include this.  Put this snippet immediately before the </head> part of your page.
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Now lets start with the Delicious links.  We will use the same Ajax function for each of these lists and you'll notice that there are only minor differences between the examples.  The Ajax function from the jQuery library asks the Delicious server to send us the list of links from our Delicious account and then gives us the ability to display that list.  Add this snippet between the code you already pasted above and the </head> part of the page.
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
        type:"GET",
        url:"http://feeds.delicious.com/v2/json/{Delicious Username}",
        dataType:"jsonp",
        async:false,
        data: ({count:5}),
        success: function(data){
             if(data.length > 0){
                  for (i=0; i<data.length; i++) {
                       $('#links').append('<li><a href="' + data[i].u + '">' + data[i].d + '</a>');}  
              }
         }
  });
});
</script>
Now replace {Delicious Username} with your actual delicious username (replace the braces as well).  I've limited the list to the last 5 links but if you would like to increase or decrease that number, simply replace the 5 in {count:5} with your desired number.
Next, find the spot in your html where you want to the list to be displayed and add this snippet.
<ul id='links'></ul>
The javascript that we added above will insert the list of links between these two ul tags.  I'm using an unordered list here so my links will have bullets.  If you want a numbered list instead, simply change the 'ul' tags to 'ol'.  (example: <ol id='links'></ol>)
It's that simple.  Now lets do the same thing for my list of shared items from Google Reader.  Again, add this code before the </head> part of your page.
<script type="text/javascript">
$(document).ready(function() {

$.ajax({
    type:"GET",
    url: "http://www.google.com/reader/public/javascript/feed/{Google Reader Feed}",
    dataType:"jsonp",
    async:false,
    success:function(data) {
      for(i = 0; i < data.items.length && i < 5; i++) {
        $('#gRead').append('<li>' + '<a href="' + data.items[i].alternate.href + '">' + data.items[i].title + '</a>');
      };
     }
    });
 });
</script>
Replace the {Google Reader Feed} with the RSS link to your shared items.  You can find this link on your shared items page, just copy and past it here.
Note: Only replace the {Google Reader Feed} part.  We are using an undocumented Google feature to make sure the information is formatted correctly so the first part of the url is required.
Again, find the location in your html that you want the list to display and add something similar to what we did for the Delicious links
<ul id='gRead'></ul>
That's it!  Very simple.
Want to use this for a different feed?  No problem, here are a couple tips for customizing this for your own feeds.
The URL:
Google provides a great feature that will reformat a standard RSS feed into the JSON format that our script above wants.  Simply append this address to the front of your feed link
http://www.google.com/reader/public/javascript/feed/
For example, say we wanted to display the RSS feed from TechCrunch.  We would simply add the TechCrunch RSS address to the end of our Google address above.  It would look like this...
http://www.google.com/reader/public/javascript/feed/http://feedproxy.google.com/TechCrunch
Use that line for the address behind the 'url:' portion of the script above.
The list tags:
If you are going to have multiple lists on your page, you will need to make sure the scripts know where they are to insert the list at.  In our two examples above you will notice that the id that was assigned in the <ul> tag was also referenced in the Ajax script.  For example, in the Google Reader example I used "gRead" in both locations.
$('#gRead').append
and
<ul id='gRead'></ul>
You will need to replace gRead with a unique identifier in these two places for each list you are displaying.  This id is how the script identifies the spot on your page where the list should be inserted.  If they are not unique, you will have duplicate lists popping up where you don't want them to.
Hope you found this useful.  Leave a comment and let me know if you were able to use this on your own tumblelog.