Creating a Tumblr timeline

Credit: Mashable: Bob Al-Green

I have been using Tumblr on and off for years.  I created my account around 2007 when David Karp launched the platform.   I was fascinated then with the concept - create anything was the slogan - and the technology. Tumblr makes it easy for a blogger to create multi modal posts with childlike ease.   I also like how it does not pose a hard limit on the amount of text content you can place inside a post too.

Like most social media platforms, you can embed a Tumblr post within a web page using embed HTML code.  And also like most social media platforms, Tumblr provides an API that allows third party developers to create software that interacts with the Tumblr platform.

Tumblr currently has two versions of their API - version 1 and 2.   Version 2 provide a rich set of capabilities, and supports various scripting languages.  That said I found the older API Version 1 to be useful as well.

Version 1 is a straightforward Javascript based API.  It does not require any client authentication to the platform, either.  I found both characteristics ideal for using it in web browsers. I use Version 1 to embed a timeline of Tumblr blogs in static webpages.  By doing so, I provide a Tumblr's blogging utility to static websites.

Tumblr blogs support hashtags, and its Version 1 API provides an option to return posts that only contain specified hashtags.   Coupled with additional Javascript logic, it is possible to create a whitelist / blacklist function that allows specific blog content to be embedded in webpages.

The Javascript code is hosted on GitLab.com. The code consumes the result of the API v1 call, then proceeds to build embed codes from the post information contained in the result.

The code is object based. You create an instance by calling a constructor, in the HTML HEAD section, with a few defined options:

• debug is a boolean flag which toggles verbose debugging code to the browser console,
• blog_id is the Tumblr blog unique identifier,
• limit is the maximum number of posts embedded in the page,
• blacklisted_hashtags is a list of hashtag strings to filter out,
• top_dom_element_id is the HTML element id value under which to append the posts,
• fancy_posts is a boolean flag to use the Tumblr returned iframe (1) or have the javascript build its own native HTML code (0)

To embed the posts within the HTML body, you need to:

1. create a HTML DIV element with a ID attribute, and
2. give the ID a unique name within the HTML document, and
3. ensure the ID name is specified as a value associated with the top_dom_element_id key in the object's constructor call, then
4. embed the following Javascript in the HTML BODY (ensure the HTML DIV name is used in the getElementById call)

If you want to see a website that contains two instances of embedTumblrPosts, head over to srrpnj.org