Tumblr帖子上的Pin It按钮

Question

目标：我想在我的tumblr上的每个帖子的底部添加一个“pin it”按钮（与facebook和twitter按钮一起）。

主要问题：只需粘贴http://pinterest.com/about/goodies/提供的代码，将按钮添加到tumblr的自定义HTML编辑器中就不起作用了。我在{block：Posts}块的末尾粘贴了以下代码：

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

这导致每个帖子中的“pin it”按钮位于正确的位置，但点击它不会做任何事情。 tumblr生成的HTML已更改，如下所示：

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

Tumblr生成的锚标记中没有href属性。这似乎是一个问题。有谁知道如何让Tumblr正确地做到这一点？

另一个问题（可能同样重要）：pinterest提供的代码没有指定要固定的图像。我希望按钮将图像固定在帖子中。通过在线阅读，我有想法在href属性中包含url和media参数。例如：

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

再次，当我点击它产生的按钮时没有任何反应 - 所以我不知道这些参数是否是必要的 - 只是它们不能解决我的第一个问题。

任何帮助是极大的赞赏。

干杯， - 大卫

Answer 1

尝试使用URLEncodedPermalink对变量进行编码 - 这对我有用：

{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

谢谢你的建议。这是最终为我工作的东西。

按照http://tumblring.net/how-to-add-a-pinterest-button-to-tumblr/的说明进行操作，但有以下不同之处：

1. 在{/ block：Posts}结束标记之前使用以下HTML嵌入代码：

   <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. 没有包含以下与html嵌入一起剪辑的javascript： <script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

Answer 3

您的代码也应位于Posts Block和Post类型Block中。例如，如果您要在照片帖子中添加一个pinit按钮，它将是以下内容：

{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}