Question

So, I'm doing a one page site where a Tumblr should be included. I figured there were two ways to go to achieve this.

  1. Iframe
  2. Tumblr API

Since Iframe feels like bad practice I figured I'd make use of the Tumblr API. With an API key I can fetch content from the Tumblr and put it on the site and mimic the look and feel of a Tumblr blog.

Now I've reached the point where I want to include functionality such as Follow, Reblog and Like. These are all possible using the API and Oauth as auth method, BUT, what I'm wondering now, as I want to mimic the look and feel of a Tumblr blog entirely, I really don't want a popup to appear when interacting with the "Tumblr" I've got on my one page site (when using Oauth stuff via Twitter you got this popup that asks you to allow my permission before anything happens).

Will this be the case? If so, is my only resort to an Iframe to include a Tumblr feed in my site?

Was it helpful?

Solution

In order to use the Follow, Reblog, and Like features of the API you will need an authenticated user, which requires the end user to grant "access" to your API application.

In other words, yes, such a "pop up" will appear asking the user to give your site permission to "read and write" to their Tumblr account.

As workarounds, that are not quite fully integrated but will usually work OK:

To add a Follow link, include a link to something like:

http://www.tumblr.com/follow/{Blog Name}

To include a Reblog link, include a link something like:

http://www.tumblr.com/reblog/{Post ID}/{Reblog Key}

The "reblog key" can be obtained in the post data obtained from the API.

As for the Like button -- you're just never going to get that to work without an authenticated user (ie, going through the "pop up" and obtaining private/public OAuth keys to access the user's tumblr account)

Edit:

However, remember that inside your Tumblr theme code you can use {LikeButton}. This will render an <iframe> element provided by Tumblr that implements the "Like" feature. It would be possible to load pages from your Tumblr with AJAX and parse out these <iframe> elements and insert them where needed dynamically.

OTHER TIPS

I came here looking here with the same problem.

The solution that adidas are using for the like button is that they are fetching the like button code via Ajax, and then dropping it in on post hover.

They then register it on the dom using the tumblr custom theme API:

https://www.tumblr.com/docs/en/custom_themes#like_and_reblog_buttons

Tumblr.LikeButton.get_status_by_post_ids([n,n,n])

Request Like status for individual posts. Takes an array of post IDs.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top