Я написал учебник Tumblr по этому поводу: http://like -button.tumblr.com
Чтобы сохранить лайк на сервере, вы используете следующий URL и задаете его как атрибут src невидимого <iframe>:
http://www.tumblr.com/<command>/<oauthId>?id=<postId>
- команда:
like или unlike
- oauthId: последние восемь символов
{ReblogURL}
- postId:
{PostID}
* * 1 022 Пример: * 1 023 *
http://www.tumblr.com/like/23err8u4?id=844392923
Вырежьте и вставьте следующий блок кода в тему непосредственно перед </head>. Это даст вам кнопку «Мне нравится» на каждом посте, которая выглядит как серое сердце Tumblr по умолчанию. Он станет красным, когда вы наведите на него курсор мыши и при нажатии на него. Если вы щелкнете по нему еще раз, он снова станет серым и удалит отметку «Нравится».
<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>
Затем вырежьте и вставьте следующий код кнопки в свою тему там, где вы хотите, чтобы была кнопка «Мне нравится» (она должна быть внутри вашего блока {block:Posts}).
Код:
<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}"></div>