WordPress & Webwork

WordPress: Flattr, Twitter, Facebook, Feedburner und Xing ohne Plugins

flattr twitter rss facebook xing

Viele bunte Buttons

In diesem Artikel will ich zeigen, wie ich in diesem und einigen weiteren Blogs von uns, die Buttons von Flattr, Twitter, Facebook, Feedburner und Xing eingebunden habe bzw. einige Informationen, wie zum Beispiel die Zahl der Feed-Abonnenten, auslese.

Im Artikel Anzahl der Feed-Leser und Twitter-Folower ausgeben habe ich beschrieben, wie man die Anzahl der Newsfeed-Leser ausgibt, die Feedburner anzeigt und wie man auch die Anzahl der Twitter-Follower ausgibt ohne auf die Tools oder animierte Grafiken von Feedburner und TwitterCounter.com angewiesen zu sein.

Im Artikel Facebook: Anzahl der Freunde ohne Widgets ausgeben habe ich beschrieben, wie man die Anzahl der Facebook-Freunde ausgibt ohne auf die Widgets von Facebook zurückgreifen zu müssen. Diese Maßnahme, und das hat mich doch ein bisschen verwundert, ist vom Code her einfacher als die oben genannte Ausgabe für Feedburner und Twitter.

Sergej Müller beschreibt in einem Artikel wie man Flattr-, Twitter- und Facebook-Buttons ohne Plugins und Javascript in WordPress einbindet. In Kommentaren haben das einige ein bisschen falsch verstanden und es entstand teilweise eine Diskussion Javascript contra iFrames.

Was an sich nicht weiter führt, weil wenn man Flattr- und Twitter-Buttons via Plugins oder manuell per Javascript einfügt, dann generieren die beim Aufruf eben den iframe den Sergej dort als Code-Beispiel aufführt. Mit dem beispiel von Sergej gewinnt man ein bisschen an Performance.

Kleine Flattr-, Twitter- und Facebook-Buttons

Da Sergej dort die großen Buttons vorstellt und in den Kommentaren öfter die Frage nach den kleinen Buttons kam und ich hier zum Beispiel auch die kleinen Buttons habe folgen die Code-Beispiele, zuerst 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>

Die uid=xyz bitte durch die eigene ID ersetzen. Hier der Beispiel für den Twitter-Button:

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

und nun der kleine Like-Button von 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>

Facebook: Share- anstatt Like-Button

Da der Like-Button eine gewisse Datenschutz-Problematik herbeiführt, hat sich mittlerweile herumgesprochen. Wem das Magenschmerzen bereitet, der könnte auf den Share-Button von Facebook zurückgreifen:

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

Dieser sollte aus der Sicht des Datenschutzes unbedenklich sein (korrigiert mich wenn ich mich irre), weil im Vorfeld keine Kommunikation zwischen dem Besucher und Facebook stattfindet. da es sich hier um einen einfachen Link handelt kann man natürlich entweder einen Text oder Grafik verlinken.

Und Xing?

Auch Xing bietet die Möglichkeit Artikel weiter zu empfehlen. Hier der Code, den ich im offiziellen Weblog gefunden habe:

<a href="http://www.xing.com/app/user?op=share;url=<?php echo urlencode(get_permalink($post->ID)); ?>;title=<?php echo urlencode(get_the_title()); ?>;provider=<?php echo urlencode(get_bloginfo('name')); ?>" target="_blank" title="Deinen XING-Kontakten zeigen">Xing</a>

Auch hier handelt es sich um einen Link und daher kann man sowohl Text als auch eine Grafik verlinken.

22 Reaktion(en)

  1. Tom

    Das ganze aber bitte nru mit lokalen Grafiken und Scripten. Sonst dürfte das Laden der Seite schlagartig einiges länger dauern, selbst wenn alle APIs funktionieren. Und wenn Facebook mal wieder stottert wartet man ewig auf die Sidebar und den Footer.
    Aber solange es AdBlock gibt, nur zu. 😉

    1. Perun

      @Tom,

      das man Grafiken lokal abspeichert ist ja klar,

      Das ganze aber bitte nru mit lokalen Grafiken und Scripten.

      aber erkläre mir bitte wie ich Flattr, Twitter und Facebook lokal installieren soll? 🙂

  2. Tom

    @Perun: naja, zuerst brauchst du ganz viele Server. 😉
    Mit Scripte meinte ich irgendwelche JavaScripte, falls notwendig. Wobei dann die Abfrage der Zähler oder sonstwas wieder auf den externen Server warten muss.
    Naja, wie gesagt, ist nicht mein Ding und wird geblockt wo es nur geht. Kommt mir mehr auf die Inhalte an als auf das drum herum. Die gehören wenn schon, dann in den Footer, damit sie laden können währen ich den Artikel bereits lese.

  3. Ralf

    Falls es den einen oder anderen interessiert, die reinen Zahlen bekommt man i.d.R. auch per PHP oder Ajax. Bei Twitter sähe eine solche Umsetzung in PHP etwa so aus:

    $u = rawurlencode( get_permalink() );
    $e = file_get_contents( "http://urls.api.twitter.com/1/urls/count.json?url=".$u."&callback=twttr.receiveCount" );
    preg_match( '/twttr.receiveCount((.*))/', $e, $m );
    $c = json_decode($m[1])->count;

    Den Link zum tweeten bastelt man sich dann recht einfach so:

    $t = rawurlencode( strip_tags( get_the_title() ) );
    $href = "http://twitter.com/share?text=".$t."&url=".$u;
    echo "<a href=".$href.">Twitter das!!!</a>";

    Wem die Twitter-Buttons nicht gefallen, kann sich so seinen eigenen Twitter-Button basteln. Geht natürlich auch mit Fatzebook&Co.

  4. ekrem

    vielen dank! das kommt genau richtig…. nur eine frage noch: wie kann ich die grafiken auf meinen server auslagern? bzw. wie muss ich den code anpassen damit er die grafiken von meinem server zieht? 😳

    1. Perun

      Hallo Ekrem,

      wie kann ich die grafiken auf meinen server auslagern?

      es ging hier lediglich um die Grafiken bei den frei-gestaltbaren Links, hier in dem Artikel wären das der Xing-Link und der Share-Button von Facebook.

  5. David Maciejewski

    Facebook- und Twitterbuttons kann man auch ohne permanente externe Abhängigkeit durch iframes oder JavaScript einbinden. Bei github habe ich den SocialDataGrabber online gestellt, den ich unbedingt mal installierfreudiger gestalten muss. Über PHP lese ich auf t3n so alle sozialen Daten aus, speichere sie zwischen und zeige auf der Seite dann lediglich immer nur den Cache.

  6. Pingback: Links der Woche – KW13 » Nikonierer

  7. Pingback: Das Problem mit dem “Like”-Button » tomathan

  8. Pingback: Armin´s Blog » Mein Leben in Blogform! » Braucht man wirklich für alles Plugins?

  9. Pingback: Facebook, Twitter, Flattr | Buttons ohne Plugin einbinden

  10. Christian

    Vielen Dank für die Code-Snippets.

    Mal sehen ob Flattr doch mal was bringt. Bei meinem ersten Versuch hab ich es nach längerer Testphase wieder raus genommen.

  11. Pingback: Neue Buttons braucht das Blog – Flattr is back « Fene-Blog

  12. Frank

    Hallo,

    danke für die Anleitung. Allerdings habe ich noch nicht so recht verstanden, wo ich denn mit den Verlinkungen (bzw. iFrames) hin muss. Wo genau müssen diese eingebunden werden?

    Für euere Hilfe vielen Dank!

  13. Pingback: Habe das Experiment Flattr beendet | WordPress & Webwork

  14. Pingback: WordPress: Social Buttons ohne Plugins: Flattr, Twitter, Facebook und co. - Servaholics

  15. Jan

    Hallo und guten Tag,
    mir ist folgendes beim Gefällt mir Button aufgefallen. Öffnet man eine Webseite mit dem eingebundenen Button das erste mal ist alles okay. Aktualisiert man nun diese Seite mittels rechter Maustaste > Aktualisieren erscheint Links unten im Browser eine Java Fehlermeldung:

    Meldung: Objekt erwartet
    Zeile: 203
    Zeichen: 436
    Code: 0
    URI: http://www.facebook.com/plugins/like.php?href……

    Auf deiner Seite ist das auch so und auf allen anderen von mir geteteten Seiten ebenfalls. Woran könnte das liegen? Der Fehler tritt nur im IE auf der Firefox unterdrückt scheinbar den Fehler.

    Freundliche Grüsse
    Jan

  16. David

    Wie immer ein super Artikel von dir. Danke, für die Tipps. Hatte bisher auf externe Dienste gesetzt und nutze nun deine Methode. Ist mir sicherer.

    Habe dich auch mal bei Facebook hinzugefügt 🙂

  17. Pingback: Facebook, Google, Twitter: statische Buttons | WordPress & Webwork

  18. Carlo

    suche seit 1 tag schon eine gute anleitung 🙄

    bin jetzt über einen anderen link hierher gekommen. super anleitung.
    werde den share button nutzen von facebook denk ich mal.

Die Kommentare in diesem Beitrag sind geschlossen.

✉ WordPress-Newsletter ✉

Tipps und News als E-Mail in deinem Postfach? Dann abonniere einfach den ersten deutsch­sprachigen Word­Press-Newsletter:


Der Newsletter ist hinterher jederzeit abbestellbar.

Eintragen!