Add a Pinterest “Pin It” Button to Your Tumblr Posts

Disclaimer: I don’t really recommend this anymore. I haven’t had the time to try and make this work better, but it’s kind of buggy and won’t work all the time. I say go ahead and try to follow the steps below. It will probably work but like I said, kind of buggy. If you have a found a better way to do it or realize errors in my approach, please feel free to comment or talk to me on tumblr.

pin it

Before reading: there are a couple problems with this Pinterest and Tumblr integration. It only works on image post types (as opposed to link, quote, video, etc.) on tumbrl. The Pinterest button will show on every post you make, but it will only work if there is a single image associated with the post in order for the {PostURL-500} shortcode to work.

Nonetheless, here is a way to make it work:

  1. Get the “Pin-it” button code from Pinterest. It’s pretty far down the page.
    • For the first URL field just enter your website URL, like http://yoursite.tumblr.com
    • For the second URL field just enter something like xxxx (we’ll replace this in a minute)
    • Leave the description blank
    • Set to advanced mode
    • Copy the code
  2. Find where to paste the code from your dashboard
    • From your tumblr dashboard go to: Preferences > Customize Your Blog > Edit HTML
    • Paste the <script> portion of the code wherever you keep your scripts
    • Paste the rest of the code code just before this line:

      </div><div class=”META” …

    • You may need to try placing this in other areas depending on your theme
  3. Replace the media URL (xxxx) with the tumblr shortcode
    • Make it look like this:

      …&media={PhotoURL-500}” count-layout=”horizontal”>Pin It</a>

    • {PhotoURL-500} is the key part you’ll need to make this work dynamically for every different image.
  4. Use CSS to place your link correctly.
    • Unfortunately this post is not a lesson in CSS, but you’ll need to use CSS to move the link where you want it to be.

Some notes:
This method will make a “Pin It” button on every post you make on your tumblr. Unfortunately, if someone tries to pin a post that is not an image type, Pinterest will not grab an image. If someone knows a fix for this please comment below.

Check it out at my tumblr!

5 thoughts on “Add a Pinterest “Pin It” Button to Your Tumblr Posts”

  1. I followed your instructios and got the Pin It button, but when I clicked on the Pin It button and it went to Pinterest, there was no picture. The Pin It button was on a picture. Here is the code I used:

    (function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
    var s = document.createElement(“script”);
    s.type = “text/javascript”;
    s.async = true;
    s.src = “http://assets.pinterest.com/js/pinit.js”;
    var x = document.getElementsByTagName(“script”)[0];
    x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
    window.attachEvent(“onload”, async_load);
    else
    window.addEventListener(“load”, async_load, false);
    })();


    Pin It
    “class=”pin-it-button” count-layout=”horizontal”>Pin It

    Any suggestions?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>