0

目标：我想在我的 tumblr 上每个帖子的底部添加一个“固定它”按钮（在 facebook 和 twitter 按钮旁边）。

主要问题：简单地将http://pinterest.com/about/goodies/提供的代码粘贴到 tumblr 的自定义 HTML 编辑器中添加 pin it 按钮不起作用。我在 {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 按钮时没有任何反应——所以我不知道这些参数是否必要——只是它们不能解决我的第一个问题。

任何帮助是极大的赞赏。

干杯， - 大卫

4

3 回答 3

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}
于 2012-06-01T13:34:52.610 回答
1

感谢您的建议。这就是最终为我工作的东西。

按照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>
于 2012-06-11T19:16:42.630 回答
0

您的代码也应该在帖子块和帖子类型块内。例如，如果您将 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}
于 2012-05-31T18:06:49.573 回答