Diseña un botón Guardar para tu sitio

Sugerencias y resolución de problemas

"Si añadiste el botón Guardar oficial a tu código antes de junio de 2016, ten en cuenta que el diseño cambió de "Pin it" a "Guardar" el 3 de octubre de 2017."

El botón Guardar es la mejor manera de que se descubra a tu empresa en Pinterest. Cuando añades el botón Guardar a las páginas de tu sitio, tus clientes pueden guardar las cosas que les gustan en Pinterest, lo que significa que incluso más personas podrán ver esas cosas. 
 
Si tienes un sitio web de Wordpress, Blogger, Tumblr, Wix o Squarespace:
 
WordPress.com WordPress.com
El botón Guardar de Wordpress no requiere que haya ningún código adicional en tu sitio. Para añadir el botón Guardar en todas tus entradas de Wordpress, tienes que habilitarlo en las opciones predeterminadas de uso compartido.
  1. Ve a tu escritorio de Wordpress.
  2. Accede a Configuración y selecciona Compartir.
  3. Arrastra el servicio Pinterest de Servicios disponibles a Servicios habilitados en la sección Botones de uso compartido.
  4. Si deseas mostrar la imagen predeterminada del botón Guardar, selecciona la opción Botones oficiales en el menú desplegable Estilo de botón.
  5. Haz clic en Guardar cambios que aparece en la parte inferior de la página.
WordPress.org WordPress.org

Descárgate el complemento para el botón Guardar flotante desde el directorio de plugins de WordPress.org.

Blogger Blogger
  1. En tu panel de Blogger, ve a la sección Diseño.
  2. Haz clic en Editar en la sección de entradas de blog.
  3. Desplázate a Mostrar botones para compartir, y marca la casilla si aún no está marcada.
  4. Reorganiza lo que haga falta en la sección Ordenar elementos y haz clic en Guardar.
Tumblr Tumblr
En primer lugar, es necesario añadir una línea de JavaScript.
 
Para añadir la línea de JavaScript:
  1. En tu panel de Tumblr, selecciona el blog que desees editar y haz clic en Personalizar.
  2. Haz clic en Editar HTML en la pantalla Personalizar.
  3. Desplázate hasta el final del código.
  4. Comprueba si tu código contiene pinit.js , y si es así, ¡has terminado!
  5. Si no, introduce este código justo antes de la etiqueta de cierre </body>: <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
 
Para añadir un botón Guardar flotante:
  1. Asegúrate de haber añadido la línea de JavaScript mediante los pasos indicados anteriormente.
  2. En tu panel de Tumblr, selecciona el blog que desees editar y haz clic en Personalizar.
  3. Haz clic en Editar HTML en la pantalla Personalizar .
  4. Desplázate hasta el final del código.
  5. Añade data-pin-hover="true" antes de la parte “src=” del paso 4. Tu nueva línea deberá tener esta apariencia: <script type="text/javascript" async data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
  6. Haz clic en Actualizar vista previa. Deberás ver el botón Guardar cuando muevas el cursor sobre la imagen de ejemplo que aparece a la derecha. Si no es así, vuelve al paso 4 y asegúrate de que todo está correcto.
  7. Haz clic en Guardar.
Wix.com Wix.com
  1. Haz clic en Añadir (+) en la parte izquierda de tu editor.
  2. Haz clic en Social.
  3. Desplázate hasta la parte inferior y haz clic en Guardar de Pinterest.
  4. Arrastra el botón Guardar en el lugar de tu página donde deseas que se muestre.
  5. El botón Guardar creará un Pin en función de la imagen y la descripción que elijas. El Pin estará vinculado a la página donde te encuentres cuando hagas clic en Guardar.
Squarespace Squarespace

Si quieres aprender a crear un botón Guardar para tu sitio de Squarespace, haz clic aquí.

 
Si quieres diseñar un botón tú mismo, primero debes decidir qué tipo de botón Guardar quieres añadir. Existen 3 tipos entre los que elegir: 
 
  • Imagen flotante (ver aquí): cuando alguien mueve el cursor sobre cualquier imagen de la página, aparece el botón Guardar.
    Learn how to build it Learn how to build it
    1. Ve al generador de widgets.
    2. Selecciona Imagen flotante en la sección Tipo de botón.
    3. Personaliza el tamaño y la forma de tu botón. 
    4. Para obtener una vista previa del botón, mueve el cursor sobre la imagen de ejemplo. También puedes hacer clic en el botón Guardar para ver cómo funciona.
    5. Cuando estés conforme con el botón, copia el código que aparece debajo de la sección Copiar el código .
    6. Pega el código antes de la etiqueta de cierre </body> en cada página de tu sitio donde quieras que se muestre el botón.
  • Cualquier imagen  (ver aquí): si alguien hace clic en este botón, pueden guardar cualquier imagen del sitio, lo cual es muy fácil de hacer.
    Learn how to build it Learn how to build it
    1. Ve al generador de widgets.
    2. Selecciona Cualquier imagen en la sección Tipo de botón.
    3. Personaliza el tamaño, forma, texto o imagen de tu botón. 
    4. Para obtener una vista previa del botón, mueve el cursor sobre la imagen de ejemplo. También puedes hacer clic en el botón Guardar para ver cómo funciona.
    5. Cuando estés conforme con el botón, copia el código que aparece a la derecha de la página.
    6. Pega el código entre las etiquetas <body> y </body> de cada página en el lugar de tu sitio donde quieras que se muestre el botón.
  • Una imagen (ver aquí): se trata de un botón Guardar para una imagen única de tu página y requiere una codificación más técnica.
    Learn how to build it Learn how to build it
    1. Ve al generador de widgets.
    2. Personaliza el tamaño, forma, texto o imagen de tu botón. 
    3. Añade la URL de las páginas web que contienen la imagen para la que deseas crear un botón Guardar (que puede ser tu página de inicio o cualquier otra página de tu sitio).
    4. Abre una ventana nueva en tu navegador y ve a tu sitio web.
    5. Haz clic con el botón derecho sobre la imagen para la que desees crear un botón Guardar.
    6. Selecciona Copiar la ruta de la imagen.
    7. Vuelve al generador de widgets y pega la URL de la imagen en el campo de imagen.
    8. Introduce una descripción para tu imagen.
    9. Haz clic en ¡Créalo! para obtener una vista previa del botón.
    10. Cuando estés conforme con el botón, copia el código que aparece a la derecha de la página.
    11. Pega el código entre las etiquetas <body> y </body> de cada página en el lugar de tu sitio donde quieras que se muestre el botón.

Problemas habituales

El contador del botón Guardar no se muestra o no parece correcto.
Cuando haces clic en el botón Guardar, no se abre el selector de tablero en una nueva ventana.
Tu botón flotante no funciona.
Pinterest está experimentando algunos problemas al comunicarse con mi sitio.

El contador muestra el número de Pines que acceden a la URL que has especificado en el código del botón. Si esa página es diferente de la página en la que te encuentras, el contador puede mostrar un número diferente del que esperabas.

Si utilizas un contador con el botón de Guardar de cualquier imagen, se mostrará el recuento de todos los Pines que acceden a la URL de la página donde te encuentras.

Si utilizas un contador junto al botón y no tienes ningún Pin de esta página, entonces no se mostrará el contador. Este no aparecerá hasta que haya al menos un Pin de esa página.

Si utilizas un botón Guardar obtenido mediante un complemento de terceros, ponte en contacto con el creador del complemento para ver si pueden solucionar el problema. 

Si utilizas tus propios botones Guardar, prueba estas sugerencias:

  • Asegúrate de que introduces la línea de JavaScript en el código de tu página, justo antes de la etiqueta de cierre.
  • Si la línea de JavaScript aparece varias veces, prueba a eliminar todas excepto la última.
  • Si estás utilizando la línea de JavaScript avanzado asíncrono y la de JavaScript normal, elimina una de ellas.
  • Si utilizas un complemento de terceros, comprueba que no esté añadiendo una línea pinit.js en tu código. Si fuera así, no tendrías que añadir la línea.
Algunos servicios de hosting no son compatibles con JavaScript, así que no podrás añadir el código desde nuestro generador de widgets. No obstante, es posible que dispongan de formas alternativas de añadir widgets.

Prueba a seguir estos consejos para solucionar el problema:
 
  • Asegúrate de que tus imágenes tienen al menos 100 px en una dimensión (altura o ancho) y al menos 200 px en otra (las imágenes deben tener un mínimo de 120 px por 120 px para que se muestre el botón Guardar flotante).
  • Asegúrate de que tus imágenes no están especificadas en el fondo CSS, y de que cada imagen tiene un atributo src que empiece con "img".
  • Añade el código del botón flotante justo antes de la etiqueta de cierre.

Esto significa que el sitio de Pinterest ha caducado antes de que pudiéramos crear un Pin en tu sitio. Desafortunadamente, no podemos corregir este problema, que suele producirse cuando un sitio es lento. ¡Te recomendamos que investigues lo que está pasando!