Customise Tumblr's *new* Like Button iFrame {LikeButton}

Question

The new code from tumblr {LikeButton} comes with a very few options: color and size.

It injects an iFrame, which handles the "Like" functionality and provides SVG graphics.

However because of the iframe and cross site scripting policies, it is no longer possible to alter it with css nor to edit its contents.

How can I modify, or insert new code, to use my own Like button sprites or svgs?

Answer 1

Styling a Tumblr Like Button

Sadly, as the OP has stated the Tumblr like buttons have minimal visual options and are hard to target with CSS / javascript. So time for a new idea...

The Idea

We know two things:

Our own Like Button, should visually, be whatever we desire. Text, image, webfont, etc.

The Tumblr Like Button registers a click, and Tumblr does its magic in storing the data.

If we can visually hide the Tumblr Like Button and then place it over our own Like Button, we have a styled, working Like Button!

Theme Markup

Example of the theme markup, the key here is to have a containing element for both Like Buttons, and to make sure the Tumblr Like Button comes before our own Like Button so we can take advantage of the adjacent sibling selector in the css.

<div class="custom-like-button">
  {LikeButton}
  <span class="our_toggle">
    &hearts;
  </span>
</div>

Rendered Markup

Example of the rendered / live code. The Theme Operator {LikeButton} is now a <div> with the class .like_toggle.

<div class="custom-like-button">
  <div class="like_button">
     /* Iframe */
  </div>
  <span class="our_button">
    &hearts;
  </span>
</div>

CSS Magic

The key again is to get the Tumblr Like Button above our Own Like Button.

.custom-like-button {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

/* class for the Tumblr Like Button iframe */
.like_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}
/* Force iframe to fill button */
.like_button iframe {
  width: 100% !important;
  height: 100% !important;
}
/* class for Our Like Button */
.our_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

Tada! You should now have your own Like Button that registers a users like!

You can also style it when hovered:

/* Hover State */
.like_button:hover + .our_button {
  color: red;
}

And when a user has registered a like:

/* Liked State */
.like_button.liked + .our_button {
  background: red;
  color: white;
}

I hope that helps! If you get stuck I left the markup here.

Answer 2

Here's the best possible solution as of right now, with credit to @mikedidthis's post!

Put the like button in a parent, div, li or whatever and call it something like .like. Above the button put the SVG used by Tumblr for the heart icon:

<li class="like">
    <svg width="14" height="14" viewBox="0 0 19 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
        <path d="M14.0425097,0.000920262799 C16.1435097,-0.0400797372 18.8835097,1.28192026 18.9635097,5.36992026 C19.0525097,9.95492026 15.1985097,13.3079203 9.48350967,16.2089203 C3.76650967,13.3079203 -0.0874903349,9.95492026 0.00150966509,5.36992026 C0.0815096651,1.28192026 2.82150967,-0.0400797372 4.92250967,0.000920262799 C7.02450967,0.0419202628 8.87050967,2.26592026 9.46950967,2.92792026 C10.0945097,2.26592026 11.9405097,0.0419202628 14.0425097,0.000920262799 Z"></path>
    </svg>
    {LikeButton size="14"}
</li>

Change <svg width="..." height="..."... and {LikeButton size="..."} to your desired size.

Now just use a bunch of simple CSS

.like { /* Make a parent element */
     position: relative;
}
.like svg path { /* Select your color of choice */
     fill: #563d7c; 
}
.like .like_button { /* Position like button above your custom one */
     position: absolute;
     top: 0;
     opacity: 0;
 }
 .like .like_button.liked { /* Keep the functionality active */
     opacity: 1;
 }

While on it here's how to do the same for the reblog button - since it's not called in an iFrame things are a bit more simple. Put it in a parent div, li or whatever and call it something like .reblog

<li class="reblog">
    {ReblogButton size="14"}
</li>

And the CSS

.reblog svg path { /* Select your color of choice */
    fill: #563d7c;
}

Originally posted here.