Tumblr jQuery Like (grabbing from rel)

Question

I coded an HTML5 (boilerplate) theme with masonry and infinite-scroll which so far has worked pretty well. Now I want to include reblog and like buttons on each post. I've tried to add this but for some reason the like button doesn't work.

URL to theme: http://inspiration.patrikarvidsson.com/

In the bottom of my script.js, I added this like-code.

$('a.like').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);
    $(this).toggleClass( 'liked' );
});

Complete scripts.js can be found here: http://static.tumblr.com/e8lbmds/WB5m2q1it/scripts.js

And if needed, here's plugins.js: http://static.tumblr.com/e8lbmds/NDPm14qu6/plugins.js

The last line of the code above makes the link red; which I suppose indicates that the script responds. But no like is generated. Right after the initializing body tag, I have the following code:

<iframe id="likeit"></iframe>

Appertained CSS is the following:

#likeit { display: none; }
.liked, .like:hover { color: red !important; }

Any ideas why it's not working?

Answer 1

Looks like you've got it working, but for future readers I've simplified my like button code to eliminate the confusion most people have with it (the post id) to make it a simple cut and paste. It's available at http://like-button.tumblr.com.

Paste this inside your {block:Posts}{/block:Posts} block immediately after {block:Posts}:

<script>
if ( !document.getElementById( 'my-like-frame' ) ) {

var styles =
      '<style>'
    + '.my-like {'
    + 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAABH0lEQVQ4y62T30vCUBiGv/9YuhBLkCA08FdogRFFYFEUhhZNCCQoSESiIOii68pl5qV6s8Eb7+SMHXNs6S7ejZ3zvA+ccT4BICofvS88dJ7w8vqG8WQC754K17lPjrx3z3l8D4YoVaqIrWbcJNbzaHefNZjfXPdy5b0jsO/IRqMxUpmSBnhz2bx1QL79GPbpEePmzhdSyW8fBDL0SK68HwiGCT2S3NiKREaPzP7QRRNPZSHpwm4kMnqkYbQikdEjZv8HK2ubS4nY75mD6WU8qzeXkrHvToBlWSjuHC4kYo99V8bwBnM0/iMiz542myq2bSPskcmR/zPos7lvP8Lv/nGd+/N6c2Xq2KcXhiY6qV1rxwotU3n/NHF8fgW+g9hfsHJlJUYljcgAAAAASUVORK5CYII=) !important;'
    + 'height:17px;'
    + 'width:19px;'
    + 'cursor:pointer;'
    + 'display:inline-block;'
    + 'vertical-align:top;'
    + '}'
    + '.my-liked, .my-like:hover {'
    + 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAABSklEQVQ4y2P4//8/Awy/O3fu/905c/4/2779/69Pn/4jy8Hwz/fv/z/buvX/vfnz/7+/eBFFDZj4cOXK/8O+Pv+36+rA8W4zs/8Ply1DUXx/4cL/u0yMUdQdCQ76/+nWLbA6hq+PH//fbW6OogAZ3+zvByu81t6OU80ea6v/P16//s9wqboKpyIYPhYeTlDN1abG/wz7HR0JKiQGH3Bz+8+ww0CfKobtMjb6z0ANg+CGgQKPKt50dfnPcL6wkCqGXaoo/8/w5tgxyg3T0wUnYHBiPJuZSZFhF8pK/8NzACjrgKKWHINAOef3168Iw0D429OnGFmKEAZlJVDKR8mbMAyy4XRqClEGnc3J+f/nxw/MjI6OQflxh6EBzvR0Z9o0rCUKVsNA+MuD+/9PJiSgGHQmPf0/KDhw6cFpGAy/OnAAbOibEyf+E1ILAFBjDrchm7KrAAAAAElFTkSuQmCC) !important;'
    + 'height:17px;'
    + 'width:19px;'
    + 'cursor:pointer;'
    + 'display:inline-block;'
    + 'vertical-align:top;'
    + '}'
    + '</style>';
document.head.insertAdjacentHTML( 'beforeEnd', styles );
document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' );
document.addEventListener( 'click', function ( event ) {
    var myLikeLink = event.target;
    if( myLikeLink.className.indexOf( 'my-like' ) > -1 ) {
        var myLikeFrame = document.getElementById( 'my-like-frame' ),
            liked = ( myLikeLink.className == 'my-liked' ),
            command = liked ? 'unlike' : 'like',
            reblog = myLikeLink.getAttribute( 'data-reblog' ),
            postId = myLikeLink.getAttribute( 'data-id' ),
            oauth = reblog.slice( -8 ),
            likeUrl = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + postId;
        myLikeFrame.src = likeUrl;
        liked ? myLikeLink.className = 'my-like'
            : myLikeLink.className = 'my-liked';
    };
}, false );

};
</script>

And paste this inside your {block:Posts}{/block:Posts} block where you want your Like button:

<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}"></div>