Kod źródłowy przycisku "Pin It" (pinterest.com)

Question

Czy ktoś ma pomysł, jak zaimplementować przycisk "PIN IT" w witrynie pinterest.com? Z wysokiego poziomu rozumiem, co robi, ale nie szczegółowo. Klikniesz zakładkę "przypnij", a następnie zeskrobuj kod źródłowy witryny, aby znaleźć obrazy o szerokości i wysokości większej niż pewien próg. Skrobanie źródła strony w celu znalezienia obrazów może się zdarzyć po stronie klienta lub po stronie serwera. Jaki jest najlepszy sposób na osiągnięcie czegoś podobnego?

Czy ktoś mógłby wgląd w ich implementację?

Answer 1

Właściwie ten rodzaj zakładek zwykle to zrobić:

Po kliknięciu na zakładkę, a następnie będzie uruchomić kod JavaScript przekierowanie do następującego adresu URL:

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

Następnie SOME_CODE wykona. W takim przypadku przycisk Przypnij zostanie uruchomiony po:

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

Co spowoduje dodanie nowego tagu do treści dokumentu. Pin Dodaje plik "pinmarklet.js". Zauważ, że "? R =" + Math.random() * 99999999 "część jest tylko dla uzyskania przez przekazanie pamięci podręcznej od strony klienta poprzez wygenerowanie nowego numeru za każdym razem losowo.

Jeśli chcesz dowiedzieć się, co dokładnie stało się później, zapoznaj się z ich kodem źródłowym JavaScript. Łatwo jednak zajrzeć do DOM i pobrać to, co chcesz pobrać (obrazy, łącza wideo, ...) i zastosować swoją logikę.

Mam nadzieję, że to pomaga :-)

Answer 2

utworzyć funkcję javacript podzielić niestandardowych obrazów z Pinterest minięciu źródła obrazów, które chcesz udostępnić.

Kod: https://github.com/mustaine/Pinmarklet

Mam nadzieję, że to pomaga.