Pinterest-为什么我的图标没有显示完整的图像

Pinterest - Why are my icons not displaying full images?

本文关键字：图像 显示 为什么 我的 图标 Pinterest-      更新时间：2023-09-26

我在网站上使用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>

我认为您需要对IFRAME进行样式设置，使其具有宽度和高度。这些是设置：

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

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

  1. 您不需要插入IFRAME，然后使用pinit.js。pinitjs代码的功能是用指向pinterest CDN（cloudfront.net）的IFRAME标记替换文档中特别标记的ANCHOR（A）标记。如果您插入具有适当src属性的IFRAMEs，则不需要pinit.js.

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

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

请看一下这里：

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

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

相关文章：