Tumblr jQueryのような（relから取得）

Question

私はhtml5（定型句）のテーマを石工と無限スクロールでコーディングしています。今、私はそれぞれの投稿にreblogとlikeボタンを入れたいと思っています。私はこれを追加しようとしましたが、何らかの理由でボタンのように機能しません。テーマに

URL：私のscript.jsの底にhttp://inspiration.patrikarvidsson.com/

は、私はこのようなコードを追加しました。

$('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'); 
}); 

完全scripts.jsがここで見つけることができます： http://static.tumblr.com/e8lbmds/WB5m2q1it/scripts.js

、必要であれば、ここにplugins.jsです：http://static.tumblr.com/e8lbmds/NDPm14qu6/plugins.js

上記のコードの最後の行はリンク赤になります。私はスクリプトが応答することを示していると思います。しかし、全く同じように生成されません。

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

すべてのアイデアは、なぜそれが機能していない：

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

Appertained CSSは以下の通りです：右初期化bodyタグの後に、私は次のコードを持っていますか？

Answer 1

これは機能しているようですが、将来の読者のために、私はボタンのコードを単純化して、ほとんどの人がそれを持っている（投稿id）混乱を取り除き、簡単なカットアンドペーストにします。それはhttp://like-button.tumblr.comで入手できます。

すぐ{block:Posts}後に{block:Posts}{/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> 

をそして、あなたはあなたのようにボタンが欲しいあなたの{block:Posts}{/block:Posts}ブロック内でこれを貼り付けます。

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

Answer 2

jQueryによって生成されたコードを分析すると、非常に簡単な修正となりました。

<article{block:Date} id="post-{PostID}"{/block:Date} class="post type-post {PostType} hentry entry" rel="{ReblogURL}"> 

これには、明らかに、上記のコードで後を除去すると、最終結果リンクが正しい作らIFRAMEのSRC

http://www.tumblr.com/like/O0TzjAHv?id=post-21555443705

には次のリンクを生成しました。好きになって今働きます。