回复:主页上的Tumblr“like-heart-button”脚本

时间:2011-11-17 11:42:00

标签: html button tumblr social-media-like

我尝试使用Nara的question上发布的这个编码,但我不确定我是如何做它的HTML部分的。我有点认为它必须在<a href=""></a>标签中,但不确定我是否需要添加类或ID。我现在一直在玩编码一段时间,但仍然没有想到它。如果有人能向我解释一下,我会非常感激。这真的意味着很多。

1 个答案:

答案 0 :(得分:-2)

我有一个关于此的教程:http://like-button.tumblr.com。随着时间的推移,它已经更新,以消除人们实施此问题所带来的问题。它现在是一个简单的剪切和粘贴。

要添加Like功能,请使用以下网址并将其设置为不可见src的{​​{1}}属性:

<iframe>
  • http://www.tumblr.com/<command>/<oauthId>?id=<postId> <command>like
  • unlike<oauthId>
  • 的最后八个字符
  • {ReblogURL}<postId>

示例:

{PostID}

http://www.tumblr.com/like/fGKvAJgQ?id=16664837215 之前,将以下代码块剪切并粘贴到您的主题中。这将在每个帖子上给你一个Like按钮,看起来像默认的Tumblr灰色心脏。当您将鼠标悬停在它上面并单击它时,它将变为红色。如果再次单击它,它将再次变为灰色并删除Like。

代码:

</head>

然后将以下按钮代码剪切并粘贴到您想要类似按钮的主题中(这必须位于<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 myLike = event.target; if( myLike.className.indexOf( 'my-like' ) > -1 ) { var frame = document.getElementById( 'my-like-frame' ), liked = ( myLike.className == 'my-liked' ), command = liked ? 'unlike' : 'like', reblog = myLike.getAttribute( 'data-reblog' ), id = myLike.getAttribute( 'data-id' ), oauth = reblog.slice( -8 ); frame.src = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id; liked ? myLike.className = 'my-like' : myLike.className = 'my-liked'; }; }, false ); }; </script> 块内)。

代码:

{block:Posts}