Adding a Pinterest Share Button to your Tumblr Blog

If you want to make it easy for your Tumblr followers to pin images from your blog on to Pinterest, you can add a Pinterest share button to your Tumblr blog. This button will be shown on top of all of your Tumblr posts and will allow your followers to share them on Pinterest.

Below are the instructions:

1. Log into Tumblr.
2. Click the gear button to get to your blog’s settings.
3. Click the title of your blog on the left sidebar.
4. Click the customize button on the right.
5. Click the edit HTML button on the left sidebar.
6. Make a backup of your theme by copying and pasting all of the code on to a text file and saving on your hard drive. It’s important to make backups in case you make a mistake.
7. Next, search for {block:Posts} in your HTML code and enter the following code directly under the {block:Posts}.

*** Please note that after you paste the code, some extra text is included.  This is due to one of my plugins and I’m not sure how to change that functionality.  So, in order to  make sure the extra text isn’t included, paste the code initially into notepad and then delete the extra code.  The extra code should start with “- See more at:…”.  After you’ve deleted all the extra code, you can then paste the remaining code into your html. ***

<a href="http://pinterest.com/pin/create/button/?url={Permalink}&media={PhotoURL-500}" class="pin-it-button" count-layout="horizontal"><br />
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
<br />
</a>

8. Now, look for the closing body tag “</body>” and enter the following code directly above the closing body tag.

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

9. Finally click the “update preview” button and click the “save” button.

Your new Pin It button should now appear above each of your Tumblr posts and will look like the following.

Pin It Button on Tumblr

14 thoughts on “Adding a Pinterest Share Button to your Tumblr Blog

  1. Paige Lewellyn

    doesnt work. it say permalink is invalid. yes i get a bunch of “pin it” things on my blog but they are useless

    Reply
    1. D. Shipman Post author

      That’s weird. Pinterest may have changed the link for their share button because this was working when I wrote this post back in early August. I’ll test it out again in a couple of days and update the post if there were any changes. Thanks for bringing this to my attention.

      Reply
    2. D. Shipman Post author

      Okay, I just checked my secondary blog that I used for this tutorial and the Pinterest Share button is still working. Take a look at http://smkb2ndblog.tumblr.com/ to see the share button that’s on the posts in the blog. I haven’t made any changes to it since I wrote this tutorial.

      Reply
  2. Caro

    Hello there,
    Thank you very much for this useful tutorial!
    I have a question regarding the behaviour of your button though.
    If the button is related to one image in a post, it only opens up a Pinterest pop-up window, with the Title of the main page as text.
    If the button is related to a photoset however, it opens the usual overlay Pinterest window, where you can select the actual post, with its related text, to Pin. This second option is the kind of behaviour I would like. How would I fix this for the {Photo} as well?
    Thanks in advance.

    Reply
    1. D. Shipman Post author

      Not sure how to do that with this particular button and I’m not sure if you can do that with this button. Your best bet would be to go directly to Pinterest and select “add a pin from a website” and enter the post’s URL to select which photo you’d like to pin.

      Reply
  3. Rylee

    Didn’t work for me too. it just says :
    PIN_1384035093188.f.callback[14]({“count”: 0, “url”: “http://ryleeknechtle.tumblr.com/post/63440605240″})
    at the top of the page

    Reply
    1. D. Shipman Post author

      Sorry to hear that. Can you post the URL of your blog as well as the name and URL of your theme, so I can test out the code on your theme on my blog as well as look at how the code is set up on your blog? If you’re uncomfortable with posting that information here, feel free to email it to me. My contact information is on the contact page of this website. thanks

      Reply
  4. RandiG

    Thank you Your instructions were just what I needed to guide me through. New to blogging & not at all “code” literate, it was easy. One suggestion I have to others who are trying to work through adding these code changes- as you say to back it up in case you do something wrong. After I pasted the code in, I highlighted the new code & took a picture with my cellphone so I would be able to go back to delete it if needed. I added buttons for Pinterest, BlogLovin, Facebook, “Pin-It” & “Likes” too… I needed the pictures to remember where I put what in case there was a problem. Thanx again!

    Reply
  5. mikala hammonds

    i followed your instructions on how to add pin it buttons on my tumblr photos, however, the pin it icon always rests on the last post, which at this point i have three floating pin its on one photos. how do i change this?

    Reply
  6. Michi

    Appreciate the tutorial, do not appreciate the added sentence to the button that leads back to your blog. If you want it so bad, at least mention that it’ll appear …

    Reply
    1. D. Shipman Post author

      This wasn’t intentional, so I apologize and I have updated the tutorial with how to get rid of it.

      Reply

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>

Current day month ye@r *