Cómo personalizar el botón pin it individual de Pinterest y poner el botón que tú quieras + botones gratis!

Hace algún tiempo en el blog Personalización de Blogs leí una entrada muy interesante donde Blanca nos explicaba dos maneras diferentes de poner el botón pin-it individual y nos daba los pros y los contras de cada una. Cuando leí su post me quedé, igual que ella, con el sistema tradicional que te ofrece Pinterest. Según Blanca sus contras eran:

1) Que hay que colocarlo individualmente en cada post (ella explica cómo en el enlace que he puesto antes a su entrada)

2) Y que hay que lidiar con la imagen que nos proporciona Pinterest, que no es demasiado estética que digamos...

Con mis básicos conocimientos de HTML me he puesto a investigar y se me ha ocurrido la manera de poner este botón de Pinterest individual pero con la imagen que nosotros queramos. Eso sí, tendremos que poner el botón en cada post de manera individual como ya nos advertía Blanca. Pero con una pequeña modificación del código HTML que nos proporciona Pinterest, podremos colocar nuestro propio botón Pin it personalizado.

Y por si el diseño de botones no es tu fuerte... he diseñado unos cuantos botones Pin-it para que elijas el que más te gusta y lo pongas en tu blog siguiendo las instrucciones de este tutorial! :) Espero que no sea muy lioso, que ya sabéis que mi blog no se dedica especialmente a este tipo de recursos para blogs!

Paso 1:

Paso 2:

Paso 3: 

En la siguiente página completamos con los datos de nuestro blog y de la imagen que será la foto del Pin, así como el texto predeterminado que llevará el Pin. Pinchamos en Preview.

Paso 4:

Nos aparecerá un código HTML que tendremos que copiar en nuestro post en el lugar en el que queremos que aparezca el botón de pinear.

Paso 5:

De vuelta en Blogger, en el editor de la entrada en la que queremos colocar el botón, pulsamos en HTML para ver el código HTML de esa entrada.

Paso 6: 

Pegaríamos el código que hemos copiado del generador de Pinterest en el paso 4 en el lugar en el que queremos que aparezca en la entrada. En este caso yo lo he puesto justo debajo de la imagen del pin, pero otra buena idea es ponerlo en la parte de abajo del post.

Si previsualizamos la entrada, nos aparecerá el clásico botón de Pin it que no tiene demasiada gracia... Hasta aquí es el proceso habitual que utilizamos para colocar el botón de Pinterest en nuestro post... Ahora viene la personalización:

Paso 7: 

El siguiente paso es subir la imagen del botón que hayas creado (o uno de los que yo he hecho para vosotros) a un gestor de imágenes.Puedes usar cualquier host de imágenes de tu elección, ImageShack es el que yo suelo utilizar y el que conozco. Si no estás muy seguro de cómo hacer esto, a lo mejor te interesa leer mi post sobre cómo colocar iconos de redes sociales en tu blog donde hay un paso a paso de cómo subir las imágenes a este gestor.

Paso 8:

Volvemos otra vez al post, tal y como lo habíamos dejado. En el código HTML que copiamos anteriormente, buscamos donde pone (al final del código):

<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

Borramos lo que pone entre comillas y lo sustituimos por la URL de nuestra foto. De manera que nos quedaría algo así:

<img src="URLdenuestraimagen" /></a>

¿Simple no? Pues vamos a darle a Vista Previa para ver cómo queda...

Resultado: 

 Así queda nuestro botón! Mucho más mono que el predeterminado de Pinterest ¿no? Además podemos elegir uno que pegue con nuestro blog y así no desentone, o hacer un icono muy grande para que se vea bien y entren ganas de pinear... cualquier posibilidad vale porque podemos elegir la foto que queramos!

Sí, lo sé, tener que hacer el trajín de generar el código en Pinterest, copiarlo, pegarlo en la entrada... es un poco coñazo! Pero lo que es insertar la foto personalizada no se tarda nada una vez hemos empezado el proceso de insertar el botón (proceso que, además, muchas utilizamos en cada post igualmente!)

¿Qué botón os gusta más? ¿Os ha sido útil esta entrada?