How To Add Like Button On Tumblr Blog

Like & Reblog Button Tutorial

Requested by anonymous.

So there are two ways to add like and reblog buttons to your theme. The first is to use Tumblr's built in buttons. The second way is to use your own custom buttons. I'll explain both ways below the cut.

If you don't want to read through this stuff, feel free to go STEAL THE CODE for the demo I made for this. If you want a preview of the demo, GO HERE. (Note, there is a bug in the custom like button in the preview. Because there's two like buttons, it freaks out and the priority goes to the first one. Take out the first like button to see the custom one working properly!)

1. Tumblr's Built-In Buttons

You can find tumblr's built in buttons in their coding directory here. They provide an example of how you can use them. But if that confuses you, just focus on the basic syntax:

In order to place a built-in tumblr Like Button, for example, you simply place {LikeButton} wherever you want it to go. Simple! If you want to change the color or size, you add in an equals sign, then quotation marks around the change, like they demonstrate above.

You can also add styling to them to move them wherever you want. Like so:

I make a CSS class to style the buttons in a list. I add a float, so they can push themselves to the left. The padding to give them space. The display:inline-block just makes sure they're next to each other. And the margin-right just gives them that space in between the two.

In the HTML, it's simply a class overarching two list items! Also note the syntax for the buttons. You can add the color and size variables in there. But note tumblr only supports Grey, White, or Black in that color thing.

This is why people tend to lean towards custom buttons!

2. Custom Buttons

Part 1: Reblog Button

Custom buttons get a little more tricky! Let's start with the reblog button, since it's the most simple. Tumblr has a handy function that you can put in a link URL spot called {ReblogURL}. Like this!

So you can just make a link with whatever you want the reblog button to say, and put that {ReblogURL} in the href slot, which holds the URL the link will travel to. It's that simple! And you can have whatever custom CSS on that button that you want. It looks like this with all my custom CSS to make the box and such. You can examine that in the demo code.

The circular arrow I just got from this massive collection of text symbols.

Part 2: Like Button

The like button is a little weirder. I got my custom like code from this site. And you can see you can do the same thing to the reblog button. Essentially, you're slapping a different like button color on top of the other one and hiding the old one. I'll just show you all the code and explain it afterwards.

Essentially, from what I understand, this is a funky way to edit the like button iframe. An iframe is just a thing that holds data, basically, and that's what the like button is. It holds the data of whether or not something has been liked. So what we do is we overlay the like button with our like class, and slap that thing on top of tumblr's iframe. Then, we use opacity:0 to hide the original like button. But, we want to keep the red color that happens when the post is liked, so that's where that like_button.liked comes in, we set that to 1 once it's been liked. That may not make sense, but hey, it works!

If you want to know the things you need to change, I'll show you that below.

The colors are obvious. You change them to whatever you'd like them to be. But the margins are a little odd. But basically, when you click the button to like the post, the red like button from before that we hid comes back. Sometimes it's perfectly aligned to your custom one, and sometimes it isn't. So you can click the like button to like it and test, and then just move it around on the margin until you get it right. Note that you can only preview it in the actual live blog, not in the customization screen.

All right, I hope that makes sense. If not, hey, I gave you a demo code that you can TOTALLY steal from. I mean it, take it! And if you have any questions, feel free to let me know!

Here's the links again if you don't want to scroll up:

Preview the demo blog!

Steal the demo code!

Request:

Please fill out this form as best as you can to help me determine what kind of theme you'd like. But if you have a set design in mind, skip the questions and just describe it to me! I'll try to match it as best as I can. Any layout drawings would be amazing as well.

#1. Do you have a

theme motif?

Do you have something you want all in your design? For example, if your blog is all about the television show "Spongebob Squarepants", you'd probably want a lot of yellow and squares, right?

Do you want one, two, or three columns? Or the choice to have whichever one you want whenever?

Do you want your posts to be 250, 400, or 500 pixels wide?

How many custom links would you like? Do you want a popup block to reveal more? Or drop down menus?

Would you like them on the sidebar or a render on the side? Also, how big would you like them to be? Medium-sized, huge, or small?

#6. How many, if any,

sidebars

Would you like one sidebar, two? Or not one at all? A header and footer? Just a header? Be creative.

#7. What about your

description

Want it in a long box, wide box, short box, or even a circle? Want there to be a scrollbar for it?

#8. Do you want

infinite scroll

Would you like infinite scroll or pagination? Jump pagination or just buttons?

Would you like a music box? Or monocrhome images or an updates tab?

#10. How would you like to style the

post information

Like/Reblog buttons? Tags to be shown? Would you like it to be on the side, bottom, or show when you hover?

If you can think of anything else that would help get the design you want that would be great. I'm welcome to do as many as people want. If you want to request a page theme, try to fill out as much as possible that fits it. I hope you enjoy my themes!

Also let me know if you want your theme to be a private or public theme! (Only for you or for everyone).

I will send you the details to your theme when it is finished.

Or email me your request:

Email me at zeldacrazey@gmail.com or drop it in the contact form below.

[powr-form-builder id="776c3dda_1558667858"]