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

Modificado por última vez en Miércoles, 16 Octubre 2013 01:33
(0 votos)

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í.


Comentarios (0)

No hay comentarios escritos aquí

Deja tus comentarios

  1. Publicar comentario como invitado. Regístrate o ingresaa tu cuenta
Archivos adjuntos (0 / 3)
Compartir su ubicación
close

Recibe gratis nuestros nuevos artículos!

Serás el primero en conocer las novedades y noticias que pasan en Internet, nuestros tutoriales, trucos y más.

Escribe tu email:

Se abrirá una nueva ventana deFeedBurner a la izquierda de la página y habrás de validar un Captcha.

Lee nuestras Política de privacidad & Política de cookies
Puedes darte de baja de la lista de correo electrónico en cualquier momento