Display Tumblr Posts From Any User - jQuery TumblrPosts

The TumblrPosts jQuery plugin fetches and displays the latest posts from any Tumblr user/blog.

You can specify the type of Tumblr post to display: All, Video, Text, Photo, and Audio.

You can also specify the number of Tumblr posts to display per page. Specific posts and tagged posts are supported as well.

Type the Tumblr ID, then press the Press button and done.

See also:

• Add Instagram Photos To Your Website Without API - jQuery instagramFeed

How to use it:

1. Include the jQuery TumblrPosts plugin's files after you've included the jQuery library.

<link rel="stylesheet" type="text/css" href="tumblr.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="TumblrPosts.js"></script>

2. The plugin also requires the jQuery BBQ plugin to handle URL parameters.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ba-bbq/1.2.1/jquery.ba-bbq.min.js"></script>

3. Create an empty container to place the Tumblr posts.

<div id="images"></div>

4. Create navigation controls for the post list.

<div id="navigation">
  <a id="first" href="#first" class="navbutt">&laquo; First</a>
  <a id="prev" href="#prev" class="navbutt">&lt; Previous page</a>
  <a id="next" href="#next" class="navbutt">Next page &gt;</a>
  <a id="last" href="#last" class="navbutt">Last &raquo;</a>
</div>

5. Create an HTML form where the users are able to change the Tumblr ID, Post Type and other options.

<div id="form">
  <div id="showform"><a href="#showform">Show input form</a></div>

  <form id="inputform">
    <label for="tumblrId" class="main">Tumblr ID:</label>
    <input id="tumblrId" class="main" name="tumblrId" size="8" value="fer1972">
    &nbsp;
    <input id="fetch" class="main" type="submit" value="Fetch!">
    &nbsp;
    <a id="toggleadvopts" href="#toggleadvopts">Toggle advanced options</a>

    <div id="advoptions">
        <label for="postId">Post ID:</label>
        <input id="postId" name="postId" size="4">
        &nbsp;
        <label for="tagged">Tagged:</label>
        <input id="tagged" name="tagged" size="4">
        &nbsp;
        <label for="start">Start:</label>
        <input id="start" name="start" value="0" size="2">
        &nbsp;
        <label for="num">Posts:</label>
        <input id="num" name="num" value="10" size="2">
        <div class="grey">
          <label>Type:</label>
          <!-- text, quote, photo, link, chat, video, audio -->
          <input id="type_all" name="ptype" value="" type="radio" checked="checked"><label for="type_all" class="plain"> All</label>
          <input id="type_text" name="ptype" value="text" type="radio"><label for="type_text" class="plain"> Text</label>
          <input id="type_photo" name="ptype" value="photo" type="radio"><label for="type_photo" class="plain"> Photo</label>
          <input id="type_video" name="ptype" value="video" type="radio"><label for="type_video" class="plain"> Video</label>
          <input id="type_audio" name="ptype" value="audio" type="radio"><label for="type_audio" class="plain"> Audio</label>
        </div>
    </div>
  </form>
</div>

---

This awesome jQuery plugin is developed by KimmoHernborg. For more Advanced Usages, please check the demo page or visit the official website.