I'm working on a Tumblr theme right now, but my Tumblr blog has its own unique domain. This makes some of Tumblr's native features and buttons inaccessible to me. AKA: none of the usual buttons on the top-right of a blog's webpage for "Liking" and "Reblogging" posts will show up. This is the reason I'm using custom "Like Button" and "Reblog Button" SVG's that show up underneath of individual posts on my blog's domain instead. Using pre-made Javascript I found online, and some custom CSS to style and position these SVG's over the iframes of where the usual Like and Reblog Buttons should be.
This is working great right now. The code is able to call the necessary links to let users like and reblog any posts after clicking either one of these SVG's, and the user gets redirected to the Tumblr dashboard url of said post to interact with it accordingly. However, I've noticed that the "Like Button" and the "Reblog Button" SVG's will not change and remain a different color even after they've been clicked and interacted with from a unique domain blog, to actually signify what post a user has liked and reblogged. This does work on non-unique domain Tumblr blogs though, for example: the SVG icon for the "Like Button" will remain a different color after it's been clicked. But I was wondering how to modify my current code to allow for the color change of these two SVG icons on a unique domain blog too, if possible. So that when a user clicks on either one of them, the SVG icon color will change and remain different until that user has clicked on the icon again to "Unlike" a post, or "Un-reblogs" a post too. Here is my code:
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 = 'https://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
liked ? myLike.className = 'my-like' : myLike.className = 'my-liked';
};
}, false );
}; /* like and reblog buttons */
.controls .my-like .like_button iframe {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
z-index:2;
opacity:0;}
.svg {
cursor: pointer;
height: 22px;
width: 22px;
opacity:1;
padding:1px;
overflow:visible;
display:inline-block;
vertical-align:top;}
.controls a {
fill: #000;
position:relative;
display:inline-block;
overflow:visible;
/* top right bottom left */
padding:5px 0px 10px 0px;
margin:-38px 35px 0px 0px;
height:22px;
width:22px;}
.controls .my-like:hover {
cursor: pointer;
fill: #ec5a5a;}
.controls .reblog {
opacity:1;
/* top right bottom left */
margin:-37px 5px 0px 0px;}
.controls .reblog:hover{
cursor: pointer;
fill: #ec5a5a;}
.controls .reblog svg {
height:22px;
width:22px;
margin-top:1px;}
.controls .my-like .liked + .svg {
opacity:1;}
.controls .my-like .liked + .svg path {
cursor: pointer;
fill: #ec5a5a;}
.controls .my-like {
cursor: pointer;
background-image: url() !important;
/* top right bottom left */
margin:-38px 35px 0px 0px;
height:22px;
width:22px;
display:inline-block;
vertical-align:top;}<!-- like + reblog button icons -->
<div class="controls">
<a href="{ReblogURL}"
target="_blank"
class="reblog"
style="float:right;"
title="reblog">
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 576 512">
<path d="M272 416c17.7 0 32-14.3 32-32s-14.3-32-32-32H160c-17.7 0-32-14.3-32-32V192h32c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-64-64c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l32 0 0 128c0 53 43 96 96 96H272zM304 96c-17.7 0-32 14.3-32 32s14.3 32 32 32l112 0c17.7 0 32 14.3 32 32l0 128H416c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8l-32 0V192c0-53-43-96-96-96L304 96z"/>
</g>
</g>
</svg>
</div> <!-- <div class="svg"> -->
</a>
<a class="my-like"
style="float:right;"
title="like"
data-reblog="{ReblogURL}"
data-id="{PostID}">
{LikeButton}
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"/>
</g>
</g>
</svg>
</div> <!-- <div class="svg"> -->
</a>
</div> <!-- <div class="controls"> -->Unfortunately, it's a bug from Tumblr 🥲
It has been an issue for a long time. As mentioned in this post (under the "Upcoming" section), from staff here, it seems they are still working on fixing a longstanding issue that prevents users from liking posts on blogs using custom domains.
But apparently, it's still happening. I highly recommend you send an issue to Tumblr Support so they can prioritize checking that again.
It's been an issue for me too, as someone with a custom domain where the follow/like/reblog buttons don't work as they do on non-unique domain Tumblr blogs.