Facebook, Twitter, Flattr | Buttons ohne Plugin einbinden

Seit längerem war ich auf der Suche nach einer Möglichkeit die wichtigsten sozialen Netzwerke hier auf meinem Blog einzubinden, habe aber leider immer nur Plugins gefunden, die entweder vom Design nicht so schön sind oder nicht alles unterstützen, was ich gerne hier anzeigen würde. Da ich die Erfahrung gemacht habe, dass kaum auf die Links wie Wikio, Technorati, digg oder sonstige geklickt wird, konzentriere ich mich auf die beiden aktuellsten und populärsten social Networks Facebook und Twitter, sowie auf den Micropaymentdienst Flattr.

Diese drei Dienste habe alle ihr eigenes Plugin, welches schnell und mit wenigen Klicks den jeweiligen Button automatisch unter jeden Artikel setzt. Aber in dem Fall sind das nun wieder drei Plugins, die man auch ganz vermeiden kann, zumal sie alle ein bisschen das machen, was sie wollen und die Buttons natürlich nicht schön in einer Reihe angezeigt werden. Dabei wäre es doch so viel schöner:

Facebook, Twitter, Flattr | Buttons ohne Plugin einbinden

Bei perun auf dem Blog habe ich die passenden Codeschnipsel gefunden.

.

Facebook:

<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=130&amp;action=recommend&amp;font=verdana&amp;colorscheme=light&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:20px;"></iframe>

Dieser kleine Like-Button funktioniert ohne weitere Anpassung. Da sich nach der Abmahnpanik Mitte Februar 2011 wegen eventueller Datenschutzverletzungen durch diese Buttons nichts mehr dahingehend getan hat, werde ich ihn bis auf weiteres weiterverwenden. Wer sich Gedanken macht, kann aber auch einfach statt dem iFrame den folgenden Link verwenden.

<a href="http://www.facebook.com/share.php?u=<?php echo rawurlencode(get_permalink()) ?>&amp;t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>">Empfehlen</a>

Statt dem Text “Empfehlen” kann auch wahlweise ein Bild verlinkt werden. Für Xing gibt es auch diese Linkvariante, auf die ich aber hier im Blog verzichte.
.

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:110px; height:20px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>

Hier ist keine weitere Anpassung notwendig. Beim Anklicken des Buttons öffnet sich ein kleines Fenster, in dem man den Tweet gegebenenfalls noch abändern kann und anschließend mit einem Klick auf “Twitter” veröffentlicht.
.

Flattr:

<iframe src="http://api.flattr.com/button/view/?uid=xyz&amp;url=<?php echo rawurlencode(get_permalink()) ?>&amp;title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>&amp;description=<?php echo rawurlencode(wp_strip_all_tags(get_the_excerpt(), true)) ?>&amp;category=text&amp;language=de_DE&amp;button=compact" style="width:110px; height:20px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>

Hinter uid= muss jetzt nur noch statt xyz die eigene Flattr ID, der Benutzername, eingetragen werden.

.

Der komplette Code:

Damit das ganze nun schön in einer Reihe nebeneinander steht, habe ich eine ganz einfache kleine Tabelle mit drei Spalten angelegt:

<table border="0" width="100%">
<tbody>
<tr>
<td>
<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=130&amp;action=recommend&amp;font=verdana&amp;colorscheme=light&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:20px;"></iframe>
</td>
<td>
<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:110px; height:20px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
</td>
<td>
<iframe src="http://api.flattr.com/button/view/?uid=xyz&amp;url=<?php echo rawurlencode(get_permalink()) ?>&amp;title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>&amp;description=<?php echo rawurlencode(wp_strip_all_tags(get_the_excerpt(), true)) ?>&amp;category=text&amp;language=de_DE&amp;button=compact" style="width:110px; height:20px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
</td>
</tr>
</tbody>
</table>

Und dieser komplette Code gehört nun an die gewünschte Stelle in der single.php eures verwendeten Themas irgendwo hinter <?php the_content(); ?> (den Beitragstext) aber vor den Kommentaren, in meinem Fall <?php comments_template(); ?>. Dafür die Datei vom Server herunterladen, öffnen, den Code kopieren und einfügen. Die Tabelle lässt sich natürlich beliebig um weitere Spalten <td> </td> und natürlich auch um weitere Zeilen <tr> </tr> erweitern.

Da ich es immer etwas unpersönlich finde, wenn die Buttons einfach nur so kommentarlos unter den Artikel geklatscht werden, habe ich bei dieser Gelegenheit noch einen kleinen Text davorgeschrieben, der so vielleicht auch eher noch die Aufmerksamkeit darauf lenkt. Ich werde in nächster Zeit noch ein wenig rumbasteln, aber soweit ist das erstmal der Grundbaustein.

Und jetzt ist es an euch die Buttons auszuprobieren! ;-)


Dieser Eintrag wurde veröffentlicht in Ratgeber und verschlagwortet mit , , , , , , von Linda. Permanenter Link zum Eintrag.


Wenn dir dieser Artikel gefallen hat, kannst du ihn mit einem Klick auf die folgenden Buttons weiterempfehlen. Möchtest du in Zukunft keine neuen Beiträge mehr verpassen? Dann abonniere doch den RSS Feed dieses Blogs. Vielen Dank!

[XING]


Über Linda

Linda ist eine technikversierte Bloggerin, die es in ihrer Freizeit gerne nach draußen in die Natur zieht, wo sie alles fotografiert, was ihr gerade vor die Linse kommt. Neben diesen Fotos schreibt sie beispielsweise auch leicht verständliche Tutorials zu deren Bearbeitung oder was ihr sonst so in den Sinn kommt.

8 Kommentare zu “Facebook, Twitter, Flattr | Buttons ohne Plugin einbinden

  1. Klasse Beitrag . Seit ein paar wochen versuche ich das ganze Facebook & Co. zu verstehen . Sogar habe ich mir ein Konzo angelegt ( obwohl ich weis nicht was ich dammit machen soll)
    Langsam aber sicher sind meine defizite immer kleiner .
    Auch dein Bericht hat dazu Beigetragen .

    Ich werde dein Tipp gleich ins Leben ruffen … vieleicht so bekommt mein kleine Blog etwas mehr Besucher :-)

  2. Selbsterklärend … wenn Du meinst :-)
    Habe eine Frage … wie es aussieht dein Tipp ist mehr wert als ich vorher gedacht habe . Am anfang habe ich trotzdem das leichtere Lösung probiert und ein Plug In eingebautt . Leider musste ich feststellen das es bei Validator das Plug In zich Errors verursacht hatt .
    Nicht das mein Blog ohne Fehler ist wie deine ( habe probiert ;-)) aber das so viele es rausgekommen sind , das habe ich nicht erwartet .
    Nach dem Test habe ich das Plug-in deaktieviert und ernsthaft mit deinem Code schnippsel mich beschäftigt .
    Es funktioniert und sogar ohne Fehler bei Validator.
    DANKE!

    jetzt aber die Frage …
    Bei dir auf dem Blog sind die Buttons schon in Vorschau (Home?) schon zu sehen . Wenn ich meine Buttons reinsetzte sind die erst zu sehen wen man das Entsprechende Bericht eröffnet .
    Wo muss ich das verschlimmbessern um zu erreichen das die schon in vorschau zu sehen sind .
    Habe ich was falsch verstanden ?

  3. Ja, Plugins sind einfacher, aber manchmal nicht so toll programmiert.

    Ich habe den Codeschnipsel nachträglich noch zur index.php hinzugefügt, das ist die Startseite. Probier da einfach ein wenig rum, bis du die richtige Stelle (hinter the_content) gefunden hast. Kannst das Ganze dann auch noch mit der archive.php (Anzeige der Kategorien, Tags, Monatsarchive etc.) und natürlich mit den statischen Seiten (page.php) machen, ganz nach Geschmack. ;)

  4. Danke für dein Erklärung … habe schon gestern gefunden der Lösung ( ganze Tag gessesen dabei :-) ) Langsam aber sicher fande ich gefallen dabei :-)

  5. @czoczo: Nichts zu danken. War leider unterwegs, sonst hätte ich mich früher gemeldet. Aber schön, dass du es auch schon selbst herausgefunden hast. Weiter so! ;)

  6. Hi Linda, klasse Artikel!
    leider verstehe ich nicht alles, bin in sachen technik jemand von der einfachen sorte.. habe eine seite gefunden die verspricht, alles notwendige für den button zu generieren: http://www.gefaelltmirbuttoneinbinden.com
    klappt das damit auch`? das wär gut, ginge ja ziemlich schnell..
    Viele gruesse,
    Melissa

  7. Hallo Melissa,
    die Seite erstellt im Prinzip den gleichen Code, den ich oben beschrieben habe, allerdings für eine feste Seite, also z. B. Deine Homepage. Oben in meinem Code ist der Schnipsel

    < ?php echo rawurlencode(get_permalink()); ?>

    eingebaut, der dafür sorgt, dass beim Veröffentlichen eines Artikels automatisch dieser mit einem eigenen Button versehen wird. Würde man den Code von der von Dir genannten Seite einbinden, würden sich alle “Gefällt mir”-Klicks nur auf den einen Link beziehen, der dort eingetragen ist.

    Als Beispiel: Würden 5 Leute Artikel a, 3 Leute Artikel b und 2 Leute Artikel c “Liken”, würde bei dem festen Link bei jedem Artikel “10 Leuten gefällt das” stehen. Mit dem Code oben jedoch “5 Leuten gefällt Artikel a”, “3 Leuten b”, “2 Leuten c” etc.

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>