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 10 months ago from matthewb
155 notes
  1. number13 reblogged this from matthewb
  2. duongnv reblogged this from matthewb
  3. dawnowar reblogged this from nonlinearmind and added:
    nonlinearmind’s instructions I’ve been meaning to figure out how to do this. Thanks!
  4. wyliefisher reblogged this from matthewb
  5. nonlinearmind reblogged this from matthewb and added:
    action. matthewb:
  6. 102828 reblogged this from matthewb and added:
    matthewb I just added...my site. Feedback would...nice. I’m...
  7. twink reblogged this from makou
  8. makou reblogged this from matthewb
  9. nttm reblogged this from bip and added:
    ¡Sus deseos son órdenes e-amigo! ya incluí una “traducción” de las instrucciones y en el fondo agregué un ejemplo de CSS...
  10. bip reblogged this from mattabad and added:
    También quiero que esté en la wiki, yo de momento no entiendo algunos pasos como los de la CSS que no están explicados...
  11. mattabad reblogged this from nttm
  12. nttm reblogged this from matthewb and added:
    Hoy me topé con este post de matthewb En el habla de cómo hacer para mostrar los “Tumblr Notes” en nuestra página...
  13. spreadyourlove reblogged this from matthewb
  14. rnyhrt reblogged this from handa
  15. joker1007 reblogged this from handa
  16. handa reblogged this from matthewb
  17. davesparks reblogged this from matthewb
  18. saitamanodoruji reblogged this from cxx
  19. trumcgowan reblogged this from matthewb
  20. pdl2h reblogged this from cxx
  21. reblogcentral reblogged this from matthewb
  22. cxx reblogged this from matthewb and added:
    画像でなくJavaScriptでやるのでスマート、後で導入するかも
  23. lenier reblogged this from matthewb and added:
    new theme soon too.
  24. matthewb posted this