Mã nguồn nút "Pin It" (pinterest.com)

Question

Có ai có ý tưởng về cách triển khai một cái gì đó như nút "PIN IT" trong pinterest.com không? Từ cấp độ cao, tôi hiểu những gì nó làm nhưng không chi tiết. Bạn bấm vào "ghim nó" đánh dấu, và sau đó bạn cạo mã nguồn trang web để tìm ra hình ảnh với chiều rộng và chiều cao lớn hơn một số ngưỡng. Việc cào nguồn trang để tìm hình ảnh có thể xảy ra ở phía máy khách hoặc ở phía máy chủ. Cách tốt nhất để đạt được điều gì đó tương tự?

Ai đó có thể ném thông tin chi tiết về triển khai của họ không?

Answer 1

Trên thực tế loại bookmark thường làm điều này:

Khi bạn click vào Bookmark, sau đó nó sẽ chạy một đoạn mã JavaScript bằng cách chuyển hướng tới URL sau:

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

Sau đó SOME_CODE sẽ thực hiện. Trong trường hợp này, nút Ghim sẽ chạy sau:

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

Điều này sẽ kết thúc thêm thẻ mới vào thân tài liệu của bạn. Pin Nó sẽ thêm tập tin "pinmarklet.js". Lưu ý rằng phần "? R = '+ Math.random() * 99999999" chỉ dành cho việc nhận bộ nhớ cache từ phía máy khách bằng cách tạo số mới mỗi lần ngẫu nhiên.

Nếu bạn muốn tìm hiểu chính xác những gì đã xảy ra tiếp theo, thì bạn cần xem xét mã nguồn JavaScript của chúng. Nhưng thật dễ dàng để nhìn vào DOM và lấy những gì bạn muốn lấy (Hình ảnh, Video Links, ...) và áp dụng logic của bạn.

Tôi hy vọng điều này sẽ giúp :-)

Answer 2

tôi tạo một hàm trên javacript để chia sẻ hình ảnh tùy chỉnh với Pinterest đi nguồn gốc của hình ảnh mà bạn muốn chia sẻ.

Mã số: https://github.com/mustaine/Pinmarklet

Tôi hy vọng điều đó sẽ hữu ích.