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.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

69 Kommentare

  1. Hallo,
    danke für die schöne ausführliche Anleitung.
    Kann man für die URL des Artikels auch einfach

    benutzen?

  2. Danke für die Erklärung.
    Ohne Probleme eingebaut und für gut befunden. 😉

    LG
    Ben

  3. 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!

  4. 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…

    😉

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

    […] im Code an die eigene Seite anpassen.Hier sind die Links zu den Artikeln:Artikel auf BlogprojektArtikel auf PerunArtikel auf AdmartinatorUnter diesen drei Artikeln sollte für jeden das passende dabei sein und […]

  6. Oh.. ich wollte man Wochenende mich mal damit beschäftigen das macht es leichter. Vielen Dank für den Artikel :).

  7. […] hatte mal wieder einen super Tipp auf Lager. Unter https://www.perun.net/2011/12/15/facebook-twitter-google-statische-buttons-im-eigenbau zeigt er wie man Social Networkbuttons Statisch (also ohne Sendeantenne zum Netzwerk) in seinen […]

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

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

  9. Hi,

    in welchen Ordner muss man eigentlich die Grafiken hochladen?

    Ansonsten vielen Dank für die Anleitung.

    gruß johannes

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

  11. […] statischen Links zu versehen griff ich auf die Lösung von Perun zurück, die er in seinem Artikel Facebook, Twitter, Google: statische Buttons im Eigenbau ausführlich erklärt. Das Ganze in die single.php meines Themes eingebunden, mit CSS schön […]

  12. […] Ob nun sicher oder datenschutzwidrig, wir Laien werden dies nicht klären können. Dennoch gefällt mir diese Lösung und neben der Verbannung von Social Media Buttons auf Blogs, auf denen ich aktuell nicht aktiv bin, wird bei mir diese statische Lösung Einzug halten. Zwei schöne ausführliche Anleitungen, wie man sich die eigenen statischen Social Media Buttons erstellen kann, gibt es einmal bei Peer im Artikel Social Networks Buttons im Eigenbau, sowie auch bei Perun im Artikel Facebook, Twitter, Google: statische Buttons im Eigenbau. […]

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

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

  15. Jetzt muss ich hier mal ganz blöd in die Runde fragen, was denn der Unterschied zwischen einem statischen und einem dynamischen Button ist?

    Danke.

  16. 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
    😆

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

  18. Ok, danke Helmut! Das hat mich jetzt mal beruhigt.
    Schöne Grüße auf die andere Odenwaldseite und überhaupt schöne Weihnachten an alle!

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

  20. […] nervte schon ewig, die Perfomancebremse durch das Einbinden von Social Media Plugins. Auf perun.net gibt es nun eine Anleitung wie man die Icons statisch einbindet, dadurch schneller wird und Daten […]

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




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

  22. 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?

  23. +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

  24. 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!?

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

  26. 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…

  27. […] da. Die einzigen Änderungen die zur Zeit drin sind sind die Social Icons die im Prinzip wie bei perun.net beschrieben eingebunden wurden. Das heißt auch keine Datenübertragung im Hintergrund an Google, […]

  28. Ich danke dir für diese zahlreichen Tipps, habe es endlich die Zeit gefunden und an meine Bedürfnisse angepasst 😉

    Grüße

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

  30. […] noch nicht eingebaut habe. Sicherer vor Abmahnungen ist man bei dem Einbau der Buttons mittels statischen Links. Auch interessant sind die 2 Click-Social-Media […]

  31. @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… 😉

  32. […] die Anleitung  zur Umsetzung der statischen Buttons stammen von Vladimir Simovic, perun.net.de (Facebook, Twitter, Google: statische Buttons im Eigenbau), dem an dieser Stelle herzlich gedankt […]

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

  34. […] in diversen Sozialen-Netzwerken teilen können. Der Code, der hauptsächlich auf einer Idee von Perun basiert hatte ein Problem: Teilen auf Google+ war eine Art Workaround, da es keine eigene URL […]

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

  36. […] habe, scheint eben­falls zuver­läs­sig zu funktionieren. Auf den Punkt gebracht wurde diese sta­ti­sche Button-Lösung von Vla­di­mir Simo­vic in […]

  37. 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. @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. 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. […] Facebook und Google+ nutze ich nach dem HowTo von Perun. Für ein Projekt brauchte ich jedoch auch den Pinterest Link. Hier die […]

  41. […] habe ich einfach die sehr gute Anleitung von Perun adaptiert und auf Textpattern angewendet, obwohl er das eigentlich schon von allein gemacht […]

  42. 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 > https://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. 🙂

Kommentare sind geschlossen.