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

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

夫妇的其他东西，你并没有问，但可能会想知道：

1. 你不必插入IFRAME，然后使用pinit.js。 pinit.js代码的功能是将文档中特殊标记的ANCHOR（A）标记替换为指向最有意思的CDN（cloudfront.net）上的IFRAME标记。如果您要插入带有适当src属性的IFRAME，则不需要pinit.js。

2. 对该IFRAME的src属性的查询参数需要进行编码。特别是，url和media params中的冒号和斜杠需要用uri编码。在Javascript中，您可以使用encodeURIComponent()来完成此操作。我发现pinterest对URL的格式有点挑剔，如果出现错误，它会默默地失败。如果您使用包含空格或parens的媒体网址，我认为它会失败，即使这些是HTTP URI的合法字符。同样的页面网址。

3. 如果你想知道：我不相信你可以消除使用IFRAME。我相信pinterest可能正在查看REFERRER，并且它可能会默默拒绝没有被cloudfront.net引用的任何pin/create/button请求。

Answer 2

请看看这里：

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

我们已经推出了一套新的按钮和小部件，应该帮助的。