spantz.org

Oct 14

Using Javascript to Provide Dynamic Content in Tumblr

This article describes how content can be added to Tumblr using Javascript, and the jQuery library. The reader should be familiar with web development.

A Simplified Theme

<html>
<head>
  <title>My Tumblr</title>
  <script type="text/javascript" src="http://example.org/jquery.js"></script>
  <script type="text/javascript" src="http://example.org/tumblr-dyn.js"></script>
</head>
<body>
    {block:Posts}…{/block:Posts}
    <p id="quote-of-the-day" style="display:none"></p>
</body>
</html>

We shall add a quote to #quote-of-the-day for permalink views.

tumblr-dyn.js

var isSinglePostView = function() {
    var loc = document.baseURI;
    var re = new RegExp(".*mytumblr.example.org/post/.*");
    return loc.match(re) != null;
}

$(window).ready(function() {
    if (isSinglePostView()) {
        var qotd = $("#quote-of-the-day");
        qotd.html(
            '"You should\'ve seen the look on her face. It was the same look ' +
            'my father gave me when I told him I wanted to be a ventriloquist."' +
            ' – George Costanza');

        qotd.css('display', 'block');
    }
});

You can use this approach to add custom content depending on what page the user is viewing.

Oct 13

How to Include Reddit in Tumblr

I wanted to include a reddit widget in my posts, in order to submit and vote on entries. Here’s a theme snippet that solves the task:

<script type="text/javascript">
    reddit_url = "{Permalink}";
</script>
<script type="text/javascript" src="http://www.reddit.com/button.js"></script>

Put in a simplified tumblr theme:

{block:Posts}
    {block:Text}
        <div class="post text">
            {block:Title}
                <h3><a href="{Permalink}">{Title}</a></h3>
            {/block:Title}
            {Body}
            <script type="text/javascript">
                reddit_url = "{Permalink}";
            </script>
            <script type="text/javascript" src="http://www.reddit.com/button.js"></script>
        </div>
    {/block:Text}
{/block:Posts}

More info on how to customize the reddit widget can be found here.