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.

Diesen Beitrag teilen:

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

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

  8. Hi,

    in welchen Ordner muss man eigentlich die Grafiken hochladen?

    Ansonsten vielen Dank fĂŒr die Anleitung.

    gruß johannes

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

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

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

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

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

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

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

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

  17. Ok, danke Helmut! Das hat mich jetzt mal beruhigt.
    Schöne GrĂŒĂŸe auf die andere Odenwaldseite und ĂŒberhaupt schöne Weihnachten an alle!

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

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

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

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

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

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

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

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

  26. […] 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, […]

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

    GrĂŒĂŸe

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

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

  30. @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. […] 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 […]

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

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

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

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

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

  39. […] Facebook und Google+ nutze ich nach dem HowTo von Perun. FĂŒr ein Projekt brauchte ich jedoch auch den Pinterest Link. Hier die […]

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

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