Código fuente del botón "Pin It" (pinterest.com)

Question

¿Alguien tiene idea sobre cómo implementar algo como el botón "PIN IT" en pinterest.com? Desde un nivel alto, entiendo lo que hace, pero no en detalle. Haga clic en el marcador "anclarlo" y luego raspe el código fuente del sitio para encontrar imágenes con un ancho y una altura superiores a algunos umbrales. El raspado de la fuente de la página para buscar imágenes puede ocurrir en el lado del cliente o en el lado del servidor. ¿Cuál es la mejor manera de lograr algo similar?

¿Podría alguien dar una idea de su implementación?

Answer 1

En realidad este tipo de marcadores suelo hacer esto:

Al hacer clic en el marcador, a continuación, se ejecutará un código JavaScript mediante la redirección a la URL:

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

Entonces SOME_CODE ejecutará. En este caso, el botón Pin it se ejecutará a continuación:

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

que terminará agregando una nueva etiqueta a su cuerpo del documento. Pin Agregará el archivo "pinmarklet.js". Tenga en cuenta que la parte "? R = '+ Math.random() * 99999999" es solo para pasar el caché desde el lado del cliente generando un nuevo número cada vez al azar.

Si quiere saber exactamente qué sucedió después, entonces necesita echar un vistazo a su código fuente de JavaScript. Pero es fácil ver el DOM y tomar lo que quieras agarrar (imágenes, enlaces de video, ...) y aplicar tu lógica.

espero que esto ayuda :-)

Answer 2

puedo crear una función en javacript para compartir imágenes personalizadas con el paso de pinterest la fuente de las imágenes que le gustaría compartir.

Código: https://github.com/mustaine/Pinmarklet

espero que esto ayude.