Tumblr Integration

Theme Support

For Tumblr blogs, go into "Customize Theme" and use "Edit HTML" to edit your theme's template. Drop your ReadSocial code in just before the closing body tag. In your RS API configuration block, set the container property to a selector that identifies your content block. On Tumblr, this will usually be '.post-body' or '#posts.' If in doubt, you can use document.body instead.

Tumblr integration may not work across all Tumblr themes. But experienced hackers can find a way to get ReadSocial working on just about all of them.

We hope to present a list of working Tumblr integrations here soon.

For now, here are a few tips:

Left-Aligned Overlays Menu

By default, the Overlays menu is right-aligned, fixed at the top. For Tumblr, this can create a conflict with the blog controls on the upper right. However, the styling can be selectively overridden.

Add the following style block in the of your theme in order to left-align the Overlays menu:

Advanced Example

The following snippet shows how to integrate the ReadSocial API on a complex custom theme.

Add the following scripts after all of your other scripts in the theme:

Note the setTimeouts -- this is an unfortunate requirement for some conflicts that could arise with other scripts on the page. It seems to work, but we wish there was a more elegant, and instant way to load features on Tumblr.

In our next release of the API, we plan to add some calls that allow better, easier customization of your group tag lists (the Overlays menu). For now, the hack above shows how to add your own custom items to the menu after the library has completed its initialization. Again, with the setTimeouts ... argh!

We'd like to hear from you if you're doing a Tumblr integration -- let us know how it goes and let us help if we can!