WordPress & Webwork - perun.net

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

am 31. 03. 2011 um 12:04 Uhr
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.

Diesen Artikel weiterempfehlen:

Premium WordPress Themes

Verwandte Artikel:

Kategorien:
Social Media, WordPress
Tags:
, , , , , ,  
Beitrag:
Trackback-Adresse und die Druckvorschau
Kommentare:
Kommentare verfolgen oder Kommentar abgeben

 — 

19 Kommentare »»

  1. 1. – Tom

    Kommentar vom 31. March 2011 um 12:40

    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. :wink:

  2. 2. – Perun

    Kommentar vom 31. March 2011 um 12:44

    @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? :-)

  3. 3. – Tom

    Kommentar vom 31. March 2011 um 12:53

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

  4. 4. – Ralf

    Kommentar vom 31. March 2011 um 13:21

    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.

  5. 5. – ekrem

    Kommentar vom 31. March 2011 um 14:30

    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? :oops:

  6. 6. – David Maciejewski

    Kommentar vom 01. April 2011 um 09:53

    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.

  7. 7. – Links der Woche – KW13 » Nikonierer

    Pingback vom 03. April 2011 um 10:24

    [...] zeigt euch wie ihr Button für Facebook, Feedburner, Flattr, Twitter und Xing ohne Plugin in euer WordPress Theme intigrieren könnt [...]

  8. 8. – Perun

    Kommentar vom 04. April 2011 um 15:31

    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.

  9. 9. – Perun

    Kommentar vom 04. April 2011 um 15:35

    @David,

    das hört sich interessant an. Wenn du noch Feedburner drauf setzen könntest, dann wäre das ein prima Plugin bzw. Hack.

  10. 10. – Das Problem mit dem “Like”-Button » tomathan

    Pingback vom 19. April 2011 um 10:23

    [...] 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 [...]

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

    Pingback vom 13. May 2011 um 17:03

    [...] 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 [...]

  12. 12. – Facebook, Twitter, Flattr | Buttons ohne Plugin einbinden

    Pingback vom 17. May 2011 um 06:32

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

  13. 13. – Daniel

    Kommentar vom 05. June 2011 um 20:44

    Der Facebook Share- anstatt Like-Button Tipp ist klasse. Damit kann ich derzeit richtig was anfangen – danke.

  14. 14. – Christian

    Kommentar vom 08. June 2011 um 20:48

    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.

  15. 15. – Neue Buttons braucht das Blog – Flattr is back « Fene-Blog

    Pingback vom 08. June 2011 um 21:46

    [...] Perun gibt es eine Anleitung, wie man die Buttons ohne Plugin integriert. Wer den Google +1 nicht kennt, [...]

  16. 16. – Frank

    Kommentar vom 14. June 2011 um 19:59

    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!

  17. 17. – Habe das Experiment Flattr beendet | WordPress & Webwork

    Pingback vom 03. July 2011 um 17:02

    [...] WordPress: Flattr, Twitter, Facebook, Feedburner und Xing ohne Plugins – 9 Klicks [...]

  18. 18. – WordPress: Social Buttons ohne Plugins: Flattr, Twitter, Facebook und co. - Servaholics

    Pingback vom 12. July 2011 um 13:26

    [...] 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 [...]

  19. 19. – Facebook, Google, Twitter: statische Buttons | WordPress & Webwork

    Pingback vom 14. January 2012 um 00:40

    [...] 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". [...]

Hinweis:
250+ Professionelle WordPress-Themes
Premium WordPress-Themes, 24 davon mit deutschem Support

Einen Kommentar hinterlassen




XHTML (folgende Tags sind erlaubt): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Kommentar-Vorschau ist aktiviert (Javascript wird benötigt).

Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu &lt;).

Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.