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

我們已經推出了一套新的按鈕和小部件，應該幫助的。