Guía de programación de Botones Sociales (III): Pinterest

20130215 Guía de programación de Botones Sociales (III): Pinterest

Hoy os traemos el siguiente capítulo de nuestra guía analizando los botones de una de las redes sociales más de moda el pasado 2012, Pinterest, un capítulo actualizado hoy mismo debido al reciente cambio llevado a cabo por esta red social, ¡que no nos deja descansar!

Todos los botones sociales de Pinterest, junto con los widgets que esta red social nos ofrece, están disponibles en esta url. Como siempre, el script no varía:

<script type=”text/javascript” src=”//assets.pinterest.com/js/pinit.js”></script>

Existen dos tipos de botones:

1. Botón Pin it (http://business.pinterest.com/widget-builder/#do_pin_it_button)

Captura de pantalla 2013 02 15 a las 10.24.22 Guía de programación de Botones Sociales (III): Pinterest

Permite a un usuario añadir una imagen en concreto o cualquier imagen en general de una web en uno de los tablones de su propio perfil de Pinterest, es decir, pinear esa imagen. Su código HTML es el siguiente:

<a data-pin-config=”beside” href=”//pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.artegb.com%2F&media=http%3A%
2F%2Fwww.artegb.com%2Fimg%2Fdestacado_home.jpg&description=%22Curso%20de%20SEO%20
Social%22
data-pin-do=”buttonPin”><img src=”//assets.pinterest.com/images/pidgets/pin_it_button.png” /></a>

Los atributos que podemos modificar son cinco. Sin embargo, teniendo en cuenta que los dos segundos son urls que se modifican para permitir el buen funcionamiento del botón y que el cuarto es un texto en el que también se variará la forma de escribir espacios y caracteres especiales, en este caso os recomendamos rellenar estos datos en la página de Pinterest para así no cometer errores:

data-pin-config: Este atributo, obligatorio, permite definir si el contadores de pines (número de veces que la imagen ha sido pineada), debe o no mostrarse, y, en caso de que sí, cómo debe situarse con respecto al botón. Los valores posibles son beside (muestra el contador en el lateral derecho del botón), above (lo muestra sobre el botón) o none (no lo muestra).

url: Este atributo, opcional en caso de no querer referirnos a una imagen específica pero obligatorio en caso de que sí queramos, indica la url de la página donde se encuentra la imagen a pinear.

media: Al igual que el anterior, este atributo es obligatorio u opcional en función del tipo de botón que queramos, e indica la url de la propia imagen a pinear.

data-pin-do: Este atributo, obligatorio, indica el tipo de botón Pin it. Los valores son buttonPin cuando se trata de un botón para una imagen específica y buttonBookmark cuando el botón sirve para pinear cualquier imagen de la web.

description: Especifica el título de la imagen pineada. Si el texto es breve y/o sencillo y no contiene ningún caracter especial, basta con tener en cuenta que los espacios han de sustituirse por el símbolo de porcentaje (%).

2. Botón Seguir (http://business.pinterest.com/widget-builder/#do_follow_me_button)

Captura de pantalla 2013 02 15 a las 11.26.16 Guía de programación de Botones Sociales (III): Pinterest

Otro botón para seguir a un usuario, en este caso de Pinterest. Su código HTML no admite muchas variaciones:

<a data-pin-do=”buttonFollow” href=”http://pinterest.com/Pinterest/”>Pinterest</a>

data-pin-do: En este caso, este atributo obligatorio indica el tipo de botón. Si queremos un botón seguir, su valor ha de ser siempre buttonFollow.

href: Obligatorio, este atributo indica la url del perfil del usuario de Pinterest a seguir. Si hemos iniciado sesión en la red social, tomará por defecto la de nuestro perfil.

Nombre del usuario: Independientemente de que indiquemos la URL del usuario, podemos señalar el nombre de usuario que queramos, pero seamos legales, los usuarios tienen derecho a saber a quién siguen de verdad!

¡Y hasta aquí llegamos hoy! Os esperamos la próxima semana, con una nueva entrega acerca de Google+.

GUÍA DE PROGRAMACIÓN DE BOTONES SOCIALES

  1. Twitter
  2. Facebook
  3. Pinterest

 

Sobre Marketing de Cine

Marketing de Cine es una iniciativa de Belén Bernuy y Gloria Bretones. Después de varios años trabajando juntas necesitábamos un espacio donde poder compartir todo lo vivido y aprendido dentro del mundo del cine y del marketing online.Como socias compartimos el día a día en Centuria Films, la productora audiovisual, y ArteGB, la agencia de comunicación online. Internet nos ha dado mucho a ambas y nos gustaría compartirlo.
Categorizado como Diseño Web, Formación, General, Programación Web, Social Media, Tecnología y etiquetado como , , , , , , , , , , , , , , . Guardar en favoritos el post.

Una respuesta a Guía de programación de Botones Sociales (III): Pinterest

  1. Pingback: Guía de programación de Botones Sociales (III): Pinterest | El Mundo del Diseño Gráfico | Scoop.it

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>