WordPress & Webwork

Facebook, Twitter, Google: statische Buttons im Eigenbau

[Aktualisiert am 16. Dezember 2011 um 12:02]

Beispielgrafik: Social Buttons bei der Einzelansicht Ich habe gestern beschrieben, dass ich von dynamischen zu statischen Buttons gewechselt bin und warum ich das getan habe. Da der Artikel dann doch etwas länger geworden und es schon recht spät war, habe ich mich entschieden den praktischen Teil, also die Erklärung des Code-Beispiels, auf heute zu verschieben.

Das ganze ist im übrigen alles andere als Raketenwissenschaft. Hier der Code der bei mir in der single.php steht:

<div class="weiterempfehlen">
    <p>Diesen Artikel weiterempfehlen:</p>
    <ul>
        <li><a href="http://www.xing.com/app/user?op=share;url=<?php echo urlencode(get_permalink($post->ID)); ?>;title=<?php echo rawurlencode(get_the_title()); ?>;provider=<?php echo rawurlencode(get_bloginfo('name')); ?>" target="blank"  title="Bei XING empfehlen"><span>XING</span></a></li>
        <li class="tw-einzeln"><a href="https://twitter.com/intent/tweet?source=webclient&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>%20<?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" title="Bei Twitter empfehlen"><span>Twitter</span></a></li>
        <li class="fb-einzeln"><a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" title="Bei Facebook empfehlen"><span>Facebook</span></a></li>
        <li class="gp-einzeln"><a href="https://plusone.google.com/_/+1/confirm?hl=de&url=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" title="Bei Google+ empfehlen"><span>Google+</span></a></li>
        <li class="del-einzeln"><a href="http://del.icio.us/post?url=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" title="Bei Delicious empfehlen"><span>Delicious</span></a></li>
    </ul>
    <div class="clearer"></div>
</div>

Damit das auch für etwas weniger erfahrene Leute übersichtlicher wird, beschränke ich mich jetzt nur auf die relevanten Teile:

http://www.xing.com/app/user?op=share;url=[1];title=[2];provider=[3]
https://twitter.com/intent/tweet?source=webclient&text=[2]%20[1]
https://www.facebook.com/sharer/sharer.php?u=[1]&t=[2]
https://plusone.google.com/_/+1/confirm?hl=de&url=[1]&title=[2]
http://del.icio.us/post?url=[1]&title=[2]

Der Aufbau ist immer gleich, ich muss lediglich dort wo jetzt die Platzhalter stehen ([1], [2] und [3]) passende URLs einfügen. Im Fall von WordPress wäre dies:

  1. Permalink: <?php echo urlencode(get_permalink($post->ID)); ?>
  2. Artikeltitel: <?php echo rawurlencode(get_the_title()); ?>
  3. Seitentitel: <?php echo rawurlencode(get_bloginfo('name')); ?>

Nachtrag: Im Fall von Textpattern wäre dies:

  1. Permalink: <txp:permlink />
  2. Artikeltitel: <txp:title />
  3. Seitentitel: <txp:site_name />

Quelle: Textpattern-Forum

Die statischen Links sind somit fertig und jetzt geht es darum diese zu stylen. Hier der Teil meiner CSS, die für die Buttons zuständig ist:

.weiterempfehlen        {margin-bottom: 19px;}
.weiterempfehlen p      {font-weight: bold; margin-bottom: 4px !important;}
.weiterempfehlen ul     {list-style: none; line-height: 24px; margin: 5px 0 15px 0; padding-left: 0;}
.weiterempfehlen li     {display: inline;}
.weiterempfehlen a      {float: left; width: 24px; height: 24px; margin-right: 25px; background: url('/wp-content/uploads/2011/12/perun-social-einzelansicht.png') no-repeat; border-bottom: none !important;}
.weiterempfehlen span   {display: none;}

.tw-einzeln a   {background-position: left -26px;}
.fb-einzeln a   {background-position: left -52px;}
.gp-einzeln a   {background-position: left -78px;}
.del-einzeln a  {background-position: left -104px;}

.weiterempfehlen a:hover {position: relative; top: -1px;}

Der Code durfte so weit klar sein. Die Links innerhalb der Aufzählungsliste werden gefloatet und zum Einsatz kommt ein CSS-Sprite und als Grundlage dient eine aus mehreren Icons zusammengesetzte Grafik.

Gegenüber einzelnen Grafiken ist der Ansatz der CSS-Sprites im Vorteil. Die fünf einzelnen Grafiken wären ca. 5 KByte groß, die zusammengesetzte Grafik gerade mal 2 KByte und anstatt 5 HTTP-Aufrufe gibt es nur einen den der Browser umzusetzen hat. Speziell bei kleineren Grafiken ist der Unterschied zwischen einzelnen und den zusammengesetzten Grafiken erheblich. Jede Grafik verfügt über "Meta-Informationen": welches Format bin ich, wie groß bin ich etc.

Diese Infos fallen bei den kleineren Grafiken mehr ins Gewicht und wenn man Grafiken zusammensetzt, dann gibt es eben nur einmal diese Information.

Im übrigen, die schicken Icons habe ich von hier: Social Media Icons. Das Iconset ist sehr umfangreich, der Einsatz ist auch bei kommerziellen Websites erlaubt und das Set hat auch Icons in 24 Pixel Größe. Ich persönlich finde, dass die Icons in 16 Pixel zu klein und in 32 Pixel schon zu groß sind. Die 24×24 Pixel dagegen empfinde ich als eine gute Größe.

69 Reaktion(en)

  1. Pingback: 16 Social Media Icon Sets zur Nutzung in statischen Social Media Buttons » Frisch Inspiriert

  2. Jan

    Du kommst mit Deinem gestrigen und dem heutigen Artikel genau richtig. Wir relaunchen zum Jahreswechsel unsere Website und hatten bisher noch Dummys für die Google+ und Facbook-Buttons. Jetzt werden wir direkt die statische Lösung einbauen.

    Danke für die Aufklärung, wie die Links genau aufgebaut sein müssen!

  3. Dirk

    Danke für diese Anleitung. Hab ich in meiner Computerecke auch gleich mal so umgesetzt. Mal schauen wie lange es dauert bis die Datenschützer auch dagegen etwas haben…

    😉

  4. Pingback: Kampf um die Social-Buttons | Blog | Social Media | Media Network | Geld verdienen | money2010.de

  5. Pingback: Twitter Facebook und Co Buttons ohne Sendeantenne …

    1. Perun

      @Dürrbi,

      du erstellst einfach in deinem Grafikprogramm eine Arbeitsfläche, positionierst die einzelnen Icons untereinander und schneidest dann die gesamte Grafik aus … oder meintest du etwas spezielles?

  6. Funkmaster Flow

    Das ist wirklich eine gute Sache.
    Ich überlege aber gerade, ob es aus Performance-Gründen nicht sogar noch besser wäre die die Platzhalter vor der Ausgabe abzuholen und in einer PHP-Variable zu cachen.
    Also statt bei jedem Link echo urlencode(get_permalink($post->ID)); aufzurufen sowas hier:

    $permalink = urlencode(get_permalink($post->ID));
    $artikeltitel = rawurlencode(get_the_title());
    $seitentitel = rawurlencode(get_bloginfo('name'));

    und dann eben diese Variablen für [1],[2] und [3] einsetzen.

  7. Frank

    Schitt, mein Theme hat keine single.php 🙁
    Jetzt muss ich suchen.
    Vielleicht kennt hier aber jemand das Theme Atahualpa und kann mir sagen wo ich das dann einbauen muss.
    Ansonsten bleibt mir nur suche.

    Danke und Gruß Frank

  8. Pingback: Facebook, Google Plus & Twitter Button mit statischem Link und Zähler einbinden

  9. Pingback: Social Media Plugins, Buttons und der Datenschutz – was tun? | CouchCat.de

  10. Jochen

    Danke für den Code – wurde auf Anhieb angezeigt.

    Darf ich 2 Fragen stellen?
    1. Ich habe eine Google+ Seite und will das dort der Beitrag mitgeteilt wird. Da wird doch eine andere URL benötigt?

    2. Ich verwende das Plugin Plista. Egal was ich anstelle, es werden die neuen Social Icons unterhalb angezeigt. Ich möchte aber, das die Button zum Teilen direkt nach dem Artikel erscheinen.

    Danke und einen schönen Sonntag

  11. Tanja

    @Perun: Ich bin gerade von einem Leser bei mir darauf hingewiesen worden, dass der +1 Button nicht richtig funktioniert. Das +1 selbst kommt bei Google nicht an. Teilen kann man damit schon, das funzt, nur eben das +1 selbst geht nicht.
    Habs gerade selbst hier und dort mit ein paar Beiträgen ausprobiert. Es stimmt, +1 selbst kommt nicht an. Nur Teilen geht damit.

  12. Andreas Beer
  13. Helmut

    Hi Sabienes,

    ich Versuchs mal: Bei dynamischen Buttons werden zum Beispiel die Grafiken und die Counter bereits bei Facebook abgeholt bevor Du überhaupt draufklickst, d.h. es werden Daten ausgetauscht ohne das der User involviert wurde und die Buttons liegen auf dem entfernten System z.B. bei Facebook.

    Statische Buttons sind fest in die Seite eingebaut, sozusagen hardwired. Es werden keine Daten mit anderen Systemen ausgetauscht bevor nicht ein Nutzer auf den Button klickt. Die Buttons sind als Graphiken lokal auf Deiner Website abgespeichert.

    Ich hoffe ich habs richtig und verständlich umschrieben. Auf meiner o.g. Site habe ich das ganze bereits erfolgreich eingebaut. Im Gegensatz zu den sonstigen Social-Plugins gab es diesmal keinerlei Unverträglichkeiten und die Performance ist im Gegensatz zu einer Plugin Lösung überragend.

    Grüße
    Helmut

    PS: Danke für den super Tipp in Sachen WordPress und Socialnetworking
    😆

  14. Sabienes

    Danke @Helmut für die Erklärung, das habe ich nun verstanden. Aber wie merke ich auf meiner Seite den Unterschied?
    Ich nutze ein PlugIn namens Add This. Produziert dies nun statische oder dynamische Buttons?
    @Perun: Sorry, wenn ich deinen Blog für Nachhilfestunden nutze. Deswegen möchte ich mich hier mal für alle deine tollen Artikel bedanken, bei denen ich viel lernen kann!
    Sabienes

  15. Pingback: Intern: Coding & Pimping | daburnas Logbuch

  16. Sebastian

    Vielen Dank für diese tolle Anleitung. Mich haben die dynamischen Buttons eh schon gestört. Die "großen" müssen ja nicht wirklich alles mitracken 🙂

    Ich habs einfach mal kopiert und bei mir eingebaut. Funktioniert perfekt.

  17. Pingback: Facebook, Twitter & Co. - Android-Handys.org

  18. Pingback: WordPress: Social-Media-Leiste mit Zähler für Feedburner, Twitter und Facebook | WordPress & Webwork

  19. Andreas

    Hallo ich hab ein kleines Problem und zwar habe ich die Anleitung so gut ich konnte befolgt und auch die Sprites erstellt. Jetzt der Hammer, wenn ich den Code so wie im Beispiel auf meine Seite implementiere habe ich 5 facebook Buttons nebeneinander. Die Links klappen, aber eben der Button ist blau.

    Hier mal die Codeschnipsel:

    CSS

    /*=======================================================*/
    /*--------------------Social Media Plugin----------------*/
    /*=======================================================*/
    .weiterempfehlen {margin-bottom: 19px;}
    .weiterempfehlen p {font-weight: bold; margin-bottom: 4px !important;}
    .weiterempfehlen ul {list-style: none; line-height: 24px; margin: 5px 0 15px 0; padding-left: 0;}
    .weiterempfehlen li {display: inline;}
    .weiterempfehlen a {float: left; width: 24px; height: 24px; margin-right: 25px; background: url('/wp-content/themes/colorway/images/csg-4f0eca0eb7338.png') no-repeat; border-bottom: none !important;}
    .weiterempfehlen span {display: none;}

    .sprite-facebook-24x24{ background-position: 0 0; width: 24px; height: 24px; }
    .sprite-google-24x24{ background-position: -74px 0; width: 24px; height: 24px; }
    .sprite-linkedin-24x24{ background-position: -148px 0; width: 24px; height: 24px; }
    .sprite-twitter-24x24{ background-position: -222px 0; width: 24px; height: 24px; }
    .sprite-xing-24x24{ background-position: -296px 0; width: 24px; height: 24px; }

    .weiterempfehlen a:hover {position: relative; top: -1px;}

    #container li {
    background: url('/wp-content/themes/colorway/images/csg-4f0eca0eb7338.png') no-repeat top left;

    php


    <div class="weiterempfehlen">
    <p>Diesen Artikel weiterempfehlen:</p>
    <ul>
    <li class="sprite-facebook-24x24"><a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" title="Bei Facebook empfehlen"><span>Facebook</span></a></li>
    <li class="sprite-google-24x24"><a href="https://plusone.google.com/_/+1/confirm?hl=de&url=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" title="Bei Google+ empfehlen"><span>Google+</span></a></li>
    <li class="sprite-linkedin-24x24"><a href="http://platform.linkedin.com/in.js?=de&url=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" title="Bei LinkedIn empfehlen"><span>Google+</span></a></li>
    <li class="sprite-twitter-24x24"><a href="https://twitter.com/intent/tweet?source=webclient&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>%20<?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" title="Bei Twitter empfehlen"><span>Twitter</span></a></li>
    <li class="sprite-xing-24x24"><a href="http://www.xing.com/app/user?op=share;url=<?php echo urlencode(get_permalink($post->ID)); ?>;title=<?php echo rawurlencode(get_the_title()); ?>;provider=<?php echo rawurlencode(get_bloginfo('name')); ?>" target="blank" title="Bei XING empfehlen"><span>XING</span></a></li>
    </ul>
    <div class="clearer"></div>

    Wo habe ich den Denkfehler?

  20. Jan

    Ich habe das Problem, dass im Falle von Google+ zwar ein neues Fenster aufgeht, das sagt "Sie geben als XY öffentlich +1".

    Aber in meiner Liste aller +1 (das entsprechende "Tab" in meinem Google+Profil) erscheint die geplusste Seite nie.

    Weder dieser Blogbeitrag, noch Seite(n), auf denen ich die Google+Links wie hier beschrieben eingebaut habe. Wie kann das sein?

  21. lioman

    +1 geht wirklich nicht, denn dazu wird derzeit noch der JS-Button benötigt, man kann über das Fenster nur auf Google+ teilen auch wenn die aufgerufene Seite etwas anderes sagt

  22. Jan

    Ganz großes Danke lioman – auch für den Link. Das heißt also, dass ich ganz schnell die Lösung mit dem statischen Button umbauen muss. Mir ist es nämlich wichtiger geplusst zu werden als dass jemand die Seite teilt (geplusst wird von Lesern sicherlich eher, beim Teilen ist die Hürde viel höher).

    Dann ist die Lösung, die die ct entwickelt hat also leider doch die bessere?! Wobei mir das wie ein Bug seitens Google+ aussieht, dass das erfolgreiche Plussen gemeldet wird aber gar nicht passiert!?

  23. lioman

    Nein ist kein Bug. die URL wird normalerweise vom +1 Button aufgerufen nachdem man darauf geklickt hat.
    Es ist also nur natürlich (wenn auch verwirrend), dass diese Seite so angezeigt wird. In Zukunft soll es wohl eine eigene Share-URL geben

    die so aussieht https://plus.google.com/share?url=URL

    allerdings funktioniert diese derzeit nur mit ein paar wenigen Seiten wie google.com oder eff.org

  24. Jan

    Danke, Danke Danke! Habe gerade gegooglet und nirgends scheint jemand bemerkt zu haben, dass das Plussen gar nicht geht… Heißt also andere Lösung einbauen oder warten, bis die von Dir genannte Share-URL mal funktioniert…

  25. Pingback: Neues Blog Logo und Design › Daniel Hüsken

  26. Pingback: Statische Buttons zum teilen einbinden

  27. Henning

    Vielen Dank! Bastle gerade an meiner neuen Website und bin durch Google wegen einer andere Sache auf diesen Artikel gestoßen, konnte das nun aber auch sehr gut gebrauchen. So eine ausführliche Doku ist für Entwickler-DAUs wie mich sehr hilfreich! 🙂

    P.S.: Wer neugierig ist: Montag, spätestens Dienstag, sollte meine neue Website live sein.

  28. Pingback: Wieviel Social Media braucht mein Blog? › vanvox.de

  29. Pingback: Performance Optimierung: dynamische vs. statische Buttons, was sagt Google dazu? | WordPress & Webwork

  30. Martin

    @Andreas (31)

    Versuch mal die Ausrichtung des Sprites von vertikal auf horizontal zu ändern (wenn ich mir den Code so anschaue, nehme ich an, dass du deinen Sprite mit dem CSS-Sprite Generator erstellt hast). Das dürfte dein Problem beheben… 😉

  31. Pingback: Statische Social Network Buttons jetzt und hier | dinofuss.de

  32. Sebastian

    Danke für die Einleitung. Mein Blog wird gerade nach und nach beschleunigt und umgestaltet. Die statischen Button sind aus verschiedener Sicht sehr interessant.

    Habe das ganz im Linkedin, Flattr, RSS und Pinterest ergänzt.

  33. Pingback: Inhalte auf Google+ teilen

  34. Florian

    Vielen Dank für den hilfreichen Artikel!
    Habe das gerade umgesetzt, weil mir die 2-Klick Methode nicht so gut gefällt (auch vom Design her), klappt perfekt.

  35. Pingback: Man kann den kleinen Forscher jetzt teilen | Der kleine Forscher

  36. Pingback: Social Buttons datenschutz | Alexander Walther

  37. Michael

    Hi!

    Habe Deine Lösung schon seit mehreren Monaten erfolgreich im Einsatz. Danke für die Anleitung.

    Leider musste ich feststellen, dass das Teilen mit Google+ nicht funktioniert. Sobald ich den Button zu Google+ anklicke endet das in einer weißen Seite. FB, Twitter u. Xing funktionieren tadellos. Hast Du vielleicht eine Idee woran das liegen könnte? Habe den Code eigentlich 1:1 übernommen und bis vor einiger Zeit funktionierte das auch noch mit Google+. Ob die wohl irgendwas geändert haben?

    Gruß
    Michael

  38. Michael

    @Lioman: Sorry, aber Dein Fix scheint ebenfalls nicht zu funktionieren. Es ist zwar kurz die Eingabemaske zum Teilen zu sehen, aber schon 1-2 Sekunden später wird die Seite neu geladen und nur noch eine weiße Seite angezeigt. 🙁

  39. Michael

    Ja, hab´s jetzt auch gemerkt. Scheinbar hatte Cachify da noch was gespeichert. Hatte zwar den Browsercache geleert, aber das Plugin hatte wohl noch Daten gespeichert… Danke!

  40. Pingback: Wordpress Snippet: Pinterest Share Link ohne Button

  41. Pingback: Wordpress auf ApfelHammer.de – Social Share Buttons in Textpattern

  42. Phat Phoenix

    Hallo Perun;
    ich habe diesen und den vorangegangenen Artikel mit Interesse gelesen, und war schon drauf und dran, das nachzubauen. Dann sah ich allerdings, dass du auf aktuellen Artikeln noch (oder wieder) dynamische Buttons einzusetzen scheinst (z.B. hier > http://www.perun.net/2013/04/12/facebook-messenger-in-firefox-deaktivieren/ unter "Diesen Artikel weiterempfehlen oder später lesen:" sehe ich aktuell dynamische Buttons für Twitter, Facebook, Google+ und t3n).

    Bestimmt hast du dafür gute Gründe. Kannst du mir einen Link zurückposten zu d/einem Artikel, den es bestimmt dazu gibt bei dir, den ich per SuFu aber nicht rausgefischt bekomme. Oder eine kurze erklärende Antwort. Das wäre schön. Vielen Dank dafür! + Guten Gruß,
    Ph. 🙂

Die Kommentare in diesem Beitrag sind geschlossen.