mit wenig Code zum WordPress Sharing

Mit WordPress gibt es viele Wege, seine Seite mit Sharing-Buttons zu versehen. Aktuell benutze ich Jetpack, aber werde im selbst erstellten Theme auf eine Hybrid Lösung wechseln. Dies bedeutet, dass ich Yoast SEO meine Meta Daten setze und die Sharing Buttons selbst erstelle.

Yoast SEO

Mit Yoast SEO kann man die Meta Daten im Header Bereich setzen lassen, dies bedeutet es werden folgende Meta Daten gesetzt:











Mit diesen Tags wird auf Facebook und Twitter sowie auf Google+ eine Card erstellt bei dem der Artikel ein Layout bekommt und nicht nur als Link dargestellt wird.
mit wenig Code zum WordPress Sharingmit wenig Code zum WordPress Sharingmit wenig Code zum WordPress Sharing

Sharing Buttons

Da mir die Sharing Plugins alle zu Ressourcen intensiv sind, habe ich mit Vanilla JavaScript eigene simple Buttons gebaut. Der Nachteil ist es werden keine Shares angezeigt, aber das hatte ich im Layout sowieso nicht geplant. Es benötigt nur wenig JavaScript, es wird ein Pop Up erstellt und mit der Sharing-Adresse vom jeweiligen Dienst geöffnet.

document.getElementById('shareAsTweet').addEventListener('click', function (event) {
      window.open('https://twitter.com/share?url=&text=', '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600').focus();
      event.preventDefault();
      return false;
    });
    document.getElementById('shareAsFacebook').addEventListener('click', function (event) {
      window.open('https://www.facebook.com/sharer/sharer.php?u=', '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600').focus();
      event.preventDefault();
      return false;
    });
    document.getElementById('shareAsGplus').addEventListener('click', function (event) {
      window.open('https://plus.google.com/share?url=', '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600').focus();
      event.preventDefault();
      return false;
    });

Einfach in die single.php eintragen und die ID’s der Buttons ändern. Dies Buttons können bei dieser Methode selbst erstellt und gestaltet werden.mit wenig Code zum WordPress Sharing
Beispiel: http://dev.boolie.org/adobe-creativesuite-cs2-kostenlos/#shareAsFacebook


wallpaper-1019588
[Manga] Jujutsu Kaisen [3]
wallpaper-1019588
BLUE LOCK – EPISODE NAGI: Deutscher Kinotermin bekannt
wallpaper-1019588
Code Geass: Rozé of the Recapture: Neuer Trailer veröffentlicht
wallpaper-1019588
Suicide Squad ISEKAI: Neuer Teaser veröffentlicht