Cómo añadir un botón “Pin it” en tus fotos

No sé vosotros, pero yo cada vez utilizo más Pinterest para compartir aquellas imágenes que me gustan y que voy encontrando en mis blogs favoritos. Para hacer todavía más fácil que las personas que visiten nuestro blog compartan nuestras fotos en Pinterest, os recomiendo incluir un botón “Pin-It” que aparezca automáticamente al pasar el ratón sobre cada una de las imágenes publicadas en nuestro blog. Es importante por un lado que el botón se vea claramente y por otro, que los datos de la imagen (título del post y/o nombre del blog) aparezcan correctamente en la descripción del pin.

Everyday I use more and more often Pinterest to share photos I love from my favourite blogs. To make it easier to those who want to share images from your blog, I do recommend you to include a “Pin-It” button which shows up automatically when the mouse hover over an image (I’m sure you’ve seen this effect in plenty of blogs). It is important to include an easily identified button and that the post name and the blog’s name are included in the pin description.

Aunque hay multitud de tutoriales acerca del tema, os voy a explicar aquí como lo he configurado para este blog creado con WordPress. Después de consultar varios post sobre el tema decidí probar a instalar un nuevo plugin en WordPress incluido entre las recomendaciones: Pinterest “Pin it”-Button for images.

Although there are plenty of tutorials in Internet about this topic, I want to share with you here how I configured that “Pin it”- Button for this WordPress blog. After checking some post about this topic I decided to installed one of the reviewed plugins: Pinterest “Pin it”-Button for images.

Cómo instalar un plugin en WordPress

How to install a plugin in WordPress

Quizás algunos de los que estáis empezando con WordPress os preguntareis qué es eso de un plugin. Los plugins son módulos adicionales a la instalación por defecto de WordPress que nos permiten mejorar alguna de sus funcionalidades o añadir nuevas. Podéis consultar el listado completo de plugins aquí (hay más de 26.000 plugins disponibles..y subiendo).

For those who are just starting with WordPress the “plugin” concept can sound kind of new. Pluings are additional modules you can add to your standard WordPress installation, which allow us to improve an existing functionality or to enable new ones. You can check the list of available plugins here (with more than 26.000 plugins already available).

Para instalar y configurar este plugin en concreto sólo tenéis que seguir los siguientes pasos. Nota: Aunque las imágenes se vean un poco pequeñajas, al hacer click sobre ellas podréis ver las capturas de pantalla con todo detalle ;).

In order to install and configure this plugin you only have to follow these steps. Note: if you click on the images you can see them bigger,so you can easily check the installation’s details.

PASO 1 : lo primero de todo tendremos que comprobar si con nuestro usuario de WordPress tenemos permiso para instalar nuevos plugins. Comprobad si en el menú lateral tenéis habilitada la opción “Plugins”. En caso de que no sea así, deberíais poder instalarlo sin problema con vuestra cuenta de administrador.

STEP 1: first of all we have to verify if our WordPress user has enough rights to install new plugins. Check if you have the “Plugins” menu option enabled. If it is not the case, you should be able to install this plugin using an administrator WordPress account.

PASO 2:  Haciendo click sobre la opción “Añadir” accederemos a una nueva página en la que podremos buscar el plugin que nos interesa. Buscando “Pin it button for images” obtendréis como primer resultado el plugin que yo instalé.

STEP 2: by clicking the “Add new” menu option you will access a new page where you can search new plugins to be installed. Searching “Pin it button for images” you will get as first result the same plugin I’ve installed.

En mi caso ya aparece como instalado, pero vosotros tendréis que hacer click sobre “Instalar” (Install Now) y el plugin se instalará automáticamente.

In my case the plugin appears as installed, but for you if you click over “Install Now”, the plugin will be installed automatically.

PASO 3: Si volvéis al menú “Plugins” y hacéis click sobre la opción “Instalados” ahora os aparecerá una nueva entrada en vuestro listado para el plugin que acabáis de instalar.

STEP 3: Back to the initial “Plugins” menu and clicking over “Installed Plugins” you will get a list of all installed plugins including the new one.

Comprobad que el plugin está activado, sino la funcionalidad del plugin no estará activada y no podremos ver el botón de “Pin it” sobre nuestras imágenes.

Verify that the plugin is activated. Otherwise the new functionality wouldn’t be activated and we couldn’t see the new “Pin it”-Button over the images.

Cómo modificar el botón por defecto

How to change the default button

Aunque el plugin tiene su propia página de configuracion (la podéis consultar en el menú “Opciones-> Pinterest Pin It”), de momento no podemos configurar aquí el icono que se mostrará al pasar el ratón sobre nuestras imágenes.  Para ello tendremos que cacharrear un poquito más ;).

Eventhough this plugin has its own settings page (“Settings -> Pinterest Pint It”), we cannot change the default button images in here. For that we still have to modify a couple of things ;).

Primero debemos buscar/crear una imagen que luego podremos subir y enlazar en el CSS del plugin recién instalado. Yo he usado uno de los que Maira de Adorable publicó en un post sobre este mismo tema:  Botón de Pinterest sobre las fotos al pasar el mouse.

First of all we have to find/create a new image that we can upload and link in the CSS of the plugin. I’ve used one of the icons shared by Maira in her blog Adorable.

Para subir nuestro nuevo botón podemos acceder al menú “Multimedia”, donde añadiremos una nueva imagen.

We can easily upload a new button/icon in the “Multimedia” menu.

Y ahora sólo nos queda configurar el nuevo botón en el CSS del plugin.

And now we only have to link this new button in the pluing’s CSS.

Volviendo al menú “Plugins”, en el listado de plugins instalados, hacemos click en “Editar” en la entrada del plugin “Pinterest Pin It Button For Images” (Paso 3). Como veis todo el código fuente del plugin es público y podemos modificarlo sin problemas.

Back to the menu “Plugins”, in the list of installed plugins, we click over “Edit” in the entry of the “Pinterest Pin It Button For Images” (Step 3). All source code is public and you easily can modify and addapt it.

Seleccionamos en el listado de la derecha el archivo ppibfi_pinterest.css y modificaremos la url y el tamaño de la imagen que veis marcados en amarillo.

From the list with all source files we select ppibfi_pinterest.css and we update the image url and the its size, both highlighted in yellow.

Ahora, cada vez que paséis el ratón sobre alguna de las imágenes de vuestro blog, aparecerá el nuevo botón, listo para pinear!!. Cualquier duda o problema que tengáis con la instalación la podéis compartir en los comentarios, pero espero que con esta explicación en pocos minutos tengáis el nuevo botón funcionando :)

Now, everytime the mouse hover over an image, the new button shows up, ready to pin!! You can share your questions or problems with the installation in the comments, but I hope with this tutorial you can have your new “Pin it” button working in few minutes :)