Cómo reiniciar los botones ShareThis con parámetros específicos para compartir

En esta guía, le enseñaremos cómo reiniciar (recargar) nuestros botones ShareThis para utilizar parámetros de compartición específicos. Por defecto, el cargador del widget ShareThis se carga en cuanto el navegador encuentra la etiqueta JavaScript; normalmente en la etiqueta de su página. Los activos de ShareThis se cargan generalmente desde la CDN más cercana al usuario. Sin embargo, si desea cambiar la configuración por defecto para que el widget se cargue después de que su página web haya terminado de cargarse, sólo tiene que establecer un parámetro en la página.

La reinicialización de los botones le permitiría:

• Controla cuándo mostrar los botones, por ejemplo, hasta que se abra un modal o una ventana emergente.
• Tenga diferentes instancias de los botones en la misma página con diferentes configuraciones, por ejemplo, si desea mostrar sólo el botón de Twitter en una parte específica y el de Facebook en otra. O si quieres tener diferentes idiomas en distintos conjuntos de botones.
• Actualización automática de las propiedades de los botones de compartir cuando se cargan nuevos enlaces con botones de compartir (desplazamiento infinito).

Nota: Si no quieres reinicializar los botones con parámetros específicos, podrías simplemente usar la función window.__sharethis__.initialize( ) tal cual siempre que se active tu modal, pop-up, etc. Tenga en cuenta que es posible que tenga que establecer un retraso de alrededor de 0,3 a 1 segundo antes de añadir la línea de código anterior para dar tiempo a que aparezca el contenedor, de lo contrario, la función será llamada demasiado pronto

<strong>Add <div> and Javascript code</strong>

// render the html
<ID. div="mis-en línea-botones"></div>

// load the buttons
Ventana. __sharethis__. Load (' botones de compartir en línea ',
{/* aquí es donde deben estar sus configuraciones, lea la sección Configuración */

Una vez que haya agregado la parte anterior del código, ahora podrá incluir todas o todas las siguientes opciones de configuración a continuación.

Opciones de configuración

 Config = { 
   alineación: CADENA // left, right, center, justified.
   Contenedor: CADENA // id of the dom element to load the buttons into
   Habilitado: BOOLEAN,
   tamaño_fuente: ENTERO // small = 11, medium = 12, large = 16.
   Id: CADENA // load the javascript into a specific dom element by id attribute
   Etiquetas: CADENA // "cta", "counts", or "none"
   idioma: CADENA   // IETF language tag in which the buttons' labels are,
   min_count: ENTERO // minimum amount of shares before showing the count
   Acolchado: ENTERO // small = 8, medium = 10, large = 12.
   Radio: ENTERO // in pixels
   Redes: ARRAY[STRING],
   mostrar_total: BOOLEAN,
   mostrar_botones_del_móvil: BOOLEANA // forces sms to show on desktop
   use_native_counts: BOOLEANA // uses native facebook counts from the open graph api
   Tamaño: ENTERO // small = 32, medium = 40, large = 48.
   Espaciado: ENTERO // spacing = 8, no spacing = 0.
};

Ejemplo

// render the html
<ID. div="mis-en línea-botones"></div >
// load the buttons
Ventana. __sharethis__. Load (' botones de compartir en línea ', {
  alineación: izquierda,
  identificación: ' mis-en línea-botones ',
  habilitadas: Verdad,
  tamaño_fuente: 11,
  acolchado: 8,
  radio: 0,
  circuitos: [Mensajero, Twitter, Pinterest, ' ShareThis ', SMS, ' wechat '],
  envergadura: 32,
  mostrar_botones_del_móvil: Verdad,
  espaciamiento: 0,
  url: "https://www.ShareThis.com", // custom url
  Título: "mi título personalizado",
  idioma: "es",
  retrato: "https://18955-presscdn-pagely.netdna-SSL.com/wp-content/uploads/2016/12/ShareThisLogo2x.png", // useful for pinterest sharing buttons
  Descripción: "mi Descripción personalizada",
  nombre de usuario: "ShareThis0" // custom @username for twitter sharing
});

//state variable for scrolling
let scrolling = false;

//in case of scrolling, change the state of the scrolling variable to true
window.onscroll = function() {
scrolling = true;
}
/*create an interval that checks every 3 seconds the state of the scrolling variable, if any scrolling has been done in that interval, reinitialize the buttons*/

setInterval(() => {
if (scrolling) {
scrolling = false;
window.sharethis.initialize()
}
}, 3000);

Notas

• Por favor, tenga en cuenta que las etiquetas gráficas abiertas tendrán prioridad al compartir en Facebook y otros canales sociales. Si se enlaza a una URL personalizada, asegúrese de tener las etiquetas de gráfico abiertas rellenadas para esa página también.
• Al igual que con nuestras otras herramientas, recomendamos mover el sitio a producción en vivo antes de probarlo, ya que hay algunos recursos que no se pasan durante un entorno local/de prueba.

Orden de precedencia

Es importante recordar el orden de precedencia por el cual el código ShareThis procesa las propiedades del recurso compartido. Generalmente, se recomienda utilizar un enfoque mediante el cual se especifiquen las propiedades de uso compartido en las páginas para evitar errores.

1. Cualquier propiedad JavaScript especificada dinámicamente (es decir, la de mayor precedencia)
2. Propiedades especificadas en las etiquetas (es decir, segunda prioridad)
3. Etiquetas del Protocolo Open Graph (es decir, de menor precedencia)