Guille’s Tumblr

Hi, I’m Guillermo Esteves. I’m a web developer living in Washington, DC. I work at the Vox Media Product Team.

Add a tweet box to your Tumblr theme

Today, Twitter finally launched @Anywhere, an extremely simple set of tools that allows developers to easily integrate Twitter into their websites. With just a few lines of code you can add things like follow buttons, hovercards, and tweet boxes to any website. When they previewed it at SXSW last month they were very vague about it, and to be honest I thought the whole thing was kind of meh, but after trying it out and seeing how easy it is to implement, I’m sure this thing is going to pop up all over the Web.

With @Anywhere, in about five minutes I added a “tweet box” at the end of every post in my Tumblr blog, prepopulated with the title of the post, the short URL, and my Twitter username (@gesteves), to allow readers to easily add their comments and share the post with their Twitter followers.

Installing one on your theme is pretty simple if you feel comfortable editing your theme code, but I suggest you use Marco’s Tumblr backup tool to back up your entire Tumblr in case you screw something up. Also, remember that you can restore previous versions of your custom themes if something goes wrong.

The first thing you have to do is go to Twitter’s developer site and register a new app. The application name should be the title of your blog; the application website and callback URL should both be your blog’s URL; leave the application type set to “browser”. Set the default access type to “read & write”. The application description can be whatever you want, and you can add an avatar for your blog, if you want. Answer the CAPTCHA, and register your app. Afterwards, grab your API key and save it for reference. You’ll need it later.

By the way, a nice detail is that when someone tweets from your tweet box, it shows your application name as the source of the tweet, so make sure to put your blog’s title in the application name when you create it.

Now you’re ready to modify your theme. You should probably put the tweet box on each post’s permalink page, so find an appropriate place in your theme, after a {block:Permalink} tag, and add this:

{block:Date}
<div id="tweetbox"></div>

<script type="text/javascript">
var tweetContent = "{block:PostSummary}{PostSummary}{/block:PostSummary} {ShortURL}"
</script>
{/block:Date} 

The <div id="tweetbox"></div> is a placeholder for the tweet box. Make sure it’s inside a {block:Permalink} tag. The rest sets the default text in the tweet box and saves it to a variable; in this case is a short summary of the post, and the short URL. Feel free to modify this however you want. You could, for example, add your @username at the end, so you’re notified via your mentions page whenever someone uses the tweet box. Update: Wrap the code in {block:Date} tags if you don’t want the box to show up in non-post pages, like the Ask or Submit ones.

Now, at the end of the theme, right before the </body> tag, add this:

<script src="http://platform.twitter.com/anywhere.js?id=YOUR-API-KEY&amp;v=1" type="text/javascript"></script>  

<script type="text/javascript">

twttr.anywhere(onAnywhereLoad);

function onAnywhereLoad(twitter) {
    if (typeof(tweetContent) != "undefined") {
        twitter("#tweetbox").tweetBox({
            label: "Tweet about this post:",
            defaultContent: tweetContent
        });
    }
}

</script>

In the first line, replace YOUR-API-KEY with the API key you got before, when you registered the application. In the second block of JavaScript, the first line initializes @Anywhere, and when it’s finished calls the onAnywhereLoad, which in turns replaces the <div id="tweetbox"></div> placeholder with the actual tweet box, if the tweetContent variable is set (if it’s not, we’re not in a permalink page, and it shouldn’t try to display the tweet box). The label option sets the text above the box (by default it’s “What’s happening?”), and the defaultContent sets the initial text of the tweet to the variable we had set before. You can also add height & width options to tweak the size of the box. Check the documentation for all the available options.

Save your theme, go to any post and go test it out.

Bonus: Add Hovercards

Modify the onAnywhereLoad function like so:

function onAnywhereLoad(twitter) {
    if (typeof(tweetContent) != "undefined") {
        twitter("#tweetbox").tweetBox({
            label: "Tweet about this post:",
            defaultContent: tweetContent
        });
    }

    twitter.hovercards();

}

The twitter.hovercards(); function finds every instance of @usernames in the page and automatically links them to that user’s Twitter page, with a little “hovercard” from which you can follow or unfollow that user. It’s a pretty cool detail.

Elsewhere

D.C. Past

D.C. Past

A blog about DC’s photographic history.