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
});
Verfügbare Netzwerke
Sozialer DienstDatennetz Code
Schwarze Leben Zählenblm
BloggerBlogger
BufferPuffer
Link kopierenkopieren.
DiasporaDiaspora
Diggdigg
Doubandouban
E-MailE-Mail
Evernoteevernote
FacebookFacebook
FlipboardFlipboard
Gmailgmail
Google Lesezeichengooglebookmarks
Hacker-Nachrichtenhackernews
InstapaperInstapaper
iOrbixiorbix
Kakaokakao
Koo Appkooapp
LineZeile
Linkedinlinkedin
LiveJournalLivejournal
Mail.Rumailru
MeneameMeneame
BoteBote
Odnoklassnikiodnoklassniki
AusblickAusblick
PinterestInteresse
Pocketgetpocket
DruckenDruck
Push-to-Kindlekindleit
Qzoneqzone
Redditrötlich
Refindneu finden
RenrenRenren
Skypeskype
Surfingbirdsurfingbird
TelegramTelegramm
Tencent QQtencentqq
Threemathreema
Trellotrello
TumblrTumblr
Twitterzwitschern
Viberviber
VKvk
WeChatwechat
ShareThissharethis
Sina Weiboweibo
SMSsms
SnapchatSnapchat
WhatsAppwhatsapp
WordPresswordpress
Xingxing
Yahoo Mailyahoomail
Yummly.
Fließendes Laden und ShareThis Werkzeuge

Die Tools von ShareThis werden nur geladen/angezeigt, wenn die Website zum ersten Mal geladen wird. Wenn Sie Tools wie die Bildfreigabe-Schaltflächen oder die Videofreigabe-Schaltflächen verwenden und Ihre Website "Lazy Loading" oder ähnliche Technologien verwendet, müssen Sie die Tools neu initialisieren, sobald neuere Elemente erscheinen.

Da ShareThis nur bei dieser Gelegenheit nach den Bildern/eingebetteten Videos sucht und die Bilder weiter unten noch nicht geladen sind, weiß ShareThis nichts von ihrer Existenz, selbst wenn sie später geladen werden, und zeigt die Schaltflächen auf ihnen nicht an.

Um dies zu umgehen, prüft der folgende Javascript-Code alle 3 Sekunden, ob gescrollt wurde, und wenn ja, werden die Schaltflächen neu initialisiert. Wir verwenden das Scrollen als eine Möglichkeit, um zu wissen, ob die Bilder geladen wurden; da die Bilder geladen werden, sobald ein Besucher zu diesem bestimmten Teil scrollt.

//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)