Pin It Button on Tumblr Posts - html

Question

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

Answer 1

Try encoding the variables in using URLEncodedPermalink - this worked for me:
{block:Posts}
{block:Photo}
<a href="http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&media={URLEncodedPhotoURL-500}" class="pin-it-button" count-layout="horizontal">
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>
{/block:Photo}
{/block:Posts}

Answer 2

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:
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>
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>

Answer 3

Your code should be inside the Posts Block and Post type Block as well. For example if you are adding a pinit button into a photo post it would be the following:
{block:Posts}
{block:Photo}
<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>
{/block:Photo}
{/block:Posts}