November 16, 2011

Load External Content in Tumblr Sidebar

I was creating a theme for a Tumblr blog and wanted to embed a list of upcoming events. The ideal solution would be a Google calendar, but the only way to do that was via an iFrame, which style-wise would just not do. The events needed to be editable by someone who has no HTML knowledge, and fit in as inline content. The creative workaround is to create a sub page in Tumblr, use the jQuery .load function, and specify the div you want to grab content from.

Here’s how you do it:
1. Embed jQuery in your blog

<script type="text/javascript" 

2. Set the id of the div that you want to load the external content into, the url of the page you’re grabbing content from, and the id of the div that the content lives in.

<script type="text/javascript">
  google.load("jquery", "1.3");
  google.setOnLoadCallback(function() {
    jQuery(function($) {
      $("#events").load("/events #eventsHere");

3. Create a new page in tumblr, and wrap the content in the div with the id you specified in line 5 from step two. For me, this is #eventsHere.

Voila! You’ve got your blog fetching the content from your other tumblr page, which can be edited with their friendly WYSWIG editor.

  • Art Thompson, Jr.

    Well done. This works with just about any page’s or post’s selector or tag I tried, like:

    .load("/post/22729303572/press-page article")

    Thanks for the time-saver.