Customise Tumblr's *New* Like Button Iframe {Likebutton}

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

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">
    ♥
  </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">
    ♥
  </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.

Tumblr - Missing Follow, Dashboard & Customize control buttons - not showing in top right corner

Solution

After some researching and asking around (thanks to @PHPology), I figured out that this was an issue because my blog was marked as "private" (password protected) in tumblr settings.

Make sure your blog is not password protected, else the buttons will not show/work as expected.

Also ensure your HTML is valid and correct and there are no javascript errors (tumblr loads these buttons in dynamically via javascript after page load - Javascript errors will stop the execution of this script and others).

---

Customizing the like button hover

A great post here on how to apply hover effects to the like and reblog buttons within the iframe.

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

Can I mimic Tumblr interaction such as reblog and like via their API?

In order to use the Follow, Reblog, and Like features of the API you will need an authenticated user, which requires the end user to grant "access" to your API application.

In other words, yes, such a "pop up" will appear asking the user to give your site permission to "read and write" to their Tumblr account.

As workarounds, that are not quite fully integrated but will usually work OK:

To add a Follow link, include a link to something like:

http://www.tumblr.com/follow/{Blog Name}

To include a Reblog link, include a link something like:

http://www.tumblr.com/reblog/{Post ID}/{Reblog Key}

The "reblog key" can be obtained in the post data obtained from the API.

As for the Like button -- you're just never going to get that to work without an authenticated user (ie, going through the "pop up" and obtaining private/public OAuth keys to access the user's tumblr account)

Edit:

However, remember that inside your Tumblr theme code you can use {LikeButton}. This will render an <iframe> element provided by Tumblr that implements the "Like" feature. It would be possible to load pages from your Tumblr with AJAX and parse out these <iframe> elements and insert them where needed dynamically.

element on main Tumblr page ONLY - works but breaks control buttons

Your HTML is invalid. You can't have more than one body element on a page, and they can't be wrapped in divs. Remove the opening and closing body elements from your CustomHTML block. It's important that the tumblr_controls iframe loads (the join / follow buttons in the top right corner), otherwise the like buttons won't work -- when your HTML is invalid the iframe might not load correctly. Fix that and all should be good.

---

Related Topics