Botón Pin it: ¡Incluyelo en tu blog!

¡Buenos días mamis!

Como ya sabéis, MumSlowCreative te ayuda a que ¡tu sentido de creatividad y cualidades de madre inquieta y emprendedora no se duerman!. Así que si eres una mamá bloguera, esto es para ti.

Hace un tiempo os comenté cómo sacarle partido a Pinterest, y uno de los tips era no olvidarse de tener tu botón de pin. ¡Pero mejor sería tener uno propio!

Si no utilizas la opción que te da Pinterest, puedes crear tu propio pin (o descargarte uno que te guste) e instalarlo en tu blog ¿como se hace? Eso aprenderás hoy: Cómo instalar un botón de pin en tu blog para que aparezca en todas las imágenes:

Hay un blog muy bueno que se llama RyleeBlake donde ella explica cómo hacerlo. Así que lo que he preparado es parte de traducción, más con lo que yo he hecho con MumSlowCreative. Está de más decir que primero deberás tener creada una cuenta en Pinterest para que el botón PIN tenga su uso, que es que tus seguidores lleguen a tus tableros de Pinterest y puedan seguirte por esa vía.

Paso 1

**Antes de hacer cualquier cosa en tu blog (en edición HTML), SIEMPRE has una copia de seguridad: Plantilla/Crear/restablecer copia de seguridad/Descargar. Tendrás el código de tu blog escrito en HTML y CSS; es un archivo con extensión .xml. Así, si tienes cualquier problema de configuración modificando tu archivo, simplemente vuelve a cargar esta plantilla: Plantilla/Crear/restablecer copia de seguridad/Seleccionar archivo

Una vez que hayas escogido la imagen que deseas utilizar como pin, como siempre primero debes tenerla alojada en algún servidor. Personalmente me gusta utilizar Google Sites para todos los documentos como pdf o iconos que necesito tener alojados para luego subirlos al blog.

Cuando hayas subido la imagen, debes copia la url de la imagen (botón derecho "copiar dirección de enlace").

Paso 2
Ahora debes ir a tu blog/Plantilla/Edición HTLM y busca la etiqueta </body>. Pega justo arriba lo siguiente:

<script>
//<![CDATA[
var bs_pinButtonURL = "dirección de tu URL";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by ryleeblakeblogspot.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>

Ahora pega la dirección URL de tu imagen donde dice "dirección de tu URL". Y si quieres puedes modificar dónde colocar la imagen (botón pin). Yo lo tengo en el centro, pero puedes cambiarlo por la siguiente opción:

topleft

topright

bottomleft

bottomright

Mira esta imagen del programa del blog de MumSlowCreative como ejemplo:

Dónde incluir un botón de pin en HTML

¡Y listo! Si actualizas tu página, verás que cuando pones el ratón sobre una imagen aparece el "botón de pin" que has instalado, y si pinchas te llevará a tus tableros de Pinterest.

Además el blog de RyleeBlake te ofrece tres diseños propios. ¡Y añado 3 más!