Boolie.org

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.

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.
Beispiel: http://dev.boolie.org/adobe-creativesuite-cs2-kostenlos/#shareAsFacebook

View Comments

Aktuell keine Kommentare vorhanden.

nächster Beitrag