Question

我正在使用网站上的Pin it按钮，但是当您使用它时，它只显示图像的截断图标。而在其他任何地方使用按钮，它将显示完整尺寸的图像。

我挖掘了我的代码，但无法找到解决方案。

有人可以帮忙吗？它似乎不适用于Pin it按钮或浏览器扩展名。

以下是该网站的链接：

http://www.slurp.co.uk/red-wine/chilean-red-wine/18173-casillero-del-diablo-cabernet-sauvignon-2010/

代码：

<iframe src="http://d3io1k5o0zdpqr.cloudfront.net/pinit.html?url=http://www.slurp.co.uk/red-wine/chilean-red-wine/18173-casillero-del-diablo-cabernet-sauvignon-2010/&amp;media=http://www.slurp.co.uk/images/products/small/18173.jpg&amp;layout=horizontal" scrolling="no" frameborder="0" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; width: 90px; height: 20px; "></iframe>

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

Answer 1

我认为你需要设计IFRAME的宽度和高度。这些是设置：

+----------------------+-------+--------+
| Orientation-of-Count | Width | Height |
+----------------------+-------+--------+
| Horizontal           | 90px  | 20px   |
| Vertical             | 43px  | 58px   |
| None                 | 43px  | 20px   |
+----------------------+-------+--------+

结合你没有问过的其他事情，但可能想知道：

您无需插入IFRAME，然后使用pinit.js。 pinit.js代码的功能是用指向CDN（cloudfront.net）的IFRAME标记替换文档中特别标记的ANCHOR（A）标记。如果要插入具有相应src属性的IFRAME，则不需要pinit.js。
需要对IFRAME的src属性上的查询参数进行编码。特别是，url和media参数中的冒号和斜线需要进行uri编码。在Javascript中，您可以使用encodeURIComponent()来完成此操作。我发现pinterest对于URL的格式有点挑剔，如果你出错了，它会无声地失败。如果您使用包含空格或parens的媒体URL，我相信它会失败，即使这些是HTTP URI的合法字符。同样适用于页面URL。
如果您想知道：我不相信您可以取消使用IFRAME。我相信pinterest可能正在查看REFERRER，它可能会默默拒绝任何未被cloudfront.net引用的pin / create / button请求。

Answer 2

请看这里：

http://business.pinterest.com/widget-builder

我们推出了一组新的按钮和小部件应该有所帮助。

Pinterest - 为什么我的图标不显示完整图像？

2 个答案: