Search code examples
htmltumblrpinterest

Pin It Button on Tumblr Posts

Goal: I want to add a "pin it" button (alongside the facebook and twitter buttons) at the bottom of each post on my tumblr.

Main Problem: Simply pasting the code provided at http://pinterest.com/about/goodies/ for adding a pin it button into tumblr's custom HTML editor does not work. I pasted the following code at the end of the {block:Posts} block:

    <a href="http://pinterest.com/pin/create/button/" class="pin-it-button" 
    count-layout="horizontal">
    <img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
    </a>
    <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

This results in a "pin it" button in the correct place in each post, but clicking on it does nothing. The HTML generated by tumblr is changed, and looks as follows:

    <a style="cursor:pointer" title="http://pinterest.com/pin/create/button/" class="pin-it-button" count-layout="horizontal">
    <img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It"></a>
    <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

There is no href attribute in the anchor tag generated by Tumblr. This seems like a problem. Anyone know how to get Tumblr to do this correctly?

Another Problem (Possibly as important): The code provided by pinterest doesn't specify an image to pin. I want the button to pin the image in the post. From reading online I've gotten ideas to include the url and media parameters in the href attribute. For Example:

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

Again, nothing happens when I click the resulting pin it button - so I don't know if these parameters are necessary - only that they don't fix my first problem.

Any help is greatly appreciated.

Cheers, - David

Solution

  • Thanks for the suggestions. Here's what ended up working for me.

    Followed the instructions at http://tumblring.net/how-to-add-a-pinterest-button-to-tumblr/ with the following differences:

    1. Used the following HTML embed code right before the {/block:Posts} closing tag:

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

    2. Did NOT include the following javascript snipped along with the html embed:

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