Clicky

Mostrar un botón de pin flotante de Pinterest sobre cualquier imagen

botón flotante pin-it de Pinterest

Nuevo código oficial de Pinterest para el botón activable

Algunas empresas tienen botones de Pinterest personalizados activables para las imágenes de su sitio, y Pinterest ha hecho uno oficial.

El botón en Hover Pin es igual que el botón de Pin normal, pero éste sólo aparece cuando una persona coloca el ratón sobre una imagen en tu sitio.

La gente hace pin para recordar las cosas que quieren hacer en el futuro. Cuando alguien utiliza el botón Pin It, es a menudo una señal de su intención, compartiendo las imágenes con sus seguidores de Pinterest y llevando nuevos visitantes a nuestros sitios web. El botón de pasar el ratón son un recordatorio sutil, por lo que la adición de estos botones pueden conducir a una mayor fijación y aún más tráfico de referencia.

Para activar el botón de pin flotante en tu página, sólo tienes que añadir el atributo data-pin-hover de esta etiqueta javascript en tu página que llama pinit.js.

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"
    data-pin-hover="true"
></script>

Si quieres utilizar el cargador de scripts asíncronos, añade esta línea para establecer el atributo data-pin-hover:

    p.setAttribute('data-pin-hover', true);

No trabaja con algunas imágenes

CSS imágenes de fondo, imágenes que son menores de 80 por 80 píxeles de tamaño, las imágenes que tienen el atributo data-pin-no-hover="true", imágenes que tienen el conjunto de atributos nopin="nopin", y las imágenes cuyos atributo comienza con datos src, no mostrarán el hoverbutton.

Lo mejor de todo: sólo se necesita una línea de código para obtener estos botones. ¿Quieres añadirlo a su sitio? Comienza aquí.

Jesus_Caceres