Tumblr AJAX Notes
In 2008, I released a plugin to display notes for any Tumblr post, just as the Dashboard does. At the time, in order to display the notes count, the script preloaded all notes for every post on the page, massively inefficient. In February 2009, Tumblr added custom theme tags for notes, allowing for the native display of note counts, however the plugin still required a proxy server to get around AJAX’s cross-domain limitations. With a recent change to Tumblr’s API, notes are now served from the same domain as your blog, so I’ve removed the proxy and simplified the installation instructions below.
The benefit of this approach over that of most themes is the ability to display notes on the index page of your blog, not possible using the custom notes tags alone.
Installation
In the
<head>of your custom theme, include links to jQuery and the notes.js file as follows:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://theme.matthewbuchanan.name/tumblr/tools/notes/notes.js"></script>Feel free to host the JavaScript file or link to it on my server. There is no longer an option to remove images, as the notes markup is now coming directly from Tumblr; use CSS to accomplish this instead.
In your custom theme, for every post type, include a Notes link:
{block:NoteCount} <a href="{postNotesURL}" rel="{postID}" class="notes-button">{NoteCountWithLabel}</a> {/block:NoteCount}This link loads an HTML fragment from Tumblr containing the notes for the post (or a subset thereof). If JavaScript is disabled, the link will instead open the 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 childolelement containing the notes), and.notes-hide(the button that closes the notes container). The style for the notes-container element must be set todisplay: none;initially. If there are 15 or more notes, the button element inherits a class of.fave, which I’ve used to style my notes icon differently for popular posts. Here’s the bare minimum CSS:.notes-container { display: none; } .notes-container ol { list-style: none; }
That’s it. Email me if you have feedback or encounter problems.
