confessions of a nonlinearmind
How to add your notes onto your own tumblr page

View my page to see in action.

matthewb:

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:

  1. 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”.

  2. 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.

  3. 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.)

  4. Near the Notes link, add an empty <div> as follows:

    <div class="notes-container" id="notes-{postID}"></div>

  5. 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.

Reblogged 1 year ago from matthewb
172 notes
  1. pipco reblogged this from gkojay
  2. gkojay reblogged this from handa
  3. number13 reblogged this from matthewb
  4. duongnv reblogged this from matthewb
  5. dawnowar reblogged this from nonlinearmind and added:
    nonlinearmind’s instructions I’ve been meaning to figure out how to do this. Thanks!
  6. wyliefisher reblogged this from matthewb
  7. nonlinearmind reblogged this from matthewb and added:
    action. matthewb:
  8. teleute reblogged this from matthewb