나는 이것에 대한 자습서를 http://like-button.tumblr.com에서 만들었습니다. 이 기능을 구현할 때 발생하는 문제를 제거하고 간단한 잘라 내기 및 붙여 넣기를 수행합니다.
은 기능과 마찬가지로 추가하려면 다음 URL을 사용하여 보이지 않는 <iframe>
의 src
속성으로 설정 :
http://www.tumblr.com/<command>/<oauthId>?id=<postId>
<command>
: like
또는 unlike
<oauthId>
: {ReblogURL}
의 마지막 8 자
<postId>
: {PostID}
,
예 :
http://www.tumblr.com/like/fGKvAJgQ?id=16664837215
컷 및 </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 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}
블록 안에 있어야합니다).
코드 :
<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}"></div>
정말 미안 해요하지만 당신은 코드를 자세히 설명해 수 있을까? 무슨 단어를 바꿔야하는지 잘 모르겠다. 또한 코드를 어디에 둘 것인지 혼란 스럽습니다. –