0

HTML5（ボイラープレート）テーマを石積みと無限スクロールでコーディングしましたが、これまでのところかなりうまく機能しています。今度は、各投稿にreblogやいいねボタンを含めたいと思います。これを追加しようとしましたが、何らかの理由で「いいね」ボタンが機能しません。

テーマのURL：http: //inspiration.patrikarvidsson.com/

script.jsの下部に、この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' );
});

完全なscripts.jsはここにあります： http ：//static.tumblr.com/e8lbmds/WB5m2q1it/scripts.js

そして、必要に応じて、plugins.jsがあります：http ：//static.tumblr.com/e8lbmds/NDPm14qu6/plugins.js

上記のコードの最後の行は、リンクを赤にします。これは、スクリプトが応答することを示していると思います。しかし、いいねは生成されません。bodyタグを初期化した直後に、次のコードがあります。

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

関連するCSSは次のとおりです。

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

それが機能しない理由はありますか？

4

2 に答える 2

0

うまく機能しているように見えますが、将来の読者のために、ほとんどの人がそれ (投稿 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>
于 2012-04-25T04:12:22.567 に答える
0

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

上記のコードで明らかにpost-を削除すると、最終結果のリンクが正しくなりました。そして好きは今働く。

于 2012-04-22T09:35:41.913 に答える