「Pin It」ボタンのソースコード（pinterest.com）

Question

誰かがpinterest.comの「PIN IT」ボタンのようなものを実装する方法を知っていますか？ 高レベルから、私はそれが何をしているのかを詳しく理解していません。 「ピン留め」のブックマークをクリックすると、サイトのソースコードをスクラップして、幅と高さがあるしきい値を超えるイメージを見つけます。イメージを見つけるためのページソースのスクラップは、クライアント側またはサーバー側で発生する可能性があります。同様のことを達成するための最良の方法は何ですか？

インプリメンテーションについての洞察はありますか？

Answer 1

実際ブックマークのこの種は、通常は、この操作を行います。

javascript: void((function() { SOME_CODE })()); 

その後SOME_CODEが実行されます：あなたはブックマークをクリックすると、それは、次のURLにリダイレクトすることで、JavaScriptコードを実行します

を。

ドキュメント本体に新しいタグを追加することになります

javascript: void((function() { 
    var e = 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) 
})()); 

：この場合、ピンもボタンには、以下を実行します。ピン "pinmarklet.js"ファイルを追加します。 "？r = '+ Math.random（）* 99999999"の部分は、ランダムに毎回新しい番号を生成することによってクライアント側からキャッシュを渡すことによって取得するためだけです。

次に起こったことを正確に調べるには、JavaScriptのソースコードを確認する必要があります。しかし、DOMを見て、あなたがつかまえたいもの（画像、ビデオリンクなど）をつかんで、あなたのロジックを適用するのは簡単です。

私は、これは私はPinterestのは、あなたが共有したい画像のソースを渡してカスタムイメージを共有するjavacript上の関数を作成:-)

Answer 2

に役立ちます願っています。

コード：https://github.com/mustaine/Pinmarklet

私はそれが役立つことを願っています。