Full View >>

jquery.ui.tumblr.rss

Tumblr RSS jQuery Plugin

The Tumblr RSS jQuery plugin makes it easy to retrieve RSS information from Tumblr and display it on a page using all client side code.  The plugin makes a request to Tumblr by way of JSONP, by default applies a template to the retrieved content, then injects the content into the context element.

Download The Plugin

Download Plugin Version 1.1

Getting Started

  1. Make sure you have jQuery installed and working.
  2. Download the plugin and place it in your scripts directory.
  3. Include the plugin script and start using it.
  4. See examples below.
<script language="javascript" type="text/javascript" src="script/jquery.ui.tumblr.rss.js"></script>

Examples

Example 1

Populate an element with 5 of a user’s tumblr posts.

<div id="myUserPosts" />
$(function(){
    $("#myUserPosts").tumblrRss({username: "godlikemouse", limit: 5});
});

Example 2

Populate all elements of a specific class with the user’s tumblr posts by specifying element attributes.

<div class="userPosts" tumblr-username="godlikemouse" tumblr-limit="5" />
$(function(){
    $(".userPosts").tumblrRss();
});

API Options

Option Attribute Equivalent Description
username tumblr-username (Required) The Tumblr username from which to pull the tumblr posts.
template tumblr-template The template string which will be used to transform each entity. Default is $.fn.tumblrRss.defaultTemplate.
context n/a – uses current $this The content target or content element to be populated. Default is null.
offset tumblr-offset The zero based starting offset to be used when retrieving tumblr posts. Default is 0.
limit tumblr-limit The maximum count or limit of tumblr posts to retrieve. Default is 25.
tagged tumblr-tagged The tag to filter content by. Only entries matching the tag specified will be returned. Default is null.
url tumblr-url The url used to retrieve tumblr posts. Default is http:// + options.username + .tumblr.com/api/read/json.
callback n/a The callback function to be use as an override when retrieving tumblr posts. Default is null, internal template engine is used.
Full View >>

12 Responses to “jquery.ui.tumblr.rss”

  1. Sahaj Says:
    August 6th, 2011 at 10:00 am

    Very cool script, was looking for something like it. I’m only wondering if it could be possible to limit the numbers of characters within the regularBody class?

  2. GodLikeMouse Says:
    August 8th, 2011 at 4:36 pm

    Sure, you can add your own callback, then you can do a character limit on the body text. Easiest way is to copy the existing default callback, then modify it to suit your needs.

  3. Alexis Says:
    November 3rd, 2011 at 9:59 am

    ¿Hay algun demo para descargar? Es que no me funciona xD

    Salu2

    (download of demo ?)

  4. GodLikeMouse Says:
    November 3rd, 2011 at 5:45 pm

    Lo siento pero no. ¿Puedes compartir el código fuente de mí? Entonces puede ser capaz de ayudar.

  5. stereograffiti Says:
    November 13th, 2011 at 4:38 pm

    Hi,

    This is awesome next work. Is there a way to display only posts of a certain tag? I’m not sure if that’s what you’re implying when you say “the user’s tumblr posts by tag parameters”, but that would be amazing if there was.

    Thanks

  6. GodLikeMouse Says:
    November 14th, 2011 at 9:57 pm

    Hi stereograffiti, actually what I meant by “the user’s tumblr posts by tag parameters” is by using the actually tag/element parameters/attributes. For example element attribute tumblr-username=”username”. I’ll update the entry to reflect better wording. As for showing only specific tagged entries, you could filter based on tags by adding your own callback and then matching on the tags array. Take a look at the ajax call in the source to give you an idea of what’s going on.

  7. stereograffiti Says:
    November 17th, 2011 at 1:18 am

    Thanks for your response but I’m not sure I understand still.

    I’ve had a look at the ajax call, but my knowledge of javascript isn’t advanced enough to create a whole new call for tagged posts. I know it would start something like:

    $.getJSON(“http://{Name}.tumblr.com/api/read/json?tagged=’[WHATEVER TAG YOU SPECIFY]‘&callback=?”, function(data) {
    // Rest of code here…
    });

    but I don’t know what else would you come. Would you be able to help me out a bit more? Thanks very much in advance.

  8. GodLikeMouse Says:
    November 18th, 2011 at 6:23 pm

    Hi stereograffiti, I’ve added a tagged parameter and updated the source code to version 1.1 to support it. The documentation has also been updated. Let me know if you have any problems.

  9. stereograffiti Says:
    November 19th, 2011 at 7:35 pm

    GodLikeMouse, you are truly Godlike.

    {thanks:many;}

  10. GodLikeMouse Says:
    November 20th, 2011 at 8:47 am

    Aw shucks, you’re welcome :)

  11. stereograffiti Says:
    November 29th, 2011 at 3:56 pm

    This code is working really great for me. Just can’t seem to get AddThis buttons to show up… Do you have any idea why this would be? Where have you got your social buttons from may I ask?

    Thanks again.

  12. GodLikeMouse Says:
    November 29th, 2011 at 8:29 pm

    I’m not sure why that wouldn’t be working, I don’t use AddThis. I use social widgets.

Leave a Reply