Tumblr Pin It Button: Install Guide

Pinning just became much easier with the unveiling of the Tumblr Pin It Button plugin.

While Pin It buttons are nothing new to most pinners, adding the Pin It button to your Tumblr site just became a whole lot easier thanks to Pinterest’s new-and-improved Pin It buttons for Blogger, Wix, Tumblr and WordPress. In this blog, we walk you through the three simple steps to installing your very own Tumblr Pin It button.

Step 1: Add the Right JavaScript

Before adding the Pin It button to your post, you first need to make sure the HTML contains a small JavaScript code. To do this, click “Edit HTML” from the Customize menu, scroll to the bottom of the code and look for a line containing “pinit.js”. If you don’t see it, just copy and paste this before </body>:

<script type=”text/javascript” async src=”//assets.pinterest.com/js/pinit.js”></script>

Once the text is added and saved, your code will look like this:

Step 2: Add the Pin It Code

Once the JavaScript is in place, head back to the “Edit HTML” from the Customize menu on a given post. Scroll to the bottom of the code (where the previous JavaScript is placed) and add “data-pin-hover=”true”” to the code before “src=”, so it reads:

<script type=”text/javascript” async data-pin-hover=”true” src=”//assets.pinterest.com/js/pinit.js”></script>.

Your code will then look like this:

Step 3: Save and Verify

Once you’ve added the code, click save and head over to your blog. Once you’re there, hover your mouse over the image and you should see a “Pin It” button appear in the top left:

Happy pinning!

Not on Tumblr? Learn how to add the Pin It button to WordPress.

Not on WordPress? Learn how to add the Pin It button to Blogger.

Not on Blogger? Learn how to add the Pin It button to Wix.