“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

我希望它帮助。