将按钮固定在 Tumblr 帖子上

Question

目标：我想在我的 tumblr 上每个帖子的底部添加一个“固定”按钮（在 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>

这会在每个帖子的正确位置产生一个“固定”按钮，但单击它不会执行任何操作。 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>

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

非常感谢任何帮助。

干杯， - 大卫

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

您的代码也应该在帖子块和帖子类型块内。例如，如果您将 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}