Cómo instalar las herramientas de ShareThis en Webflow

Nota: Si tiene un plan gratuito de Webflow, las herramientas de ShareThis lamentablemente no funcionarán en su sitio web ya que la función de código personalizado está bloqueada. 

In order for ShareThis tools to work on your Webflow website, follow the steps below to add your unique ShareThis code to the <head> section of your website: 

Añadir herramientas ShareThis en todas las páginas

  1. Log in or sign up to the Plataforma ShareThis.
  2. Add your domain.
  3. Copy your unique ShareThis installation script.
    • You can find it in Step 1 of any App page (e.g., Inline Share Buttons, Sticky Share Buttons, Follow Buttons).
    • Or, you can find the same script in Settings → Setup inside the Platform.
  4. Log in to Webflow’s website. On your Projects Dashboard, select the three dots icon from the project you want your buttons on, and click Settings.
  5. Dentro de la Configuración del Proyecto, vaya a la sección de Código Personalizado.
  6. Paste the unique ShareThis code that you copied from step 3 and click Publish.
  7. In the ShareThis Platform, open the app you want to use and click Enable App to activate it on your site.
  8. (Optional but recommended) Customize your app.
    • Choose between Smart Share Buttons or manual selection of networks.
    • Adjust colors to match your brand.
    • Set button size, shape, alignment, and enable share counts if desired.

Añadir herramientas ShareThis en páginas específicas

  1. Log in or sign up to the Plataforma ShareThis.
  2. Add your domain.
  3. Copy your unique ShareThis installation script.
    • You can find it in Step 1 of any App page (e.g., Inline Share Buttons, Sticky Share Buttons, Follow Buttons).
    • Or, you can find the same script in Settings → Setup inside the Platform.
  4. Log in to your Webflow website. Open your website in design mode, select Pages from the left sidebar, then select Edit Page Settings from the specific page you want your buttons to be on.
  5. Dentro de la configuración de la página, desplácese hacia abajo hasta la sección de código personalizado.
  6. Pega el código único de ShareThis que has copiado en el paso 4 y haz clic en Publicar.
  7. In the ShareThis Platform, open the app you want to use and click Enable App to activate it on your site.
  8. (Optional but recommended) Customize your app.
    • Choose between Smart Share Buttons or manual selection of networks.
    • Adjust colors to match your brand.
    • Set button size, shape, alignment, and enable share counts if desired.

Añadir herramientas Inline ShareThis

Las herramientas en línea requieren un fragmento de código adicional para funcionar en su sitio. Si desea instalar nuestras herramientas Botones de comaprtir Embebidos, Botones de seguir, Botones de reacción, o Social Feed en su sitio web, tendrá que añadir código de colocación donde quiera que aparezca la herramienta.

  1. En su plataforma ShareThis, seleccione la herramienta ShareThis que desea utilizar y copie el código de colocación. Dependiendo de la herramienta que estés instalando, el código debería ser similar a este:
  2. En el modo de diseño de su sitio web Webflow, vaya a la página en la que desea que aparezcan sus botones.
  3. En la barra lateral izquierda, seleccione Añadir y busque la opción Incrustar, luego arrástrela hasta donde quiera que aparezcan los botones.
  4. En la nueva ventana del Editor de códigos HTML para incrustar, pegue el código único de ShareThis que copió en el Paso 1.
  5. Haga clic en Guardar y Cerrar.
  6. Haga clic en Publicar.

Notas:

  • Es posible que las herramientas de ShareThis no aparezcan en el backend de su sitio web, por lo que es posible que tenga que visitar su sitio web publicado para poder verlas.
  • Webflow tiende a incrustar los botones en contenedores Flex, lo que podría limitar la visualización de algunos contenidos, especialmente el último botón.
    Una forma de arreglar esto sin cambiar la visualización del contenedor padre de flex a inline-block es establecer un valor fijo para el ancho de los botones.

    Para ello, haga clic en los propios botones y en el Editor de flujos web, establezca su Anchura a un valor mayor de lo que es ahora mismo (si esto sólo ocurre en pantallas móviles, aplique el mismo principio, pero cambie el punto de interrupción móvil en la parte superior del Editor de flujos web a Pantallas móviles/Tablets):
El campo de anchura de los botones se establece en 180 en el Editor de Webflow, los demás valores no se modifican.