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. 🙂

WordPress: selbst-gebastelte Social-Media-Button-Leiste

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 Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

14 Kommentare

  1. Dieser “auf Kindle später lesen”-Button ist ja ganz kühl, aber gibt es vielleicht sogar schon etwas bei dem man das für alle ebook-Reader exportieren kann? Also quasi ein Blog-Artikel-to-.mobi-Konverter der zu jedem Artikel eine Datei (auch für andere ebooks und ohne Amazon-Account) ausliefert?

    Viele Grüße

  2. …wäre es nicht am einfachsten, man splittet den “like it”-button in zwei separate scripts auf und kann dem reader so die Möglichkeit lassen, sich zu entscheiden? Ich habe das so gemacht:

    //href:?php//like-it.%%design.//
    wp-admin(hrfe:line4).98//co.

    das wars. Eintrag in der wp-admin natürlich nicht vergessen, sonst gehts nicht.

  3. Hallo ich oute mich mal als blutige Anfängerin und bin von wordpress leicht überfordert.

    Ich finde du hast das sehr übersichtlich beschrieben, und ich habe das eins zu eins so gemacht (meine ich), aber die Buttons sind nach wie vor auf meinem Blog nicht zu sehen.

    So wie ich das hier verstehe, benötige ich kein Plugin, oder?

    Bitte um Nachsicht 😉

  4. @Mato:

    Wäre mal interessant zu wissen was du genau gemacht hast und vorallem – um welchen Blog es sich handelt. (Link)

    Grüße

  5. […] Social-Media-Buttons (Facebook, Twitter, Google+, Kindle, t3n) einbinden. Eine kleine Anleitung wie man die Social-Buttons von Facebook, Google+, Twitter, t3n und Kindle in ein WordPress-Theme einbindet. […]

  6. Vielen Dank für die Beschreibung der Integration der Social Media Buttons. Ich habe die auf meiner Webseite eingebaut.

    Vorher hatte ich Addthis Social Media Leiste, aber der Nachteil ist, das kostet Ladeperformance. Dafür kann man allerdings sehen, wie oft empfohlen wurde und ob es daraufhin sogenannte “Social Clicks” gab.

    Eine Frage hätte ich noch: Warum nimmst du nicht auch den Facebook-Teilen Button mit in die Social Media Leiste auf?

    Über eine kurze Antwort würde ich mich freuen. Vielen Dank schon mal

    Gruss
    Karsten

  7. eine Frage hätte ich noch:

    Warum haben die Facebook und Twitter Button kein script, so wie G-plus, das man in die footer.php integriert?

Kommentare sind geschlossen.