Tutoriales de WordPress de Confianza, cuando más los necesitas.
Guía para Principiantes de WordPress
Copa WPB
25 Millones+
Sitios web que usan nuestros plugins
16+
Años de experiencia en WordPress
3000+
Tutoriales de WordPress de expertos

Cómo agregar el botón "Pin It" de Pinterest en WordPress (4 formas)

Animar a las personas a compartir tu contenido en redes sociales es una excelente manera de aumentar tu audiencia y generar entusiasmo en tu negocio.

Pero la realidad es que la gente solo compartirá tu contenido si se lo pones fácil.

Usamos botones para compartir en redes sociales en el blog de WPBeginner para que nuestros lectores puedan compartir nuestro contenido con un simple clic, así que sabemos de lo que hablamos. 🤓

En nuestra experiencia, Pinterest es una plataforma fantástica para dirigir tráfico a tu sitio de WordPress, especialmente si publicas contenido visual como fotos, infografías y arte digital.

Agregar un botón de "Pineado" a tu sitio de WordPress permite a tus visitantes compartir rápidamente imágenes u otro contenido visual en sus tableros de Pinterest. ¡Además, puede tener muchas ventajas! Piensa en: más visitantes, más comentarios y más ventas. 💥

En este artículo, te mostraremos cómo agregar el botón "Pineado" de Pinterest a WordPress.

Cómo agregar el botón "Pin It" de Pinterest en WordPress

¿Por qué agregar el botón "Pineado" de Pinterest en WordPress?

Pinterest es una popular plataforma de redes sociales que permite a los usuarios recopilar enlaces de sitios web y otro contenido visual creando tableros.

Cuando los usuarios agregan tu contenido a su tablero de Pinterest, ayuda a otras personas a descubrir tu sitio web. Pinterest es una fuente de tráfico particularmente importante si tienes un sitio web de fotografía, un blog de moda o cualquier otro tipo de blog que tenga muchas imágenes y videos. 

Agregar un botón de 'Guardar' a tu sitio web puede animar a los visitantes a compartir tu contenido en Pinterest.

Un ejemplo de un botón para compartir de Pinterest 'Pin It'

Nota: Pinterest cambió oficialmente el nombre del botón 'Pin It' a 'Guardar' en 2016. Sin embargo, muchas guías y plugins de WordPress todavía usan 'Pin It', por lo que usamos el nombre original en esta guía. ¡Además, suena más pegadizo!

Dicho esto, veamos cómo puedes agregar un botón 'Guardar' de Pinterest en WordPress. Simplemente usa los enlaces rápidos a continuación para ir directamente al método que deseas usar:

Método 1: Agregar el botón 'Guardar' de Pinterest a las publicaciones (forma fácil)

La forma más fácil de agregar un botón de Pinterest a tu sitio de WordPress es usando Novashare. En nuestra opinión, es uno de los mejores plugins de redes sociales para WordPress.

Te permite agregar fácilmente un botón de Pinterest a tu sitio, junto con botones para todas las demás redes sociales importantes. Hemos probado Novashare para muchos casos de uso diferentes, y nos gusta mucho lo fácil que es de usar. Para obtener más información sobre el plugin, consulta nuestra reseña completa de Novashare.

Para empezar, necesitas visitar el sitio web de Novashare y elegir un plan. Luego, tendrás que instalar y activar el plugin. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Precios y planes de Novashare

Tras la activación, deberás navegar a la página Ajustes » Novashare en tu panel de WordPress para activar tu licencia.

Simplemente haz clic en la pestaña ‘Licencia’, pega la clave de licencia que te dieron al comprar el plugin y luego haz clic en el botón ‘Guardar licencia’.

Activa tu licencia de Novashare

Una vez que hayas activado tu licencia, puedes añadir un icono de Pinterest a tu sitio web y cualquier otro icono de compartir en redes sociales que desees. Puedes añadir estos iconos en línea con tu contenido o como una barra flotante.

Usaremos la primera opción aquí (pero sigue leyendo para obtener más información sobre las barras flotantes).

Simplemente navega a la pestaña ‘Contenido en línea’ en Novashare y activa el interruptor ‘Habilitar contenido en línea’. Luego, haz clic en el botón de Pinterest para que se ponga rojo.

En este punto, también puedes habilitar cualquier otra red social que desees añadir a la barra de botones para compartir en redes sociales.

Añadir un botón de Pinterest en línea usando Novashare

Después de eso, puedes desplazarte hacia abajo y usar las opciones disponibles para configurar la barra de botones.

Hay configuraciones para mostrar la barra de botones en publicaciones, páginas y más. También puedes personalizar el color y el diseño de los botones.

Incluso puedes agregar etiquetas a los botones y mostrar un contador de cuántas veces se ha compartido la publicación actual en las redes sociales.

Cubrimos todas estas opciones y barras flotantes en detalle en nuestra guía sobre cómo agregar botones para compartir en redes sociales en WordPress.

Cuando hayas terminado de personalizar tu botón 'Pin It', desplázate hasta el final de la página. Aquí, haz clic en el botón 'Guardar Cambios' para almacenar la nueva configuración.

Ahora puedes visitar tu sitio web de WordPress para ver el botón de Pinterest en acción.

Botón de Pinterest añadido a una publicación de WordPress

Método 2: Agregar el botón 'Pin It' de Pinterest a las imágenes (Forma fácil)

¿Tienes un blog de moda, fotografía o comida? Entonces, es posible que desees agregar un botón de Pinterest sobre estas imágenes. Esto permite a los visitantes compartir tu contenido simplemente pasando el cursor sobre la imagen que desean fijar.

El plugin Novashare que usamos en el Método 1 también puede agregar un botón 'Pin' de Pinterest cuando pasas el cursor sobre cualquier imagen en tu sitio.

Una vez que compres una licencia y instales el plugin, como explicamos en el Método 1 anterior, dirígete a Configuración » Novashare y haz clic en la pestaña 'Pinterest'.

Ahora, activa 'Habilitar Pines de Imagen' y selecciona los 'Tipos de Publicación' donde deseas mostrar el botón.

Habilitar pines de imagen en Novashare

A continuación, puedes personalizar la posición, forma y color del botón. La otra configuración predeterminada funcionará bien para la mayoría de los sitios web.

Si lo prefieres, puedes mostrar el botón de Pinterest sobre las imágenes en todo momento, no solo cuando pasas el mouse sobre una imagen. Para hacerlo, deberás habilitar la opción 'Mostrar siempre'.

Personalizar el botón de Pinterest en Novashare

Algunos propietarios de sitios web tienen algunas imágenes que no desean compartir. En ese caso, puedes escribir los nombres de archivo en el campo 'Imágenes excluidas'.

Cuando estés satisfecho con la configuración, asegúrate de hacer clic en el botón 'Guardar cambios'. Luego, Novashare comenzará a mostrar el botón 'Pin' en las imágenes.

Ejemplo de botón de pin de Pinterest con Novashare

Método 3: Agregar el botón 'Pin It' de Pinterest usando un shortcode personalizado

A veces, es posible que desees controlar exactamente dónde aparece el botón 'Pin It' en tu sitio. Por ejemplo, podrías querer mostrar el botón de Pinterest en una página de destino de anuncios específica o dentro del contenido de una publicación.

En ese caso, una opción es crear el botón usando código y luego colocarlo en cada página o publicación usando un shortcode personalizado. Esto te da la libertad de mostrar el botón 'Pin It' en diferentes ubicaciones, pero deberás agregarlo a cada página o publicación manualmente.

La forma más fácil de agregar código personalizado a WordPress es usando WPCode. Te permite agregar PHP, CSS, JavaScript personalizados y más a tu sitio web.

Varias de nuestras marcas asociadas usan este plugin para administrar fragmentos de código en sus sitios, y todas nos han comentado lo mucho que les encanta. Para más información, consulta nuestra reseña completa de WPCode.

También puedes usar WPCode para crear shortcodes personalizados, por lo que es perfecto para añadir un botón de 'Pin It' a tu sitio web.

Primero, necesitarás instalar y activar el plugin gratuito WPCode. Para más información, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté activado, ve a Fragmentos de código » Agregar fragmento.

Cómo añadir un fragmento de código usando WPCode

Aquí verás todos los fragmentos prehechos que WPCode puede añadir a tu sitio. Estos incluyen fragmentos que te permiten añadir botones para compartir en redes sociales a WordPress y mostrar tus iconos sociales en una barra lateral.

Ahora, necesitas pasar el ratón sobre la opción 'Añadir tu código personalizado (Nuevo fragmento)' y hacer clic en el botón '+ Añadir fragmento personalizado' cuando aparezca.

Agregar un fragmento personalizado a WordPress

Luego, vas a añadir PHP a WordPress, así que necesitas seleccionar 'Fragmento de PHP' como tipo de código.

Elegir un fragmento de PHP en WPCode

En la siguiente pantalla, escribe un título para el fragmento de código.

Esto es solo para tu referencia, así que puedes usar lo que quieras. Para este tutorial, escribiremos 'Botón Pin It de Pinterest'.

Introduce un nombre para el fragmento y pega el código para el botón 'pin it'

Hecho esto, simplemente pega lo siguiente en el editor de código:

function get_pin($atts) {
    global $post;
    if ($post) {
        $pinterestimage = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
        if ($pinterestimage) {
            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>';
        } else {
            return 'No Pinterest image available.';
        }
    } else {
        return 'No post found.';
    }
}
add_shortcode('pin', 'get_pin');

Después de eso, desplázate hacia abajo en la página hasta la sección ‘Inserción’. Aquí, puedes mantener el método predeterminado ‘Inserción automática’ para asegurarte de que el código se ejecute en todas partes.

Si aún no está seleccionado, selecciona ‘Ejecutar en todas partes’

El método de inserción automática predeterminado en WPCode

Finalmente, desplázate hasta la parte superior de la pantalla y haz clic en el control deslizante 'Inactivo' para que muestre 'Activo'.

Luego, simplemente haz clic en el botón ‘Guardar fragmento’ o ‘Actualizar’ para que el fragmento de código esté activo.

Guardar y activar fragmento de código WPCode

Ahora, puedes agregar un botón ‘Fijar’ a cualquier página, publicación o área lista para widgets de WordPress usando el shortcode [pin].

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

usa el shortcode [pin] en tus publicaciones de WordPress

Después de agregar este código, los visitantes verán un botón ‘Fijar’ en cualquier página o publicación que tenga una imagen destacada.

Si la página no tiene una imagen destacada, verán un mensaje de error ‘No hay imagen de Pinterest disponible’ en su lugar.

Cómo agregar el botón ‘Fijar’ de Pinterest usando el editor de sitio completo

Si estás utilizando uno de los temas más nuevos habilitados para bloques, puedes agregar un botón ‘Fijar’ en cualquier lugar de tu tema de WordPress usando el shortcode personalizado.

Esta es una forma fácil de agregar el botón a cada página y publicación. También puedes agregar el botón ‘Fijar’ a áreas que no puedes editar usando el editor de contenido estándar de WordPress, como la plantilla de página 404 de tu sitio.

Para comenzar, simplemente ve a Temas » Editor en el panel de WordPress.

Abrir el editor de sitio completo (FSE) de WordPress

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

Para agregar un botón ‘Fijar’ a una página diferente, simplemente selecciona ‘Plantilla’ o ‘Partes de plantilla’ del menú de la izquierda.

Elegir una plantilla de WordPress o una parte de plantilla en el editor de sitio completo

Ahora puedes seleccionar la plantilla que deseas editar.

En este ejemplo, te mostraremos cómo agregar un botón ‘Fijar’ a la plantilla de página Individual de tu sitio. Sin embargo, los pasos serán similares sin importar la plantilla que elijas.

Elegir una plantilla individual habilitada para bloques

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

Para editar esta plantilla, haz clic en el pequeño ícono de lápiz.

Cómo editar una plantilla individual de WordPress usando el editor basado en bloques

Hecho esto, haz clic en el ícono azul '+' en la esquina superior izquierda.

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

Cómo añadir un botón 'Pin It' usando shortcode

Cuando aparezca el bloque correcto, arrástralo y suéltalo en el diseño de la plantilla.

Ahora puedes escribir el shortcode Pin en el bloque.

Agregar un botón de Pin de Pinterest a tu sitio web usando el editor de sitio completo (FSE)

Después de eso, simplemente haz clic en ‘Guardar’ para que el nuevo shortcode esté activo.

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

Método 4: Agrega el botón ‘Pin It’ de Pinterest usando código y FTP

Otra forma de agregar un botón de Pinterest a tu sitio web sin un plugin es agregar código directamente a los archivos de tu tema. Sin embargo, este método solo es adecuado para usuarios técnicos.

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 utilizas este método, deberás comenzar haciendo una copia de seguridad completa de WordPress de tu sitio. Esto te ayudará a restaurar tu sitio en caso de que algo se rompa accidentalmente.

Hecho esto, conéctate a tu hosting de WordPress usando un cliente FTP y luego ve a la carpeta /wp-content/themes/.

Desde aquí, necesitas abrir la carpeta de tu tema actual y luego localizar el archivo footer.php.

Descargar el archivo footer.php en WordPress

A continuación, simplemente haz clic derecho en ese archivo y luego selecciona ‘Descargar’ del menú. Esto descargará el archivo footer.php a tu computadora.

Ahora, necesitas abrir el archivo footer.php usando 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 que hayas hecho eso, necesitas guardar el archivo y luego subirlo de nuevo a la carpeta del tema actual.

A continuación, localiza el archivo de plantilla en tu tema donde quieres 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, simplemente descárgalo de la carpeta de tu tema y ábrelo para editarlo.

Necesitarás elegir la ubicación donde quieres mostrar el botón 'Pin It'. Muchos sitios web muestran botones para compartir en redes sociales directamente debajo del título de la publicación, pero puedes usar la ubicación que desees.

Después de elegir una ubicación, simplemente agrega 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 agrega la imagen destacada, el título, la descripción y la URL de la publicación en el parámetro de URL para compartir.

Este fragmento de código también agregará un botón para compartir vertical a todas tus publicaciones. Si deseas mostrar un botón para compartir horizontal en su lugar, simplemente cambia la sección count-layout="vertical"> por count-layout="horizontal">.

Cuando estés listo, guarda el archivo y cárgalo de nuevo a tu tema directamente usando FTP.

Bonificación: Guías adicionales sobre WordPress y redes sociales

¿Interesado en aprender más sobre cómo usar WordPress con redes sociales? Consulta estas guías para principiantes:

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Descargo de responsabilidad: Nuestro contenido es compatible con el lector. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Consulta cómo se financia WPBeginner, por qué es importante y cómo puedes apoyarnos. Aquí está nuestro proceso editorial.

El Kit de herramientas definitivo para WordPress

Obtén acceso GRATUITO a nuestro kit de herramientas: ¡una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Interacciones del lector

65 CommentsLeave a Reply

  1. Gracias por el fragmento de código PHP.
    Copié y pegué el código en el archivo footer.php de mi sitio web, pero el botón no apareció inicialmente después de subirlo.
    Me di cuenta de que necesitaba limpiar mi caché antes de que el nuevo botón se mostrara correctamente.

  2. Gracias por el fragmento de PHP. Lo probé en uno de los sitios y funciona de maravilla. Me has ahorrado espacio entre plugins. Buen trabajo.

  3. Hola. Recientemente agregué los plugins de conteos compartidos y el complemento de Pinterest. Parecen funcionar bien, pero noto que no se han actualizado en varios años ni se han probado con mi versión de Wordpress. ¿Debería buscar un nuevo plugin o todavía están bien para usarlos?

  4. Estoy buscando agregar un pin gráfico individual que he diseñado personalizado a la publicación de blog de viajes a la que pertenece (como las mejores cosas que hacer en Jaipur). ¿Es eso lo que cubre este artículo o es solo el "Botón" literal de Pinterest que se parece al logo de Pinterest? Disculpa mi fijación con esta tecnicidad, pero una o dos imágenes harían mucho más claro qué es específicamente el "botón" al que te refieres... gracias de antemano...

    • Esto es para el botón 'Pin it' de Pinterest, la segunda captura de pantalla en el artículo debería ser lo que buscas como ejemplo.

      Administrador

  5. Hola wpbeginner, sigo tus códigos, ¿puedo saber si todavía fijaré las imágenes en mis tableros de Pinterest? ¿o se fijarán automáticamente allí? Todavía soy principiante en esta plataforma. gracias

  6. Gracias por el código. Acabo de agregarlo a mi sitio de autor. (No tengo idea de cómo aparece el botón de Pinterest en las imágenes de mi sitio de negocios, pero aparece.)

    ¡Ahora mi sitio de autor está listo!
    Gracias, Syed.

    P.S. I just followed you on Pinterest. :)

  7. Hice la última opción, agregando el código corto a mi archivo functions.php del tema. Funcionó, pero ya no pude guardar mis publicaciones como borrador. Luego eliminé el código y no está funcionando. Mi sitio todavía está en línea, pero ya no puedo iniciar sesión en mi sitio. Aparece el siguiente mensaje:

    Advertencia: No se puede modificar la información de encabezado – los encabezados ya se enviaron (la salida comenzó en /home/peque107/public_html/wp-content/themes/himmelen/functions.php:2) en /home/peque107/public_html/wp-includes/pluggable.php en la línea 1224

    ¡Por favor ayuden!

  8. ¿Esto solo se aplica a los blogs de wordpress.org? Tengo un blog de wordpress.com y no estoy seguro de si puedo agregar este complemento.

    ¡Gracias!

  9. Tengo un problema. Seguí las instrucciones y me apareció este error:

    Error de análisis: error de sintaxis, se encontró '<' inesperado en /home/cmomb/butfirstwehavecoffee.com/wp-content/themes/notepad/functions.php en la línea 18

    Ahora no puedo deshacerme de él. ¿Alguien podría aconsejarme? Mi sitio ahora está caído.

  10. Gracias por esto, en primer lugar

    Estoy teniendo problemas para posicionar el elemento. Parece que siempre se queda en la esquina superior izquierda del div.

    ¿Es posible posicionarlo y también cambiar la imagen de fondo por una personalizada?

    Gracias

  11. Buen tutorial, lo he puesto en mi sitio sin ningún problema, lo probé y funcionó, pero todavía dice 0 después de que lo fijé.
    Mark

  12. Probé tantos plugins... no funcionan con scroll infinito y la galería nextgen... pero con algunos cambios este script resolvió mi problema.. gracias

  13. Hola,

    Solo quiero preguntar si podría cambiar el tamaño del botón "pin it"? Porque parece que era un poco pequeño.

    Saludos,

    Michael

  14. Este código dejó de funcionar recientemente. Lo tenía en mi sitio y funcionaba muy bien y recientemente las imágenes parecen funcionar, pero luego cuando vas a ver el pinboard no hay ninguna imagen configurada. Otras veces, al intentar fijarlo, aparece un error 502 que proviene del sitio de Pinterest. ¿Alguna idea?

  15. Hay un error en el código. El href generado para el botón "pin it" debería incluir 'url=', actualmente le falta el signo de igual.

  16. Para usuarios de WordPress... agregar el botón "pin it" o cualquier otra red social es fácil. En el panel de control, ve a configuración, haz clic en compartir y todos aparecen. Haz clic en lo que quieras agregar.

  17. I tried adding this… it worked but when you click on “Pin it” and it opens the window in a new browser and you actually submit the pin, it just reloads the newly opened window and the pin isn’t submitted. Decided not to implement it until they’ve fixed their bugs.

  18. I used the ‘follow me’ code on the Pinterest Goodies page and pasted it into the ‘text’ widget on my WordPress blog. The button now appears right after my mini bio. It works quite well. :)

  19. Para cualquier framework de tema avanzado como Thesis, Genesis, Headway, etc., tienes que agregar estos códigos a través del archivo functions.php usando los hooks apropiados del framework. No podemos cubrir todos los frameworks de temas que existen. La mayoría de los blogs de frameworks de temas tienen instrucciones sobre cómo personalizar los temas.

    Administrador

    • @wpbeginner No es ideal, pero en realidad no es mucho más de lo que tienes que hacer para publicar la imagen de todos modos. Todavía estoy buscando una gran opción (un plugin idealmente) que a) funcione en mi tema y b) sea fácil. Por suerte, debido a la popularidad de Pinterest, estoy seguro de que alguien pronto tendrá una funcionando.

  20. Funciona, pero muestra el texto “array” antes del botón Pin It. Lo estoy llamando a través de mi functions.php, así “echo $pinterestimag…..<?php;" ¿Podría ser esa la razón?

Dejar una respuesta

Gracias por elegir dejar un comentario. Ten en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de comentarios, y tu dirección de correo electrónico NO será publicada. Por favor, NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.