number13: Tumblr Notes Plugin

17:32 8th Dec 2009

Notes: 216

Reblogged from matthewb

Tumblr Notes Plugin

A new version of this plugin that uses custom tags is here.
On Friday I posted about loading Tumblr’s reblog “notes” via AJAX into a custom theme. I’ve had enough interest via email to release it as a plugin of sorts. Here’s a brief run-through of how to install it:
While logged in to Tumblr, go to the Dashboard page that lists all your posts, view its source code, and search for the first occurrence of display_post_notes. This is a function call with two parameters, the second of which you need to remember (it’s a short string such as oUVPjZYNo). This we’ll call your “user key”.
In the <head> of your custom theme, include links to the jQuery library and the notes.js file as follows:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="http://theme.matthewbuchanan.name/tumblr/tools/proxy/notes/notes.js"></script>
Feel free to host the notes.js file or link to it on my server. If you wish to strip avatar images from the notes, you’ll need to host a copy of the file and modify the AJAX request to include &noimages=1 as a query string parameter.
In your custom theme, for every post, include a Notes link as follows:
<a href="http://theme.matthewbuchanan.name/tumblr/tools/proxy/notes/?url=http://www.tumblr.com/dashboard/notes/{postID}/[user-key]" rel="{postID}" class="notes-button">Notes</a>
Replace [user-key] in the above URL with the user key string from Step 1. Leave both occurrences of {postID} as they are, they will be replaced by Tumblr’s theme engine with the ID of the current post. This proxy link converts the HTML fragment into a JSONP callback function, and is based in part on Troy Wolf’s PHP Proxy. (If JavaScript is disabled, the link falls back to loading an unstyled notes view as a new page.)
Near the Notes link, add an empty <div> as follows:
<div class="notes-container" id="notes-{postID}"></div>
Add styles to your CSS for the classes .notes-button, .notes-container (and its descendant <ol> element containing the notes), and .notes-hide (the button that closes the notes once they’re open). (The styles for the button and container elements should both be set to display: none; initially.) If there are 15 notes or more, the button element gets a class of .fave added to it, which I’ve used to style my notes icon differently for popular posts. Here’s the bare minimum CSS you’ll need to add:
.notes-button, .notes-container { display: none; }
.notes-container ol { list-style: none; }
All feedback is welcomed, especially if anything’s unclear in these instructions. I’ll reserve the right to remove the scripts if anyone from Tumblr finds them objectionable. (This won’t break your theme, as nothing is visible on the page until the notes have loaded for a particular post.) Email me via the “By Day” link on this page.

Update: I’ve included explicit code for including the JavaScript files and for initially hiding the notes with CSS. Thanks for your feedback.