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&url=<?php echo rawurlencode(get_permalink()) ?>&title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>&description=<?php echo rawurlencode(wp_strip_all_tags(get_the_excerpt(), true)) ?>&category=text&language=de_DE&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()) ?>&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()); ?>&layout=button_count&show_faces=false&width=130&action=recommend&font=verdana&colorscheme=light&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()) ?>&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.
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.
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. 😉
@Tom,
das man Grafiken lokal abspeichert ist ja klar,
aber erkläre mir bitte wie ich Flattr, Twitter und Facebook lokal installieren soll? 🙂
@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.
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.
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? 😳
Hallo Ekrem,
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.
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.
@David,
das hört sich interessant an. Wenn du noch Feedburner drauf setzen könntest, dann wäre das ein prima Plugin bzw. Hack.
[…] zeigt euch wie ihr Button für Facebook, Feedburner, Flattr, Twitter und Xing ohne Plugin in euer WordPress Theme intigrieren könnt […]
[…] nun Abmahnungen ins Haus flattern, wie bei manch anderen. Letztendlich stieß ich auf einen Artikel von Vladimir Simovic, indem er nur am Rande erwähnte, dass man als Alternative einen […]
[…] Datenbank unnötig füllen. Eine kleine Suche mit Google reicht schon aus um herauszufinden wie man Facebook, Twitter und viele mehr in sein Blog einbaut, auch hier ohne irgendwelche […]
[…] Bei perun auf dem Blog habe ich die passenden Codeschnipsel gefunden. […]
Der Facebook Share- anstatt Like-Button Tipp ist klasse. Damit kann ich derzeit richtig was anfangen – danke.
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.
[…] Perun gibt es eine Anleitung, wie man die Buttons ohne Plugin integriert. Wer den Google +1 nicht kennt, […]
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!
[…] WordPress: Flattr, Twitter, Facebook, Feedburner und Xing ohne Plugins – 9 Klicks […]
[…] sollen. Die entsprechenden Codes gibt’s für Flattr, Twitter, Facebook und XING bei perun.net – der Google +1 Button fehlt (noch), ist jedoch leicht […]
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
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 🙂
[…] Das Ergebnis ist ordentlich und wird noch verstärkt, wenn man bedenkt, dass ich für Twitter und Facebook bereits sparsamere Varianten verwendet habe: siehe Artikel "WordPress: Flattr, Twitter, Facebook, Feedburner und Xing ohne Plugins". […]
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.