Bueno, esta vez voy a compartir cómo instalar el botón Pin It con código asíncrono que aparece cuando un visitante situa el cursor sobre cualquier imagen. Este botón aparecerá en todas las imágenes del blog, excepto en las imágenes que tienen un tamaño inferior a 80px X 80px, permitiendo a los visitantes enviar vuestras imágenes a su blog de Pinterest como foto favorita.
Es realmente muy fácil, basta con ir a la Api de Pinterest para elegir el tipo de botón de imagen activable y copiar el código dado. Pero el problema es que cuando se va a guardar la plantilla detecta errores en el código. Este error surge a partir del código asíncrono en el código de abajo.
Mal
<script type="text/javascript" async data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
Para solucionar este problema, sólo tiene que añadir el código
= "async", por lo que se convierte en la siguiente forma.
Bien
<script type="text/javascript" async="async" data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
Entonces, guardamos el código anterior antes del
</body> de nuestra plantilla.
Este código genera la imágen del botón Pin It bastante grande, si quieres un botón más pequeño, elimine el código pin de datos height = "28", por lo que se convierte en la siguiente forma.
<script type="text/javascript" async="async" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
Fácil ¿no ...? Al utilizar la secuencia asincrónica, hace que el botón Pin It no ralentice la carga del blog.
Para
ver la demostración solo inténte situar el cursor sobre cualquier imágen de este blog.
Publicaciones Relacionadas
trucos blog
