WordPress: Social-Media-Buttons (Facebook, Twitter, Google+, Kindle, t3n) einbinden

Da ich in regelmäßigen Zeitabständen gefragt werde, wie ich hier unterhalb den Blog-Artikeln, die Social-Media-Buttons eingebunden habe, ob das ein Plugin oder eine eigene Code-Lösung ist etc. Habe ich mich dazu entschieden, die Lösung in diesem Artikel zu präsentieren, damit ich bei nächster E-Mail-Antwort nur einen Link schicken muss. 🙂

Damit man auch direkt weiß was ich meine, habe ich hier noch einmal die Abbildung der Buttons eingebunden. Es handelt sich um einen Tweet-, einen Likeit-, einen +1- und einen Empfehlungsbutton von t3n. Darunter befindet sich ein Button, der den Artikel zum später Lesen auf den Kindle schickt.

Um diese einzubinden muss man Änderungen an drei Template-Dateien des Themes vornehmen: an der single.php, an der footer.php und in der style.css.

Folgenden Code bindet man in der single.php ein:

<div class="weiterempfehlen">
    <p>Diesen Artikel weiterempfehlen oder später lesen:</p>
    <div class="twitter"><iframe src="http://platform.twitter.com/widgets/tweet_button.html?url=<?php echo rawurlencode(get_permalink()) ?>&amp;text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" style="width:105px; height:20px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe></div>
    <div class="fb-likeit" title="Auf Facebook empfehlen"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo rawurlencode(get_permalink()); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=122&amp;action=recommend&amp;font=verdana&amp;colorscheme=light&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:122px; height:20px;"></iframe></div>
    <div class="g-plusone" data-size="medium"></div>
    <div class="t3nAggregator"></div>
    <div class="clearer"></div>

    <div class="kindleWidget"><img style="vertical-align:middle;" src="https://d1xnn692s7u6t6.cloudfront.net/white-15.png" /><span style="vertical-align:middle;margin-left:3px;">auf Kindle (später) lesen</span></div>
</div>

Da ich die Buttons unterhalb der einzelnen Artikel einbinden möchte ist die single.php die richtige Template-Datei, da sie zuständig für die Ausgabe bzw. für die Ansicht der Einzelartikel ist.

Verfügt dein Theme, aus welchen Gründen auch immer, nicht über eine single.php, dann kannst du den oberen Code auch in die index.php packen. Musst aber den Code-Block von einem Conditional-Tag abfragen lassen:

<?php if (is_single()) { ?>
    ... Angaben aus dem oberen Code-Block ...
<?php } ?>

Die Javascripte, die für die Funktionalität von dem t3n-, dem +1- und dem Kindle-Button zuständig sind, binde ich aus Performance-Gründen in die footer.php ein:

<?php if (is_singular()) { ?>
<!-- +1 -->
<script type="text/javascript">
  window.___gcfg = {lang: 'de'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<!-- t3n -->
<script type="text/javascript">
  (function() {
    var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
    po.src = "http://t3n.de/aggregator/ebutton_async";
    var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<!-- Kindle -->
<script type="text/javascript" src="https://d1xnn692s7u6t6.cloudfront.net/widget.js"></script>
<script type="text/javascript">(function k(){window.$SendToKindle&&window.$SendToKindle.Widget?$SendToKindle.Widget.init({"content":".der-beitrag","exclude":".weiterempfehlen, .premium-themes","title":".storytitle","author":".artikel-autor"}):setTimeout(k,500);})();</script>
<?php } ?>

Statt dem Conditional-Tag is_single() kommt in diesem Beispiel is_singular() zum Einsatz, da ich diesen Abschnitt der Fußzeile auch auf den Pages (Seiten) zur Verfügung stellen möchte.

Anschließend geht es darum die passenden Angaben in der style.css zu machen:

.weiterempfehlen {margin-bottom: 19px;}
.weiterempfehlen p {font-weight: bold; margin-bottom: 4px !important;}
.twitter, .fb-likeit, .g-plusone, .t3nAggregator {float: left; margin-right: 20px;}
.kindleWidget {margin-top: 7px; display:inline-block; padding:3px; cursor:pointer; font-size:11px; border-radius:3px; border:#ccc thin solid; background:transparent url('https://d1xnn692s7u6t6.cloudfront.net/button-gradient.png') repeat-x; background-size:contain;}

Das wär’s dann auch. Wer die Code-Beispiele aus diesem Artikel etwas übersichtlicher und in Bunt & Farbe haben möchte, der findet sie auch auf meiner Gist-Sammlung auf Github.

Gibt es zu dem Ganzen noch Fragen?

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.