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

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

Fue lo suficientemente significativo como para hacernos notar. Esta fuente de tráfico fue Pinterest.

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

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

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

Pinterest ha cambiado oficialmente el nombre del botón «Pin It» a Salvar en 2016.

Aunque algunos plugins todavía usan el nombre «Pin It» en lugar de Guardar, hacen el mismo trabajo de fijar sus imágenes en Pinterest.

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

Se recomienda utilizar Recuentos compartidos plugin para este propósito. Es el mejor plugin de redes sociales para WordPress porque es gratuito y le permite agregar fácilmente el botón de Pinterest junto con otras redes sociales populares.

Para comenzar, debe instalar y activar el Recuentos compartidos conectar. Puede seguir nuestra guía paso a paso sobre cómo instalar un plugin de WordPress para obtener instrucciones detalladas.

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

Página de configuración de recuentos compartidos

En la página de configuración, debe desplazarse hacia abajo hasta el archivo Pantalla sección y luego haga clic en el cuadro de texto «Compartir botones para mostrar».

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

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

Una vez hecho esto, no olvide hacer clic en el archivo. Guardar los cambios para almacenar la 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 interesante sobre SharedCounts es la Plugin de imagen personalizado de Pinterest disponible en Github. Esto le permite configurar una imagen personalizada para compartir en Pinterest y una descripción optimizada para Pinterest.

Nota: Usamos el plugin SharedCount en nuestro sitio web porque 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 intermedios pueden preferir agregar manualmente botones para compartir en redes sociales a su sitio de WordPress en lugar de usar un plugin.

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

Lo primero que debe hacer es realizar una copia de seguridad completa de WordPress de su sitio. Esto le ayudará a restaurar su sitio en caso de que algo se rompa accidentalmente.

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

Desde aquí, debe abrir la carpeta del tema actual y luego ubicar el archivo footer.php.

Descarga el archivo php de pie de página

Luego, simplemente haga clic derecho en ese archivo y luego seleccione Descargar del menú. Esto descargará el archivo footer.php a su computadora.

Ahora necesita abrir el archivo footer.php usando un editor de texto simple como el Bloc de notas y luego pegar el siguiente script justo antes del </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, debe guardar el archivo y luego volver a cargarlo en su carpeta de temas actual.

A continuación, debe ubicar y descargar el archivo single.php de la carpeta del tema y abrirlo para editarlo. Después de eso, debe agregar el siguiente código.

Deberá elegir la posición en la que desea que aparezca en su 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 la imagen destacada, el título, la descripción y la URL de la publicación en el parámetro de URL para compartir.

Finalmente, debe guardar el archivo y volver a cargarlo en el directorio de temas mediante FTP.

Esto agregará un botón de compartir vertical a las publicaciones de su sitio web. Si desea ver el botón compartir horizontal, simplemente cambie el archivo count-layout parámetro horizontalmente.

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 le permiten agregar fácilmente elementos dinámicos a sus publicaciones, páginas y widgets de WordPress. Al crear un código abreviado, podrá agregar manualmente el botón de Pinterest en sus artículos.

Primero, deberá agregar el siguiente código al archivo functions.php de su tema o al plugin 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');

Después de eso, puedes usar el archivo [pin] shortcode en sus publicaciones de WordPress donde desea mostrar el botón Pinterest.

Se agregó el botón Pin It de Pinterest en las imágenes

Si tiene un sitio de moda, fotografía o portafolio, definitivamente necesita compartir sus imágenes en Pinterest para aumentar el tráfico de su sitio web.

Echemos un vistazo a cómo agregar el botón Pin it de Pinterest en sus imágenes en WordPress. Este botón solo aparecerá cuando el usuario pase el mouse sobre sus imágenes, lo que le permitirá compartir fácilmente la imagen en su perfil de Pinterest.

Primero, debe instalar y activar el Botón Pin it de Pinterest para imágenes conectar.

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

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

En la página de configuración, puede elegir dónde desea 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 del menú desplegable. Esto se utilizará como descripción de la imagen fijada.

Una vez hecho esto, debe hacer clic en el archivo Salvar para almacenar la configuración. Ahora puede visitar su sitio web y luego pasar el cursor del mouse sobre cualquier imagen para mostrar el botón «Pin It» de Pinterest.

Botón Pin It de Pinterest en las imágenes

Si desea excluir algunas imágenes de la visualización del botón Pin It, puede agregar el archivo 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 de 3 puntos verticales de la barra de herramientas del bloque. Esto abrirá un menú donde debe hacer clic Editar como HTML opción.

Editar imagen como opción HTML para agregar clase CSS

Ahora verá el código HTML de su imagen. Adelante para agregar nopin hacia clase 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 plugin para deshabilitar la visualización automática del botón «Pin It» y usar la clase CSS «pinthis» para mostrar selectivamente el botón en imágenes específicas.

Para hacer esto, debe visitar la página de configuración del plugin y luego ubicar el archivo Avanzado sección en el lado derecho de la página.

Configuración avanzada del plugin Pin It de Pinterest

Ahora debe seleccionar la opción que dice «Mostrar el botón» Pin it «solo en imágenes con class =» pinthis «», luego haga clic en Salvar botón.

La próxima vez que agregue una imagen a una publicación o página, debe seleccionar el bloque de imagen y luego usar el Editar como HTML opción para agregar el archivo pinthis Clase CSS al código de la 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 mostrará el botón de Pinterest en esa imagen específica, incluso si ha desactivado la opción para mostrar automáticamente el botón Pin It en su sitio.

¡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.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *