javascript - Pinterest - アイコンに完全な画像が表示されないのはなぜですか?

Question

サイトでピン留めボタンを使用していますが、使用すると画像の切り取られたアイコンしか表示されません。ボタンを他の場所で使用すると、フルサイズの画像が表示されます。

コードを掘り下げましたが、解決策が見つかりません。

誰でも助けることができますか？[ピン留め] ボタンまたはブラウザー拡張機能では機能しないようです。

サイトへのリンクは次のとおりです。

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) タグを、pinterest CDN (cloudfront.net) を指す IFRAME タグに置き換えることです。適切なsrc属性を持つ IFRAME を挿入する場合、pinit.js は必要ありません。

2. その IFRAMEの属性のクエリ パラメータをsrcエンコードする必要があります。特に、パラメータ内のコロンとスラッシュはurlurimediaエンコードする必要があります。Javascript では、これを実現するために使用できますencodeURIComponent()。pinterest は URL の形式にかなりうるさいので、何か間違っていると何も言わずに失敗することがわかりました。スペースや括弧を含むメディア URL を使用すると、これらが HTTP URI の正当な文字であっても失敗すると思います。ページの URL についても同様です。

3. ご不明な点がある場合: IFRAME の使用をなくすことはできないと思います。pinterest は REFERRER を見ている可能性があり、cloudfront.net によって参照されていない pin/create/button リクエストを黙って拒否する可能性があると思います。

Answer 2

こちらをご覧ください：

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

役立つ新しいボタンとウィジェットのセットを立ち上げました。