「Pin It」按鈕源代碼（pinterest.com）

Question

有沒有人有關於如何在pinterest.com上實現類似「PIN IT」按鈕的想法？ 從高層，我明白它的作用，但不詳細。您點擊「釘住」書籤，然後您刮取網站源代碼，找出寬度和高度大於某個閾值的圖像。抓取頁面源以查找圖像可能發生在客戶端或服務器端。什麼是實現類似的最佳方式？

有人能夠洞察其實施嗎？

Answer 1

其實這種書籤通常這樣做：

當你點擊書籤，那麼它將被重定向到以下網址運行的JavaScript代碼：

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

然後SOME_CODE將執行。在這種情況下，Pin it按鈕將運行以下內容：

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) 
})()); 

這將最終將新的標記添加到文檔正文。 Pin它會添加「pinmarklet.js」文件。請注意，「？r ='+ Math.random（）* 99999999」部分僅用於通過每次隨機生成新數來通過從客戶端傳遞緩存來獲取。

如果你想知道下一步發生了什麼，那麼你需要看看他們的JavaScript源代碼。但是很容易查看DOM並獲取想要抓取的內容（圖像，視頻鏈接...）並應用您的邏輯。

我希望這有助於:-)

Answer 2

我對javacript創建一個函數來與Pinterest的傳遞，你想共享的圖像源共享自定義圖像。

代碼：https://github.com/mustaine/Pinmarklet

我希望它幫助。