1

Web サイトに Pinit ボタンを追加しようとしています。問題は、Pinit ボタンが画像の URL を必要とすることですが、私の場合、画像は動的に生成されます。では、ページの可視画像をピン留めするようにピン留めボタンを追加するにはどうすればよいですか。

この例のようなものはうまくいきます。

4

2 に答える 2

2

http://jsfiddle.net/t4KHR/

画像を動的に追加したら、次のコードを実行します。共有する画像の ID 親として親変数を設定します。

var url = document.location.href;
var parent = document.getElementById("imgholder");
var img = parent.getElementsByTagName("img");
for (i = 0; i < img.length; i++) {
    var newpin = document.createElement("a");
    newpin.href = 'http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(url) + '&media=' + encodeURIComponent(img[i].src);
    newpin.className = "pin-it-button";
    img[i].parentNode.insertBefore(newpin, img[i].nextSibling)
    if (i == img.length - 1) {
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "//assets.pinterest.com/js/pinit.js";
        document.getElementsByTagName("body")[0].appendChild(s);
    }

}
于 2013-01-21T14:48:59.747 に答える
1 
<a class="pin-it-button" href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">

<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />

</a>

上記のコード スニペットは私の問題を解決しました。URL をコード リンクにハードコーディングするのではなく、javascript を使用して現在の URL を取得し、ピン留めする現在のページの画像を表示します。そして、ヘッダーまたはフッターに次のスクリプトを含めることを忘れないでください

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
于 2013-01-21T14:48:52.147 に答える