Codice sorgente pulsante "Pin It" (pinterest.com)

Question

Qualcuno ha idea di come implementare qualcosa come il pulsante "PIN IT" in pinterest.com? Da un alto livello, capisco cosa fa ma non nei dettagli. Fai clic sul segnalibro "pin it", quindi raschierai il codice sorgente del sito per trovare immagini con larghezza e altezza maggiori di qualche soglia. Lo scraping del sorgente della pagina per trovare le immagini può avvenire sul lato client o sul lato server. Qual è il modo migliore per ottenere qualcosa di simile?

Qualcuno potrebbe dare un'idea della loro implementazione?

Answer 1

In realtà questo tipo di segnalibri di solito fare questo:

Quando si fa clic sul segnalibro, quindi verrà eseguito un codice JavaScript reindirizzando al seguente URL:

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

Poi SOME_CODE verrà eseguito. In questo caso verrà eseguito il pulsante Pin it seguente:

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

Che finirà per aggiungere un nuovo tag al corpo del documento. Pin Aggiungerà il file "pinmarklet.js". Si noti che "? R = '+ Math.random() * 99999999" la parte è solo per ottenere passando la cache dal lato client generando un nuovo numero ogni volta in modo casuale.

Se vuoi scoprire esattamente cosa è successo dopo, allora devi dare un'occhiata al loro codice sorgente JavaScript. Ma è facile guardare nel DOM e prendere ciò che vuoi afferrare (immagini, collegamenti video, ...) e applicare la tua logica.

Spero che questo aiuta :-)

Answer 2

creo una funzione su Javacript per condividere immagini personalizzate con pinterest passando la fonte delle immagini che si desidera condividere.

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

Spero che aiuta.