Neuinitialisierung von ShareThis Schaltflächen mit spezifischen Freigabeparametern

In dieser Anleitung zeigen wir Ihnen, wie Sie unsere ShareThis Schaltflächen neu initialisieren (laden), um bestimmte Freigabeparameter zu verwenden. Standardmäßig wird der ShareThis Widget-Loader geladen, sobald der Browser auf das JavaScript-Tag stößt; typischerweise im Tag Ihrer Seite. ShareThis -Assets werden in der Regel von einem CDN in der Nähe des Benutzers geladen. Wenn Sie jedoch die Standardeinstellung so ändern möchten, dass das Widget geladen wird, nachdem Ihre Webseite vollständig geladen wurde, legen Sie einfach einen Parameter in der Seite fest.

Eine Neuinitialisierung der Schaltflächen würde Ihnen dies ermöglichen:

• Legen Sie fest, wann die Schaltflächen angezeigt werden sollen, z. B. bis sich ein Modal oder ein Popup öffnet.
• Sie können verschiedene Instanzen der Schaltflächen auf derselben Seite mit unterschiedlichen Konfigurationen haben, z. B. wenn Sie nur die Twitter-Schaltfläche button auf einem bestimmten Teil anzeigen möchten und die Facebook-Schaltfläche auf einem anderen. Oder wenn Sie verschiedene Sprachen auf verschiedenen Schaltflächensätzen haben möchten.
• Automatische Aktualisierung der Eigenschaften von button , wenn neue Links mit Freigabe-Schaltflächen geladen werden (unendliches Scrollen).

Hinweis: Wenn Sie die Schaltflächen nicht mit spezifischen Parametern neu initialisieren möchten, können Sie einfach die Funktion window.__sharethis__.initialize() verwenden, die immer dann aufgerufen wird, wenn Ihr Modal, Pop-up usw. aktiviert wird. Bitte beachten Sie, dass Sie möglicherweise eine Verzögerung von 0,3 bis 1 Sekunde einstellen müssen, bevor Sie die obige Codezeile hinzufügen, um dem Container Zeit zu geben, zu erscheinen, sonst wird die Funktion zu früh aufgerufen.

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

// render the html
<div id=" Meine Online-Buttons".></div>

// load the buttons
Fenster.__sharethis__.load(("inline-aktien-buttons".,
{/* hier müssen Ihre Konfigurationen stehen, lesen Sie den Abschnitt Konfiguration */

Nachdem Sie den obigen Teil des Codes hinzugefügt haben, können Sie nun eine oder alle der folgenden Konfigurationsoptionen hinzufügen.

Konfigurationsoptionen

 config = { 
   Ausrichtung: STRING, // left, right, center, justified.
   Behälter: STRING, // id of the dom element to load the buttons into
   aktiviert: BOOLEAN,
   font_size: INTEGER, // small = 11, medium = 12, large = 16.
   id: STRING, // load the javascript into a specific dom element by id attribute
   Etiketten: STRING, // "cta", "counts", or "none"
   Sprache: STRING   // IETF language tag in which the buttons' labels are,
   min_count: INTEGER, // minimum amount of shares before showing the count
   Polsterung: INTEGER, // small = 8, medium = 10, large = 12.
   Radius: INTEGER, // in pixels
   Netzwerke: ARRAY[STRING],
   Gesamt anzeigen: BOOLEAN,
   mobile_tasten_anzeigen: BOOLEAN, // forces sms to show on desktop
   Native_Zählungen verwenden: BOOLEAN, // uses native facebook counts from the open graph api
   Größe: INTEGER, // small = 32, medium = 40, large = 48.
   Abstand: INTEGER, // spacing = 8, no spacing = 0.
};

Beispiel

// render the html
<div id=" Meine Online-Buttons".></div>
// load the buttons
Fenster.__sharethis__.load(("inline-aktien-buttons"., {
  Ausrichtung: "links,
  id: my-inline-buttons'.,
  aktiviert: wahr,
  font_size: 11,
  Polsterung: 8,
  Radius: 0,
  Netzwerke: [Bote'., Twitter'., "pinterest" (Interesse), 'sharethis', 'sms''., Wechat'.],
  Größe: 32,
  mobile_tasten_anzeigen: wahr,
  Abstand: 0,
  url: "https://www.sharethis.com", // custom url
  Titel: " Mein eigener Titel",
  Sprache: "de",
  Abbildung: "https://18955-presscdn-pagely.netdna-ssl.com/wp-content/uploads/2016/12/ShareThisLogo2x.png", // useful for pinterest sharing buttons
  Beschreibung: " Meine benutzerdefinierte Beschreibung",
  Benutzername: "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);

Anmerkungen

• Bitte beachten Sie, dass Open Graph-Tags bei der Freigabe auf Facebook und anderen sozialen Kanälen Vorrang haben. Wenn Sie auf eine benutzerdefinierte URL verlinken, stellen Sie bitte sicher, dass die Open Graph-Tags auch für diese Seite ausgefüllt sind.
• Wie bei unseren anderen Tools empfehlen wir, die Website in den Produktionsbetrieb zu überführen, bevor Sie sie ausprobieren, da einige Ressourcen in einer lokalen/Testumgebung nicht weitergegeben werden.

Vorrangige Reihenfolge

Es ist wichtig, sich an die Rangfolge zu erinnern, in der der Code von ShareThis gemeinsame Eigenschaften verarbeitet. Im Allgemeinen wird empfohlen, einen Ansatz zu verwenden, mit dem Freigabeeigenschaften auf Ihren Seiten angegeben werden, um Fehler zu vermeiden.

1. Alle dynamisch festgelegten JavaScript-Eigenschaften (d. h. mit höchster Priorität)
2. In Tags angegebene Eigenschaften (d.h. zweiter Vorrang)
3. Open-Graph-Protokoll-Tags (d. h. mit der niedrigsten Rangfolge)