Cómo agregar el botón «Pin It» de Pinterest en WordPress (Guía definitiva)

 

¿Le gustaría agregar el botón de Pinterest «Pin It» en WordPress? Recientemente, apareció una nueva fuente de tráfico en las estadísticas de nuestro blog.

Fue lo suficientemente importante para que tomáramos nota. Esa fuente de tráfico fue Pinterest.

Pinterest es un sitio de redes sociales popular que le permite compartir contenido visual y generar mucho tráfico a su sitio web (Siga a WPBeginner en Pinterest).

En este artículo, le mostraremos cómo agregar el botón «Pin It» de Pinterest a su blog de WordPress. También le diremos cómo agregar el botón Pin It encima de las imágenes en su sitio web.

Agregue el botón Pin It de Pinterest en WordPress

Agregar un botón «Pin It» de Pinterest mediante un complemento

Pinterest cambió oficialmente el nombre del botón «Pin It» a ahorrar en 2016.

Aunque algunos complementos todavía usan el nombre «Pin It» en lugar de «Guardar», fijan sus imágenes a Pinterest de la misma manera.

La forma más fácil de agregar un botón de Pinterest a su sitio de WordPress es utilizar un complemento para compartir en redes sociales.

Recomendamos usarlo Recuentos divididos Complemento para este propósito. Es el mejor complemento de redes sociales para WordPress, ya que es gratuito y le permite agregar fácilmente el botón Pinterest junto con otras redes sociales populares.

Para comenzar, debe instalar y activar ese Recuentos divididos Enchufar. Puede seguir nuestra guía paso a paso sobre la instalación de un complemento de WordPress para obtener instrucciones detalladas.

Después de la instalación, vaya a Configuración »Recuentos compartidos Página para configurar el complemento.

Página de configuración para recuentos compartidos

En la página de configuración, debe desplazarse hacia abajo monitor Luego haga clic en el cuadro de texto Botones compartidos para mostrar.

Esto abrirá un menú desplegable donde puede elegir los servicios de redes sociales que desea agregar. De forma predeterminada, Pinterest está presente en este cuadro junto con Facebook y Twitter.

También puede elegir la ubicación y el tipo de publicación en la que desea que aparezca el botón de Pinterest. Incluye varios estilos de botones que puede elegir en la opción «Estilo de botón para compartir».

Cuando haya terminado, no olvide hacer clic guardar cambios Guarde el botón de configuración.

Ahora puede visitar cualquier publicación en su sitio web para ver el botón Pinterest en acción.

Botón de Pinterest agregado a la publicación de WordPress

Otra cosa buena de SharedCounts es la gratuita Complemento de imagen personalizado de Pinterest disponible en Github. Esta es una excelente manera de tener una imagen compartida de Pinterest personalizada y una descripción optimizada para Pinterest.

Nota: Usamos el complemento SharedCount en nuestro sitio web, ya que es la mejor opción del mercado. Está muy bien codificado y es gratis.

Agregar manualmente un botón Pin It de Pinterest en WordPress

Algunos usuarios avanzados pueden preferir agregar manualmente los botones para compartir en redes sociales a su sitio de WordPress en lugar de usar un complemento.

Echemos un vistazo a cómo agregar manualmente un botón de Pinterest en WordPress.

Lo primero que debe hacer es crear una copia de seguridad completa de WordPress de su sitio. De esa manera, en caso de que algo se rompa accidentalmente, puede restaurar su sitio web.

A continuación, debe conectarse a su alojamiento de WordPress a través de un cliente FTP y luego ir a la carpeta / wp-content / themes /.

Desde aquí, debe abrir su carpeta de temas actual y luego encontrar el archivo footer.php.

Descarga el archivo PHP de pie de página

Simplemente haga clic derecho en ese archivo y selecciónelo Descargar del menú. Esto descargará el archivo footer.php a su computadora.

Ahora necesita abrir el archivo footer.php con un editor de texto sin formato como el Bloc de notas y luego pegar el siguiente script justo antes. </body> Etiqueta.

<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 que haya hecho eso, deberá guardar el archivo y luego volver a cargarlo en la carpeta de temas actual.

A continuación, deberá encontrar el archivo single.php de su carpeta de temas, descargarlo y abrirlo para editarlo. Después de eso, debe agregar el siguiente código.

Debes elegir el lugar donde quieres que aparezca en tu publicación. Después del título de la publicación es la ubicación más común para los botones de redes sociales.

<?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 código anterior muestra el botón de Pinterest con su imagen destacada, título, descripción y URL de publicación en el parámetro compartir URL.

Finalmente, debe guardar el archivo y volver a cargarlo en su directorio de temas a través de FTP.

Esto agregará un botón de compartir vertical a las publicaciones en su sitio web. Si desea mostrar el botón de compartir horizontal, simplemente cambie el count-layout Parámetros en horizontal.

Creando un shortcode para el botón Pinterest

Recientemente, uno de nuestros usuarios nos preguntó cómo crear un código corto para el botón ‘Pin It’ de Pinterest.

Los códigos cortos en WordPress facilitan la adición de elementos dinámicos a sus publicaciones, páginas y widgets de WordPress. Al crear un código abreviado, puede agregar manualmente el botón de Pinterest a sus artículos.

Primero, debe agregar el siguiente código al archivo functions.php de su tema o un complemento específico del sitio:

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');

Entonces puedes usarlos [pin] Código corto en sus publicaciones de WordPress donde desea mostrar el botón Pinterest.

Agrega un botón Pin It de Pinterest sobre tus imágenes

Si tiene un sitio web de moda, fotografía o portafolio, definitivamente desea que sus imágenes se compartan en Pinterest para aumentar el tráfico del sitio web.

Echemos un vistazo a cómo agregar el botón Pin it de Pinterest sobre sus imágenes en WordPress. Este botón solo aparecerá cuando el usuario esté pasando el cursor sobre sus imágenes y pueda compartir fácilmente la imagen en su perfil de Pinterest.

Primero necesitas instalar y activar eso Botón pin it de Pinterest para fotos Enchufar.

Después de la activación, vaya a Configuración »Pinterest Pin It Página para configurar el complemento.

Botón Pin It de Pinterest para la página de configuración de imágenes

La página de configuración le permite elegir dónde mostrar el botón Pin It en su sitio de WordPress. Solo puede verlo en publicaciones individuales, páginas, páginas de categorías o en cualquier lugar de su sitio.

La siguiente opción es elegir la descripción predeterminada en el menú desplegable. Esto se utilizará como descripción de la imagen adjunta.

Una vez que haya terminado, debe hacer clic en ese ahorrar Guarde el botón de configuración. Ahora puede visitar su sitio web y luego colocar el cursor sobre cualquier imagen para ver el botón «Pin It» de Pinterest.

Pinterest pin it button over imágenes

Si desea excluir algunas imágenes del botón pin-it, puede agregarlas Nopin Clase CSS para las imágenes que desea excluir.

Para hacer esto, debe seleccionar el bloque de imagen en el editor de publicaciones y luego hacer clic en el icono con los tres puntos verticales en la barra de herramientas del bloque. Esto abrirá un menú donde debes hacer clic Editar como HTML Posibilidad.

Edite la imagen como una opción HTML para agregar una clase CSS

Ahora verá el código HTML de su imagen. Proceda a agregar Nopin al estupendo Atributo de la etiqueta img:

<figure class="wp-block-image"><img src="https://example.com/wp-content/uploads/2019/06/imagename.jpg" alt="image name" class="nopin wp-image-1687"/></figure>

De manera similar, también puede usar el complemento para desactivar la visualización automática del botón Pin It y usar la clase Pinthis CSS para mostrar selectivamente el botón en imágenes específicas.

Para hacer esto, debe visitar la página de configuración del complemento y luego buscarlo Avanzado Sección de la derecha.

Configuración avanzada para el complemento Pin It de Pinterest

Ahora tienes que activar la opción «Mostrar pin» solo para imágenes con class = «pinthis» y luego hacer clic en ahorrar Botón.

La próxima vez que agregue una imagen a una publicación o página, deberá seleccionar el bloque de imagen y luego usarlo Editar como HTML Opción para agregar el Pinthis Clase CSS para código de imagen. Aquí hay un ejemplo:

<figure class="wp-block-image"><img src="https://example.com/wp-content/uploads/2019/06/imagename.jpg" alt="image name" class="pinthis wp-image-1687"/></figure>

Esto hará que el botón de Pinterest aparezca en esa imagen en particular, incluso si desactivó la opción para mostrar automáticamente el botón Pin It en su sitio web.

¡Eso es todo!

Esperamos que este artículo le haya ayudado a comprender cómo agregar un botón «Pin It» de Pinterest a su blog de WordPress. También puede consultar nuestra guía sobre cómo crear un boletín informativo por correo electrónico y obtener más suscriptores.