1

I've seen two sites in the wild which manage to get Like and Reblog buttons on their homepages via hacks.

This seems to be the best one to reference: http://cicerontheme.tumblr.com/

Somehow, they manage to get the reblog URL, how, i have no idea. I've been rummaging through their code and all I find is this for the like button:

$('a.likeLink').click(function() {
    var post = $(this).closest('.post');
    var id = post.attr('id');
    var oath = post.attr('rel').slice(-8);
    var like = 'http://www.tumblr.com/like/'+oath+'?id='+id;
    $('#likeit').attr('src', like);
});

It's discussed a little in this Stack overflow discussion but again, does not get to the crux of the matter, how the heck to get the reblog url.

I've gone through the script resources and havent found any personal scripts, just scripts from tumblr, my chrome extensions, etc. Where are they getting it from?!

In the "like" code pasted above, they get the post ID easily enough, you just have to use Tumblrs {Permalink}, but the reblog url is taken from the rel attribute.

Hoping someone can help!

Thanks.

Community
  • 1
  • 1
RGBK
  • 2,048
  • 5
  • 35
  • 55

4 Answers4

4

View the Source code at: http://cicerontheme.tumblr.com/

1. $('a.likeLink').click(function() {
2.     var post = $(this).closest('.post');
3.     var id = post.attr('id');
4.    var oath = post.attr('rel').slice(-8);
5.    var like = 'http://www.tumblr.com/like/'+oath+'?id='+id;
6.    $('#likeit').attr('src', like);
7. });

Explanation of the code:

  1. Add an event handler to the anchor with class likeLink
  2. Uses the JQuery .closest method to find the closest element with class post (which, in fact, is an anchor, see source)
  3. Get the ten-digit tumblr ID from the ID attribute of the anchor (using .attr('id')
  4. Get the rel attribute of the anchor, and use .slice(-8) to get the last 8 characters
  5. Create link
  6. Set the src attribute of the <iframe> with ID likeit (see source). This causes a request to http://www.tumblr.com/like/..... Hack?
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • I understand everything above, it's more how they are getting the rel attribute to equal the reblog URL. Interesting with the frame hack. I'll chk that out now. Thx – RGBK Oct 08 '11 at 19:04
  • Beware of "frame hacking". The framed page can contain ``. – Rob W Oct 08 '11 at 20:50
  • Can you explain that further? What could they do with that? – RGBK Oct 09 '11 at 00:04
  • They parent who include that frame will be unloaded, and be replaced by the framed window instead. – Rob W Oct 09 '11 at 08:12
3

Pretty sure this isn't a JS thing — when you view the source of the site you linked, the reblog links are already there (meaning, they aren't being dynamically inserted).

I think the the Ciceron theme is actually generating reblog links - have you tried adding:

<a href="{ReblogURL}">Reblog</a>

...to your theme?

Doug Avery
  • 1,057
  • 1
  • 8
  • 14
  • Yeah that's the thing, how are they already there? I'll try both your suggestions in a bit. A friend recommended it was through their API though. I'll report back and let u both know. Thx. – RGBK Oct 08 '11 at 19:01
  • Ciceron is a tumblr theme, and tumblr themes have {tags} which are converted to tumblr data. Another option I've found is Reblog – Doug Avery Oct 08 '11 at 19:06
  • Fas.Cin.Ating. {ReblogURL} is not documented in Tumblr's own documentation. What is UP with these guys?! It's a total uphill battle doing tumblr themes. They love to help out. Can't figure this company out! I tested it and it totally works. How did you know about that variable btw? Thanks, will get back to you. – RGBK Oct 08 '11 at 19:11
  • 1
    I couldn't find it in their docs, either - crazy. I just googled for a bit and someone stranger suggested it. Glad it worked! – Doug Avery Oct 08 '11 at 19:12
1

From your tumblr dashboard, each post has a 'reblog' icon. Surely if you click this, that post's reblog url will appear in the addres bar? Of course, this means adding the url manually for each post, but it's the only alternative I've found to the default tumblr controls.

'Follow' and 'Dashboard' are bog standard a href commands, but I'm still looking for a way to have a simple text link for the 'like' functionality, so that I can do away with the default controls altogether.

Graham
  • 11
  • 1
1

The use of the "reblog key" is sanctioned by Tumblr, and encouraged in some developer situations just like the ones that you have mentioned.

Tumblr has an API and Internal Theme Development Options to utilitze the reblog key. It's a neat trick, but to be clear it's not a hack, as Tumblr does intend, encourage, and hope that this tool is used and helpful for everyone.

See the specific API article on "reblog key" post usage: https://www.tumblr.com/docs/en/api/v2#reblogging

When you use the Tumblr API to post programmatically to your Tumblr blog, you are given a response with the "reblog key". You can create a script that could display a reblog url of your own tumblr post, instead of a share button that would create a new post. This could help you localize on tumblr to your own source, and send better "Canonical Link" power for SEO.

In themes internal to Tumblr, you could use {ReblogURL} to display the reblog url, or create a like button.

There are potentially a lot of ways you can use this properly, but there are also a lot of ways that are not allowed, even if it's and easy or obvious thing you "could" to do. Most of all, be nice to other users and don't do something other users wouldn't like (hidden clicks, etc).

You can make yourself aware of Tumblr Terms of Service here: https://www.tumblr.com/policy/en/terms-of-service

I mentioned the API which has it's own little section of rules, it's linked within the Terms of Service. You can read the Tumblr Application Developer and API License Agreement: https://www.tumblr.com/docs/api_agreement

Turlur
  • 11
  • 2