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.
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 AbmahÂnunÂgen ins Haus flatÂtern, wie bei manch andeÂren. LetztÂendÂlich stieĂ ich auf einen ArtiÂkel von VlaÂdiÂmir SimoÂvic, indem er nur am Rande erwĂ€hnte, dass man als AlterÂnaÂtive 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.