Comment réinitialiser les boutons ShareThis avec des paramètres de partage spécifiques

Dans ce guide, nous allons vous apprendre à réinitialiser (recharger) nos boutons ShareThis pour utiliser des paramètres de partage spécifiques. Par défaut, le chargeur de widgets ShareThis se charge dès que le navigateur rencontre la balise JavaScript, généralement dans la balise de votre page. Les actifs de ShareThis sont généralement chargés à partir du CDN le plus proche de l'utilisateur. Toutefois, si vous souhaitez modifier le paramètre par défaut afin que le widget se charge après la fin du chargement de votre page Web, il vous suffit de définir un paramètre dans la page.

Réinitialiser les boutons vous permettrait de :

• Contrôlez le moment où les boutons s'affichent, par exemple, jusqu'à l'ouverture d'une fenêtre modale ou d'une fenêtre contextuelle.
• Disposer de plusieurs instances de boutons sur la même page avec des configurations différentes, par exemple, si vous souhaitez afficher uniquement le bouton Twitter sur une partie spécifique et le bouton Facebook sur une autre. Ou si vous souhaitez afficher différentes langues sur différents ensembles de boutons.
• Rafraîchissement automatique des propriétés des boutons de partage lorsque de nouveaux liens sont chargés avec des boutons de partage (défilement infini).

Note : Si vous ne souhaitez pas réinitialiser les boutons avec des paramètres spécifiques, vous pouvez simplement utiliser la fonction window.__sharethis__.initialize() telle quelle à chaque fois que votre modale, pop-up, etc. s'active. Veuillez noter que vous devrez peut-être définir un délai d'environ 0,3 à 1 seconde avant d'ajouter la ligne de code ci-dessus pour laisser le temps au conteneur d'apparaître, sinon la fonction sera appelée trop tôt.

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

// render the html
<div id="mes-Inline-buttons"></div>

// load the buttons
Fenêtre. __sharethis__. Load ('en ligne-share-Buttons',
{/* c'est ici que vos configurations doivent être, lisez la section Configuration */

Une fois que vous avez ajouté la partie ci-dessus du code, vous êtes maintenant en mesure d'inclure l'une ou l'autre des options de configuration suivantes ci-dessous.

Options de configuration

 Config = { 
   alignement: STRING // left, right, center, justified.
   Conteneur: STRING // id of the dom element to load the buttons into
   Activé: BOOLEAN,
   police_taille: ENTIER // small = 11, medium = 12, large = 16.
   Id: STRING // load the javascript into a specific dom element by id attribute
   Libellé: STRING // "cta", "counts", or "none"
   langue: CHAÎNE   // IETF language tag in which the buttons' labels are,
   min_count: ENTIER // minimum amount of shares before showing the count
   Rembourrage: ENTIER // small = 8, medium = 10, large = 12.
   Rayon: ENTIER // in pixels
   Réseaux: ARRAY[STRING],
   show_total: BOOLEAN,
   Afficher_boutons_de_mobile: BOOLEAN // forces sms to show on desktop
   use_native_counts: BOOLEAN // uses native facebook counts from the open graph api
   Taille: ENTIER // small = 32, medium = 40, large = 48.
   Espacement: ENTIER // spacing = 8, no spacing = 0.
};

Exemple

// render the html
<div id="mes-Inline-buttons"></div >
// load the buttons
Fenêtre. __sharethis__. Load ('en ligne-share-Buttons', {
  alignement: gauche,
  id: 'mes-Inline-Buttons',
  activés: Vrai,
  police_taille: 11,
  rembourrant: 8,
  rayon: 0,
  chaînes: [Messager, Twitter, Pinterest, 'ShareThis', SMS, wechat],
  superficie: 32,
  Afficher_boutons_de_mobile: Vrai,
  distance: 0,
  url: "https://www.ShareThis.com", // custom url
  Titre: "Mon titre personnalisé",
  langue: "fr",
  portrait: "https://18955-presscdn-pagely.netdna-ssl.com/wp-content/uploads/2016/12/ShareThisLogo2x.png", // useful for pinterest sharing buttons
  Description: "Ma description personnalisée",
  nom d'utilisateur: "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);

Notes

• Gardez à l'esprit que les balises Open Graph auront la priorité lors du partage sur Facebook et d'autresréseaux sociaux. Si vous créez un lien vers une URL personnalisée, veillez à ce que les balises Open Graph soient également remplies pour cette page.
• Comme pour nos autres outils, nous recommandons de déplacer le site en production avant de l'essayer, car certaines ressources ne sont pas transmises dans un environnement local/de test.

Ordre de préséance

Il est important de se souvenir de l'ordre de préséance selon lequel les processus de ShareThiscode partagent des propriétés. En général, nous recommandons d'utiliser une approche par laquelle les propriétés de partage sont spécifiées sur vos pages pour éviter les erreurs.

1. Toute propriété JavaScript spécifiée dynamiquement (c'est-à-dire la plus haute priorité).
2. Propriétés spécifiées dans les balises (c'est-à-dire deuxième priorité)
3. Balises du protocole Open Graph (c'est-à-dire la priorité la plus faible)