Tumblr Notes Plugin Redux
Last year I released a plugin to display notes for any post in a Tumblr site, in much the same fashion as the Dashboard does. At the time, in order to display the notes count, the plugin was required to preload all notes for every post, which made it very inefficient. In February, Tumblr added custom theme tags for notes, so here’s an updated version of the plugin I’ve been using for the past few months: it uses theme tags to display the note count, and only loads the content of the notes when a user clicks to view them for a particular post.
The benefit of this approach is the ability to display notes on any page of your Tumblr site, not possible using custom tags alone.
The installation process is largely the same as described previously, but I’ll repeat it for the sake of clarity. To upgrade from the previous version, grab or link to the new JavaScript file and use the updated markup and tags from Steps 3 and 4 below.
While logged in to Tumblr, go to this Dashboard page, 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, for example:oUVPjZYNo). This we’ll call your “user key”.In the
<head>of your custom theme, include links to jQuery and the notes-native.js file as follows:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://theme.matthewbuchanan.name/tumblr/tools/proxy/notes/notes-native.js"></script>Feel free to host the JavaScript file or link to it on my server. If you wish to strip avatar images from the notes, use this file instead.
In your custom theme, for every post type, include a Notes link:
{block:NoteCount} <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">{NoteCountWithLabel}</a> {/block:NoteCount}Replace
[user-key]in the above code with the user key string from Step 1. This proxy link converts the HTML fragment loaded from Tumblr 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 a container for the imported markup:
<div class="notes-container" id="notes-{postID}"> <p class="loading">Loading...</p> <div class="notes-loader"></div> </div>The “Loading…” paragraph element is optional, and is hidden once the notes are loaded from the server. I styled mine with an animated spinner from Ajaxload.
Add styles to your CSS for the classes
.notes-button,.notes-container(and its child<ol>element containing the notes), and.notes-hide(the button that closes the notes container). The style for thebutton andcontainer elements must be set todisplay: none;initially. If there are 15 or more notes, the button element gets a class of.fave, which I’ve used to style my notes icon differently for popular posts. Here’s the bare minimum CSS you’ll need:.notes-container { display: none; } .notes-container ol { list-style: none; }
That’s it. My email address is below if you have feedback or encounter problems.
Update: Caught a couple of minor issues with the markup, these are now fixed above. Here’s an example page so you can see it working in basic, unstyled form.
