All geek questions in one place

Heart (for example) on the tumblr homepage

Looking at various posts here and google groups on this, I am trying to use a script from the ciceron theme to play a heart button (for example), but so far I have not succeeded.

Below is my code. Did I miss something? Has anyone managed to solve this?

In <head> :

 <script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script> <script type="text/javascript"> $('a.like-link').click(function() { var post = $(this).closest('.post'); var id = post.attr('id'); var oauth = post.attr('rel').slice(-8); var like = 'http://www.tumblr.com/like/'+oauth+'?id='+id; $('#likeit').attr('src', like); $(this).addClass('liked'); return false;}) </script>

In the CSS <head> :

 #likeit {height: 0; width: 0; visibility: hidden;}

In <body> :

 <iframe id="likeit"></iframe> in {Block:post}: <a href="#" class="like-link">Like</a>
+4
source share
1 answer

I updated the Tumblr tutorial about this so that it cuts and pastes: http://like-button.tumblr.com

You are missing the oAuth key. Each message has a unique identifier that must be sent in order to do "Like". You can find it at the end of the {ReblogURL} variable (which is undocumented). These are the last eight characters. In your example, it grabs it from the rel attribute in the message:

 var oauth = post.attr('rel').slice(-8);

Cut and paste the following code into your theme just before </head> . This will give you a favorite button on every post that looks like a heart. Tumblr default heart. It will turn red when you hover over it and when you click it. If you click it again, it will turn gray again and delete “Like”.

 <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> <script> window.onload = function () { 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> image / png; base64, iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA / mJfHAAABH0lEQVQ4y62T30vCUBiGv / 9YuhBLkCA08FdogRFFYFEUhhZNCCQoSESiIOii68pl5qV6s8Eb7 + SMHXNs6S7ejZ3zvA + ccT4BICofvS88dJ7w8vqG8WQC754K17lPjrx3z3l8D4YoVaqIrWbcJNbzaHefNZjfXPdy5b0jsO / IRqMxUpmSBnhz2bx1QL79GPbpEePmzhdSyW8fBDL0SK68HwiGCT2S3NiKREaPzP7QRRNPZSHpwm4kMnqkYbQikdEjZv8HK2ubS4nY75mD6WU8qzeXkrHvToBlWSjuHC4kYo99V8bwBnM0 / iMiz542myq2bSPskcmR / zPos7lvP8Lv / nGd + / N6c2Xq2KcXhiY6qV1rxwotU3n / NHF8fgW + g9hfsHJlJUYljcgAAAAASUVORK5CYII =) important;! <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> <script> window.onload = function () { 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> / + nWLbA6hq + PH // fbW6OogAZ3 + zvByu81t6OU80ea6v / P16 // s9wqboKpyIYPhYeTlDN1abG / wz7HR0JKiQGH3Bz + <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> <script> window.onload = function () { 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> / MjI6OQflxh6EBzvR0Z9o0rCUKVsNA + MuD + / 9PJiSgGHQmPf0 <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> <script> window.onload = function () { 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>

Then cut and paste the following button code into your theme where you want your button to be liked (it should be inside your {block:Posts} ).

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

Source: https://habr.com/ru/post/1390928/

More articles:


All Articles