Come reinizializzare i pulsanti di ShareThis con parametri di condivisione specifici

In questa guida vi insegneremo come reinizializzare (ricaricare) i nostri pulsanti ShareThis per utilizzare parametri di condivisione specifici. Per impostazione predefinita, il caricatore del widget ShareThis viene caricato non appena il browser incontra il tag JavaScript, in genere nel tag della pagina. Le risorse di ShareThis vengono generalmente caricate da un CDN più vicino all'utente. Tuttavia, se si desidera modificare l'impostazione predefinita in modo che il widget venga caricato dopo il completamento del caricamento della pagina web, è sufficiente impostare un parametro nella pagina.

La reinizializzazione dei pulsanti consente di:

• Potete decidere quando visualizzare i pulsanti, ad esempio fino all'apertura di una finestra modale o di un pop-up.
• Disporre di diverse istanze dei pulsanti nella stessa pagina con configurazioni diverse, ad esempio, se si desidera visualizzare solo il pulsante di Twitter in una parte specifica e quello di Facebook in un'altra. Oppure se si desidera avere lingue diverse su diversi set di pulsanti.
• Aggiornamento automatico delle proprietà di Pulsanti di Condivisione quando vengono caricati nuovi link con pulsanti di condivisione (scorrimento infinito).

Nota: se non si vuole reinizializzare i pulsanti con parametri specifici, si può semplicemente usare la funzione window.__sharethis__.initialize() così com'è ogni volta che si attiva la modale, il pop-up, ecc. Si noti che potrebbe essere necessario impostare un ritardo di circa 0,3-1 secondo prima di aggiungere la riga di codice precedente, per dare il tempo al contenitore di apparire, altrimenti la funzione sarà richiamata troppo presto.

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

// render the html
<div id="i miei pulsanti in linea"></div>

// load the buttons
finestra.__sharethis__.load("inline-share-buttons" (pulsanti in linea),
{/* qui si trovano le configurazioni, leggere la sezione Configurazione */

Una volta aggiunta la parte di codice di cui sopra, è ora possibile includere una o tutte le seguenti opzioni di configurazione.

Opzioni di configurazione

 config = { 
   allineamento: STRING, // left, right, center, justified.
   contenitore: STRING, // id of the dom element to load the buttons into
   abilitato: BOOLEAN,
   font_size: INTEGRO, // small = 11, medium = 12, large = 16.
   id: STRING, // load the javascript into a specific dom element by id attribute
   etichette: STRING, // "cta", "counts", or "none"
   lingua: STRINGA   // IETF language tag in which the buttons' labels are,
   min_count: INTEGRO, // minimum amount of shares before showing the count
   imbottitura: INTEGRO, // small = 8, medium = 10, large = 12.
   raggio: INTEGRO, // in pixels
   reti: ARRAY[STRING],
   mostra_totale: BOOLEAN,
   mostra_bottoni_mobile: BOOLEAN, // forces sms to show on desktop
   uso_conti_nativi: BOOLEAN, // uses native facebook counts from the open graph api
   dimensione: INTEGRO, // small = 32, medium = 40, large = 48.
   spaziatura: INTEGRO, // spacing = 8, no spacing = 0.
};

Esempio

// render the html
<div id="i miei pulsanti in linea"></div>
// load the buttons
finestra.__sharethis__.load("inline-share-buttons" (pulsanti in linea), {
  allineamento: "a sinistra"...,
  id: i miei pulsanti in linea,
  abilitato: vero,
  font_size: 11,
  imbottitura: 8,
  raggio: 0,
  reti: ["messaggero, twitter"., "pinterest"..., ' 'sharethis, sms, wechat],
  dimensione: 32,
  mostra_bottoni_mobile: vero,
  spaziatura: 0,
  url: "https://www.sharethis.com", // custom url
  titolo: "Il mio titolo personalizzato,
  lingua: "en",
  immagine: "https://18955-presscdn-pagely.netdna-ssl.com/wp-content/uploads/2016/12/ShareThisLogo2x.png", // useful for pinterest sharing buttons
  descrizione: "La mia descrizione personalizzata,
  nome utente: "ShareThis" // 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);

Note

• Si prega di tenere presente che i tag Open Graph avranno la precedenza quando si condividono su Facebook e altri canali sociali. Se si collega a un URL personalizzato, assicurarsi di avere i tag Open Graph compilati anche per quella pagina.
• Come per gli altri strumenti, si consiglia di spostare il sito in produzione prima di provarlo, poiché alcune risorse non vengono passate in un ambiente locale o di prova.

Ordine di precedenza

È importante ricordare l'ordine di precedenza con cui i processi di ShareThis codice condividono le proprietà. In generale, si consiglia di utilizzare un unico approccio in base al quale le proprietà di condivisione sono specificate sulle vostre pagine per evitare errori.

1. Qualsiasi proprietà JavaScript specificata dinamicamente (cioè la precedenza più alta)
2. Proprietà specificate nei tag (cioè seconda precedenza)
3. Tag del protocollo Open Graph (cioè la precedenza più bassa)