How to Add a Pinterest Button to Tumblr


So, you already have your facebook, twitter and google plus button for tumblr, think you are done?, then you are missing the most popular photo sharing platform of the moment, Pinterest.

By adding a simple pinterest button to your tumblr blog, you will get targeted traffic, specially if you blog mainly images, of any kind.

Pinterest users love Tumblr, because they can find an endless amount of pictures and photos on every single topic, so, if you have a niche blog on products you must install the pinterest button on your tumblr.

How to Put a Pinterest Button on Tumblr

  1. This is the full embed code, but we will split it in two parts.

  2. <!-- Include ONCE for ALL buttons in the page -->
    <script type="text/javascript">
    (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;
            if (window.location.protocol == "https:")
                s.src = "https://assets.pinterest.com/js/pinit.js";
            else
                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);
    })();
    </script>
     
    <!-- Customize and include for EACH button in the page -->
    <a href="http://pinterest.com/pin/create/button/" class="pin-it-button" count-layout="horizontal">Pin It</a>
    <script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>


  3. Go to Customize Theme >> Description Box and paste the first chunk of code for the pint it button (the script) into the description box and save:

  4. <!-- Include ONCE for ALL buttons in the page -->
    <script type="text/javascript">
    (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;
            if (window.location.protocol == "https:")
                s.src = "https://assets.pinterest.com/js/pinit.js";
            else
                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);
    })();
    </script>


  5. Now, Go to Customize Theme >> Edit HTML
  6. This will be the trickiest part of the tutorial, since you will go through many trial and errors, until you are satisfied with the position of your Pinterest button. The code to paste is the second part of the embedable code (below). As Tumblr has different types of posts, you will need to repeat this process with each of them, always pasting the code before the post type closing tag (closing tags are listed below). However, since Photos are the most pinned types, then adding the button just there would be enough at the beginning. When we say locating the pint it button before the closing tag, we don’t necessarily mean RIGHT before, just ALWAYS before. Again, the button needs to be within those boundaries, but you will have to Update Preview and change its location until you are ok with it. You might need some CSS knowdledge before you are able to center it perfectly

  7. <a href="http://pinterest.com/pin/create/button/" class="pin-it-button" count-layout="horizontal">Pin It</a>
    <script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>


    Post Type Closing Tags


    {/Block:Photo}
    {/Block:Photoset}
    {/Block:Text}
    {/Block:Quote}
    {/Block:Link}
    {/Block:Chat}
    {/Block:Audio}
    {/Block:Video}
    {/Block:Answer}



Tumblr Pinterest Button

We will be publishing a list with the best Pinterest Widgets to put in your tumblr sidebar, just in case you have your own Pinterest page and like to show it to your users.

5 Responses to "How to Add a Pinterest Button to Tumblr"

Add Comment
  1. Radical Terrace

    March 6, 2012 at 9:26 pm

    I was curious how to add a “Pint It” button for photo sets on Tumblr. As it stands now, I was able to find the photo closing tag for a single photo (so the “Pin It” button comes up on posts with a single photo), but I can’t find any Photoset closing tag (such as {/Block:Photoset} you mention above). Therefore, I can’t add a Pin It button for these photo sets.

    Is this because of the custom Tumblr skin I am using? Or could photosets be called something else in Tumblr html?

    Thanks!

    [Reply]

  2. Jon

    March 18, 2012 at 10:53 pm

    Hey, this isn’t working for anybody I know. I think there’s something missing in the code, because I know it works for some other people but they didn’t get the code from here. When you click on, “Pin it” it just takes you to a blank page.

    [Reply]

  3. Lizzie

    March 30, 2012 at 9:53 am

    - Thank you!
    Some of the second code didn’t completely work for me, just created text and no button – but thank you for helping me figure out where to paste the code! :)

    [Reply]

  4. Gatetoimagination

    September 28, 2012 at 7:15 pm

    The code worked for me, in that the button shows up below the posts and is clickable. Only, when I try to pin it, it doesn’t work and doesn’t go to pinterest. Any ideas? Also, any tips for how to center the button? Thanks for helping us non-coders out!

    [Reply]

  5. Jenna

    April 6, 2013 at 10:20 pm

    So glad I found this site and am able to add a “Pin It” button to my Tumblr!

    Unfortunately, as the previous comment says, I only get the “words” and not a picture….

    Is there a way to get the picture of the Pin It button?

    Thanks :-)
    Jenna

    [Reply]

Submit a comment

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>