Teilen-Buttons für Facebook und Twitter ohne Plugin in WordPress integrieren

Veröffentlicht am von

Im Artikel vom Mai 2010 habe ich beschrieben, wie man Teilen-Links ohne Plugins in WordPress realisieren kann. Heute geht es darum, statt Links Buttons zu integrieren.

Ziel: Tweet-Button und Facebook-Like-Button ohne den Einsatz von Plugins in das eigene WordPress-Theme integrieren. Heute mit einer kleinen Steigerung: die Buttons sollen nicht nur auf der Artikeleinzelansicht (single.php) sondern auch auf der Indexseite (index.php) angezeigt werden. Anschauungsbeispiel: am Ende diese Artikels.

Folgender Code muss in der single.php und in der index.php (beim WP-Theme TwentyTen in der loop.php) nach dem Template-Tag <?php the_content(); ?> eingefügt werden:

<div class="sharebuttons">
 
	<div class="twitter">
		<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="dein-twitter-name" data-url="<?php echo urlencode(get_permalink($post->ID)); ?>" data-text="<?php echo rawurlencode(get_the_title()); ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
	</div><!-- .twitter -->

	<div class="facebook">
		<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
	</div><!-- .facebook -->
 
</div><!-- .sharebuttons -->
view raw teilen-buttons-wordpress-1.html This Gist brought to you by GitHub.

Bitte beachten: bei “data-via” muss natürlich dein Twitter-Name stehen, und zwar ohne das @.

Um die Buttons nebeneinander zu setzen und einen Abstand nach oben und unten einzustellen, können noch folgende Anweisungen in die style.css eingetragen werden:

/*Sharebuttons*/
.sharebuttons { clear: both; margin: 10px 0; }
.sharebuttons .twitter { float: left; }
view raw teilen-buttons-wordpress-2.css This Gist brought to you by GitHub.

Die zwei Container können natürlich auch noch anders nach eigenem Geschmack ausgerichtet werden.

Wer das Ganze ausführlich nachlesen oder noch anderweitig anpassen/erweitern möchte, findet hier noch ein paar nützliche Links:

Twitter: Tweet-Button
Twitter: ausführliche Entwickler-Doku
Facebook: Entwickler-Doku

33 Gedanken zu “Teilen-Buttons für Facebook und Twitter ohne Plugin in WordPress integrieren”

  1. Hi Matthias

    Hmm, gibt es den ‘alten’ Teilen-Button nicht mehr? Denn das was Du hier eingebaut hast ist nicht der Teilen-Button sondern der Gefällt-mir-Button. Und ich bevorzuge momentan den Teilen und nicht den Gefällt-mir-Button… Ach die ganzen Buttons… ;-)

    Kommentiere ↓

  2. Hallo Nathanel, doch der alter Sharer funktioniert auch noch. Es gibt aber auch mit dem neuen Like-Button die Möglichkeit, nach dem Klick noch einen Kommentar anzuhängen. Dazu musst du allerdings die XFBML-Variante verwenden. Wie hier beschrieben:
    Like-Button

    Jaja, die Buttons … :)

    Kommentiere ↓

    • Hallo Nathanel, nein. Da gibt es keine Vorteile, solange der iframe-Code funktioniert. Wenn Twitter da mal was ändern würde, dann wäre man mit dem JS im Vorteil weil dieses dann ein eventuell geändertes iframe laden kann. Ich glaube aber kaum, dass der Fall eintreten wird.

      Kommentiere ↓

  5. Hallo Matthias,
    also spielt es keine Rolle welche Variante man wählt? Wird eines ‘schneller’ geladen als das andere oder hat das ebenfalls keine Einwirkungen auf die Performance?
    LG Nathanael

    Kommentiere ↓

  6. Danke für diesen Beitrag. Ich habe das Script auf unserer Seite ausprobiert. In der single.php und dem css hat das bestens geklappt. Da ich das Twenty Ten Thema verwende hab ich das noch bei der loop.php eingefügt an der selben Stelle wie in der single.php. Hier klappt das aber nicht, es sind keine Buttons zu sehen auf der indexseite.
    mehr als copy paste verstehe ich leider nicht, daher ist es etwas schwierig für mich das Problem zu erörtern.

    Kann mir jemand helfen oder einen tipp geben?

    LG Peter
    http://www.vinopathen.ch/

    Kommentiere ↓

  7. Peter: Hast du den Code-Schnipsel in der loop.php an der richtigen Stelle eingefügt? In der Originaldatei vom TwentyTen-Theme muss der Code nach der Zeile 140 eingefügt werden, also noch innerhalb der if-Schleife.

    Kommentiere ↓

  8. Alles klar, jetzt hat das geklappt, ich habs vorher an der selben Stelle eingefügt, wie im single.php

    hab aber auch andere Zeilen probiert, wohl nicht in der if-Schleife. Jetzt passt es so wie ich es mir vorgestellt habe.

    Danke
    Peter

    Kommentiere ↓

  9. Pingback: Gefällt mir: Facebook Teilen Link – Gabis BLOGhaeuschen

  11. Also bei mir werden nur die Open Graph Metatags im Head bemängelt. Ohne die geht’s theoretisch auch. Ansonsten sollte eigentlich alles passen. Was wird bei dir als invalide angezeigt?

    Kommentiere ↓

  12. Vielen Dank für diesen Code. :-)
    Ich bekomme die beiden Buttons irgendwie nicht sauber ins “center” – kann mir vllt. jemand kurz helfen – Danke!

    Viele Grüße
    Nico

    Kommentiere ↓

      • Hi Matthias, ich hätte es gerne in der Mitte von den Artikel. So das Links und Rechts halt noch Platz ist.

        Es ist bestimmt nur eine CSS Zeile, aber in CSS kenn ich mich kaum aus – Danke.

        Grüße Nico

        Kommentiere ↓

        • Hierfür musst du zum einen im Facebook-iframe die Breite von 450px auf 130px reduzieren und zum anderen das CSS wie folgt anpassen:

          /*Sharebuttons*/
          .sharebuttons {
          margin: 10px auto 20px auto;
          clear: both;
          width: 250px;
          }
          .sharebuttons .twitter {
          float: left;
          }
          .sharebuttons .facebook {
          float: left;
          }

          Je nach dem, wieviele Facebook-Likes bzw. Tweets du erhälst, und wie groß die Zahlen in den Countern werden, musst du die Breiten evtl. noch mal anpassen.

          Kommentiere ↓

          • Vielen Dank, nun rutscht aber “Tags” mit nach oben.

            Des Weiteren ist mir aufgefallen, das ich nicht die Möglichkeit habe das “Vorschaubild” auszuwählen, wenn Smilies im Beitrag sind, nimmt er diese – das ist irgendwie blöd.

            Viele Grüße
            Nico

            Kommentiere ↓

            • Das ist in dem Fall natürlich etwas ungünstig. Du kannst ja noch einen DIV dazwischen setzen und das CSS noch mal anpassen.

              <div class="sharebuttons">
              <div class="buttons">
              ... iframes ...
              </div>
              </div>

              Und das CSS:

              /*Sharebuttons*/
              .sharebuttons {
              margin: 10px 0 20px 0;
              clear: both;
              }
              .buttons {
              margin: 0 auto;
              width: 250px;
              }
              .sharebuttons .twitter {
              float: left;
              }
              .sharebuttons .facebook {
              float: left;
              }

              Für die Steuerung der Thumbnails bei Facebook benötigst du Artikelbilder und musst diese in den OG Metatags ausgeben. Dazu schreibe ich in Kürze einen Artikel.
              Als Quick&Dirty-Lösung kannst du ja erst einmal ein fixes Bild (z.B. dein Logo) ausgeben:Dazu musst du im diesen Tag notieren und mit deinem Bild verlinken:

              <meta property=”og:image” content=”/wp-content/uploads/dein-bild.jpg”/>

              Kommentiere ↓

  13. Danke für den tollen Artikel. Ich hatte vorhin die Frames in die single.php eingebaut und auch den obigen Code in die CSS eingefügt aber bei mir steht immer der Facebookbutton unter dem Tweetbutton! Wie muss ich die CSS anpassen das es nebeneinander alles in einer Zeile steht? Danke für die Hilfe!

    LG aus dem Sachsenland

    Kommentiere ↓

    • Wenn du die CSS-Anweisungen wie im Artikel beschrieben verwendest, werden die Buttons nebeneinander dargestellt. Voraussetzung ist natürlich, dass du die Buttons in deiner single.php auch mit dem Container
      <div class="sharebuttons">       umschließt.

      Kommentiere ↓

  14. Hallo, danke für die Anleitung, auch wenn der Post schon ein paar Monate her ist. Konnte ihn jetzt verwenden und umsetzen.
    Gibt es noch ein kleines Update, wie auch der Google +1 Button eingefügt werden kann? Ich habe schon einiges ausprobiert, bin aber nicht zurecht gekommen. Ich würde mich über den Zusatz sehr freuen.
    Vielen Dank im Voruas,
    tengri

    Kommentiere ↓

  15. Hallo Jungs, habe gesehen hier, dass ihr richtig Fit auf diesem Gebiet seit.

    Meine Frage passt zwar nicht 100% zum Thema, aber hat auch was mit FB sharing zu tun.

    ich verwende auch das TwentyTen Theme und habe seit 2-3 Wochen das Problem, dass beim share mit Facebook die Bilder nicht mehr auf Facebook “ankommen” die man früher als Vorschaubild mit zum Link auswählen konnte.

    Kann jemand von Euch sagen, warum das so ist und womit ich das Problem beheben kann ??? Es war viel schöner, wenn man beim Teilen eines Beitrages auch ein Bildchen dazu zeigen konnte …

    Danke

    http://www.saaletaler.eu

    Kommentiere ↓

    • Hallo Haiko,

      bin nur einer hier. :)
      Habe auf deiner Website mehrere Sharing-Tools gefunden. Mit welchem funktioniert die Share-Funktion mit Bilderauswahl denn nicht?

      Gruß
      Matthias

      Kommentiere ↓

      • Hallo Matthias, es funktioniert mit keinem der Tools und auch manuell (copy paste des Permalinks) nicht …

        Es kommt jeweils nur der Titel und mehr nicht, kein Bild dazu …

        Nehme ich jedoch einen der älteren Artikel, dann kommen noch teilweise die Bilderchen …

        Merkwürdig…

        Meine PlugIns sind alle auf dem aktuellen Stand ebenso die Version von WordPress.

        Danke Dir schon einmal …

        Haiko

        Kommentiere ↓

  16. Habe es gleich getestet und es hat leider nicht den Effekt, den ich mir zurück wünsche …

    Es wird das Artikelbild verwendet, bei TwentyTen ist es das recht flach und nur wenig gut zu erkennen.

    Durch das Share Plugin und auch manuell geht es aber auch nicht. Kein Bild

    Mich würde halt mal interessieren, warum es plötzlich nicht mehr geht. Habe im Verdacht, dass es entweder eines der PlugIn Updates war, was diese Funktion nicht mehr bietet bzw verhindert,w darum auch immer …

    Werde mal abwarten was das neue WordPress an Veränderungen bringt, vielleicht geht es dann wieder.

    Wenn ich testweise die Beiträge anderer Blogs teilen will, kommen die Bilder, also kann es nicht an Facebook liegen…

    Schönen Abend Dir und vielen Dank nochmals !!!

    Kommentiere ↓

    • Bitte beachte bei deinen Tests, dass Artikel, die bereits “geliked” oder geteilt wurden, von Facebook nicht erneut eingelesen werden. Facebook verwendet ab der ersten Erfassung nur noch Thumbnails und Excerpts aus dem eigenen Cache. Neue Einstellungen musst du also entweder mit Artikel testen, die Facebook noch nicht kennt oder am besten mit neuen (Test-)Artikeln.

      Kommentiere ↓

      • Ja, aber es bringt keinen Unterschied …

        Es ist irgendein technisches Problem, dass die Bilder meiner Beiträge nicht zur Verfügung gestellt werden …

        Habe einen beliebigen Beitrag eines Freundes genommen und sämtliche 30 Bilder des Beitrages werden mit beim Teilen zur Auswahl angeboten …

        Nur wo fange ich an das Problem zu suchen …

        Es fing vor 2 Wochen an. Nach meinen 2 Wochen Urlaub habe ich sämtliche PlugIns aktualisiert, wie im Dashboard angeboten …

        Damit fing es an.

        Kommentiere ↓

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>