Cómo añadir el botón “Pin It” de Pinterest en WordPress (4 maneras)

¿Quieres añadir un botón “Pin It” de Pinterest en WordPress?

Pinterest es una popular red social que te permite compartir contenidos visuales y conseguir más visitas a tu sitio web. Añadiendo un botón “Pin It” a su sitio, puede animar a más gente a compartir su contenido en Pinterest.

En este artículo, le mostraremos cómo añadir el botón ‘Pin It’ de Pinterest a WordPress.

¿Por qué añadir el botón “Pin It” de Pinterest en WordPress?

Pinterest es un popular sitio web de medios sociales que permite a los usuarios enlazar sitios web y otros contenidos visuales mediante la creación de tableros.

Cuando los usuarios añaden tu contenido a su tablero de Pinterest, ayudan a otras personas a descubrir tu sitio web. Pinterest es una fuente de tráfico especialmente importante si tienes un sitio web de fotografía, un blog de moda o cualquier otro tipo de blog con muchas imágenes y vídeos.

Si añade un botón “Pin It” a su sitio web, animará a los visitantes a compartir su contenido en Pinterest.

Dicho esto, vamos a ver cómo puedes añadir un botón ‘Pin It’ de Pinterest en WordPress. Simplemente utilice los enlaces rápidos a continuación para saltar directamente al método que desea utilizar:

Método 1: Utilizar recuentos compartidos (rápido y sencillo)

La forma más sencilla de añadir un botón de Pinterest a tu sitio WordPress es utilizando Shared Counts.

Es uno de los mejores plugins de medios sociales para WordPress que le permite añadir fácilmente un botón de Pinterest a su sitio, junto con botones para todas las demás redes sociales importantes.

Para empezar, necesitas instalar y activar el plugin Shared Counts. Puede seguir nuestra guía paso a paso sobre cómo instalar un plugin de WordPress para obtener instrucciones detalladas.

Tras la instalación, debe dirigirse a Ajustes ” Recuentos compartidos para configurar el plugin.

Aquí, desplácese hasta la sección Despliegue y, a continuación, haga clic en el cuadro de texto “Compartir botones para desplegar”.

Se abrirá un menú desplegable en el que podrá seleccionar los servicios de medios sociales que desee añadir. Por ejemplo, puede utilizar Shared Counts para añadir un botón “Me gusta” de Facebook, un botón para compartir y retwittear en Twitter, etc.

Para crear un botón “Pin It”, selecciona “Pinterest” en el menú desplegable.

A continuación, puedes abrir el menú desplegable “Estilo del botón Compartir” y elegir un estilo para el botón de Pinterest.

También puedes seleccionar la ubicación y el tipo de entrada donde quieres mostrar el botón de Pinterest.

Cuando estés satisfecho con cómo está establecido, sólo tienes que hacer clic en el botón “Guardar cambios”.

Ahora puedes visitar cualquier entrada de tu blog de WordPress para ver el botón de Pinterest en acción.

Método 2: Usar un shortcode personalizado (Recomendado)

A veces, es posible que desee controlar exactamente dónde aparece el botón “Pin It” en su sitio. Por ejemplo, es posible que desee mostrar el botón de Pinterest en páginas de destino específicas o dentro del contenido de la entrada.

Una opción es crear el botón utilizando código y luego colocarlo en cada página o entrada utilizando un shortcode personalizado. Esto te da la libertad de mostrar el botón “Pin It” en diferentes lugares, pero tendrás que añadirlo a cada página o entrada manualmente.

La forma más fácil de añadir código personalizado a WordPress es usando WPCode. Es el mejor plugin de fragmentos de código y te permite añadir PHP personalizado, CSS, JavaScript y mucho más a tu sitio web. También puedes crear shortcodes personalizados, por lo que es perfecto para añadir un botón ‘Pin It’ a tu sitio web.

En primer lugar, deberá instalar y activar el plugin gratuito WPCode. Para más información, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado el plugin, vaya a Fragmentos de código ” Añadir fragmento.

Aquí, verás todos los fragmentos de código prefabricados que WPCode puede añadir a tu sitio. Estos incluyen un fragmento de código que te permite desactivar completamente los comentarios, subir tipos de archivo que WordPress no suele soportar, desactivar páginas de adjuntos, y mucho más.

Aquí, tiene que pasar el ratón por encima de la opción “Añadir su código personalizado (nuevo fragmento)” y hacer clic en el botón “Usar fragmento” cuando aparezca.

En la siguiente pantalla, escriba un título para el fragmento de código. Esto es sólo para tu referencia, así que puedes usar lo que quieras.

Vas a añadir PHP a WordPress, así que abre el menú desplegable “Tipo de código” y elige “Código PHP”.

Una vez hecho esto, basta con pegar lo siguiente en el editor de código:

function get_pin($atts) {
$pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
return '<a href="http://pinterest.com/pin/create/button/?url=' . urlencode(get_permalink($post->ID)) . '&media=' . $pinterestimage[0] . '&description=' . get_the_title() .'" class="pin-it-button" count-layout="vertical">Pin It</a>'; }
  
add_shortcode('pin', 'get_pin');

Después, desplácese por la página hasta la sección “Inserción”. Aquí, puedes mantener el método por defecto de ‘Inserción automática’ para asegurarte de que el código se ejecuta en todas partes.

Si aún no está seleccionada, seleccione “Ejecutar en todas partes”.

Por último, desplácese a la parte superior de la pantalla y haga clic en el carrusel / control deslizante “Inactivo” para que aparezca “Activo”.

A continuación, basta con hacer clic en el botón “Guardar fragmento” o “Actualizar” para que el fragmento de código pase a estar activo.

Ahora puedes añadir un botón “Pin It” a cualquier página, entrada o widget de WordPress utilizando el shortcode [pin].

Para obtener instrucciones paso a paso sobre cómo colocar el shortcode, consulte nuestra guía sobre cómo añadir un shortcode en WordPress.

Cómo añadir el botón “Pin It” de Pinterest con el editor de sitio completo

Si está utilizando uno de los temas más recientes activados por bloques, puede añadir un botón “Pin It” en cualquier lugar de su tema de WordPress utilizando el shortcode personalizado.

Esta es una forma sencilla de añadir el botón a todas las páginas y entradas. También puede añadir el botón “Pin It” a las áreas que no se pueden editar con el editor de contenido estándar de WordPress, como la plantilla de la página 404 de su sitio.

Para empezar, vaya a Temas “ Editor en el escritorio de WordPress.

Por defecto, el editor de sitio completo mostrará la plantilla de inicio de su tema.

Para añadir un botón “Pin It” a otra página, seleccione “Plantilla” o “Partes de plantilla” en el menú de la izquierda.

Ahora puede seleccionar la plantilla que desea editar.

En este ejemplo, le mostraremos cómo añadir un botón “Pin It” a la plantilla de página única de su sitio. Sin embargo, los pasos serán similares independientemente de la plantilla que elija.

WordPress mostrará ahora una vista previa de la plantilla o parte de la plantilla.

Para editar esta plantilla, sigue adelante y haz clic en el pequeño icono del lápiz.

Una vez hecho esto, haz clic en el icono azul “+” de la esquina superior izquierda.

En la barra de búsqueda que aparece, escribe ‘Shortcode’.

Cuando aparezca el bloque adecuado, arrástrelo y suéltelo en la estructura / disposición / diseño / plantilla.

Ahora puede escribir el shortcode Pin en el bloque.

A continuación, basta con hacer clic en “Guardar” para que el nuevo shortcode se active.

Ahora, si visitas tu sitio web WordPress, verás el botón “Pin it” en acción.

Método 3: Usando código y FTP (No requiere plugin de WordPress)

Si no quieres utilizar un plugin, puedes añadir un botón de Pinterest a tu sitio web añadiendo código a los archivos de tu tema.

Editar los archivos del tema directamente puede causar muchos errores comunes de WordPress, y perderás todo el código personalizado cuando actualices el tema de WordPress. Teniendo esto en cuenta, siempre recomendamos usar WPCode en su lugar.

Sin embargo, si usted utiliza este método, entonces usted necesitará comenzar haciendo una copia de seguridad completa de WordPress de su sitio. Esto le ayudará a restaurar su sitio en caso de que algo se rompa por accidente.

Una vez hecho esto, conéctese a su alojamiento WordPress mediante un cliente FTP y vaya a la carpeta /wp-content/themes/.

A partir de aquí, debe abrir la carpeta de su tema actual y localizar el archivo footer.php.

A continuación, basta con hacer clic con el botón derecho del ratón en ese archivo y seleccionar “Descargar” en el menú. Esto descargará el archivo footer.php a su ordenador.

Ahora, tienes que abrir el archivo footer.php con un editor de texto plano como el Bloc de notas y pegar el siguiente script justo antes de la etiqueta </body>.

<script type="text/javascript">
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();
</script>

Una vez hecho esto, hay que guardar el archivo y volver a subirlo a la carpeta del tema actual.

A continuación, localice el archivo de plantilla en su tema donde desea añadir el botón. Normalmente, este será el archivo single.php, pero puede variar dependiendo de tu tema de WordPress. Si no estás seguro, puedes consultar nuestra guía para principiantes sobre la jerarquía de plantillas de WordPress.

Para editar el archivo de plantilla, sólo tiene que descargarlo de la carpeta de temas y abrirlo para editarlo.

Tendrás que elegir la ubicación donde quieres mostrar el botón ‘Pin It’. Muchos sitios web muestran los botones para compartir en redes sociales directamente debajo del título de la entrada, pero puedes utilizar cualquier ubicación que desees.

Después de elegir una ubicación, basta con añadir el siguiente código:

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>

El fragmento de código anterior añade la imagen destacada, el título, la descripción y la URL de la entrada en el parámetro URL para compartir.

El fragmento de código anterior añadirá un botón de compartir vertical a todas tus entradas. Si desea mostrar un botón de compartir horizontal, simplemente cambie la sección count-layout= "vertical"> por count-layout="horizontal">.

Cuando esté listo, guarde el archivo y vuelva a subirlo a su tema directamente mediante FTP.

Método 4: Añadir Pinterest Pin It botón sobre sus imágenes

Si tienes un blog de moda, fotografía, comida o cualquier otro tipo de blog que utilice muchas imágenes, puedes añadir un botón de Pinterest sobre ellas. De este modo, los visitantes podrán compartir tu contenido simplemente pasando el cursor sobre la imagen que quieren pinear.

La forma más fácil de añadir un botón de Pinterest sobre tus imágenes es utilizando Weblizar Pin It Button On Image Hover And Entradas.

En primer lugar, debe instalar y activar el plugin. Para más detalles, puede consultar nuestra guía sobre cómo instalar un plugin de WordPress. Una vez activado, seleccione PinIt Button en el menú de la izquierda para establecer los ajustes del plugin.

Aquí puedes elegir si quieres añadir el botón “Pin It” a tus entradas o páginas.

A continuación, busca la sección “Mostrar el botón Anclar al pasar el cursor por la imagen” y asegúrate de que está establecida en “Sí”.

Además, el plugin te permite mostrar el botón Pin It en dispositivos móviles y cambiar el tamaño del botón.

Cuando estés satisfecho con la configuración del plugin, no olvides hacer clic en “Guardar” para guardar los cambios. Ahora, simplemente visita tu sitio web y pasa el cursor sobre cualquier imagen para ver el botón de Pinterest en acción.

¿Quieres quitar / eliminar el botón ‘Pin It’ de una imagen específica? Para ello, tendrás que obtener la URL de la imagen en WordPress.

Después de eso, simplemente vaya a la página del Botón PinIt, pero esta vez seleccione la pestaña ‘Excluir imágenes’. Ahora puedes añadir la URL de la imagen al campo que muestra ‘Introducir URL SRC de la imagen’ por defecto.

Una vez hecho esto, haga clic en el botón “Añadir”.

También puedes quitar el botón de Pinterest de una página concreta seleccionando la pestaña “Excluir páginas”. Aquí, simplemente escribe el nombre de la página que quieres excluir y luego haz clic en el botón ‘Añadir’.

Alternativa: Si estás buscando un plugin más potente para añadir botones Pin It de Pinterest en tus imágenes, entonces te recomendamos Tasty Pins.

Tasty Pins te permite añadir fácilmente botones “Pin It” al pasar el cursor sobre todas tus imágenes. Incluso puedes añadir banners ‘Pin It’ totalmente personalizables a la primera imagen de las entradas de tu blog.

También puedes utilizar Tasty Pins para añadir un cuadro de seguimiento de Pinterest, establecer descripciones de Pinterest, desactivar el pineado de determinadas imágenes, ocultar imágenes específicas de Pinterest de tu página y mucho más.

Esperamos que este artículo te haya ayudado a entender cómo añadir un botón “Pin It” de Pinterest a tu blog de WordPress. También puedes consultar nuestra guía sobre cómo crear un boletín de correo electrónico o nuestra comparativa de los mejores programas de diseño web.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.