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

Divi: Premium-Theme für WordPress
Werbung

Geschrieben von Vladimir

Vladimir Simović, arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

  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. […] Lösungen zurück. Perun berichtete darüber in den letzten Tagen recht ausführlich und stellt Alternativen zur Einbindung von statischen (und somit ungefährlichen) Buttons oder Icons […]

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

  5. Klasse! Hast du noch einen Tipp, wie der statische Link zu Flattr aufgebaut sein müsste?

    Danke
    Christoph

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

    😉

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

  8. Sehr gut, tolle Lösung, danke! Mach doch ein Plugin draus! 😉

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

  10. Twitter Facebook und Co Buttons ohne Sendeantenne … Freitag, 16. Dezember 2011 am 14:40

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

  11. Wie hast du denn die zusammengesetzte Grafik gebastelt ?

    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?

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

  13. Hi,

    in welchen Ordner muss man eigentlich die Grafiken hochladen?

    Ansonsten vielen Dank für die Anleitung.

    gruß johannes

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

  15. Facebook, Google Plus & Twitter Button mit statischem Link und Zähler einbinden Samstag, 17. Dezember 2011 am 16:01

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

  16. @ Dürrbi: Unter http://spritegen.website-performance.org/findest du eine bequeme Möglichkeit Sprites zu erzeugen. Du musst vorher deine Bilder nur zippen. Den Rest erledigt das Online-Tool.

  17. Social Media Plugins, Buttons und der Datenschutz – was tun? | CouchCat.de Sonntag, 18. Dezember 2011 am 12: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. […]

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

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

  20. @Perun
    Ich glaub das kriege ich hin… ist wie Collage Kleben im Kunstunterricht 🙂

  21. @Perun
    hat geklappt. Mit dem guten alten Paint geht das problemlos 😀

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

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

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

  25. Hi Sabienes,

    das kann ich Dir nicht wirklich sagen weil ich nicht weis wie dein Plugin arbeitet. Zumindest die Icons liegen lokal auf deinem Hosting:

    /wp-content/plugins/social-media-widget/images/default/32/twitter.png

    da kannst Du die finden.

    Schöne
    findest Du übrigens auch auf meiner Site.

    🙄

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

  27. […] als auch die Fan-Box in der Seitenleiste ersetzt. Die neuen Social Media Buttons wurden nach Anleitung auf perun.net umgesetzt und sind nun datenschutzkonform. Nur Flattr benötigt weitere […]

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

  29. Danke für das tolle Beispiel. Ich bin damit nun auf meinem Blog auch auf die statischen Buttons umgestiegen. 🙂

  30. Facebook, Twitter & Co. - Android-Handys.org Dienstag, 03. Januar 2012 am 14:00

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

  31. […] auch bei den statischen Buttons, die sich unterhalb der Artikel befinden, kommen ein CSS-Sprite und die Icons von Paul Robert Lloyd […]

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

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

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

  35. Vielleicht kann man ja Google dazu bewegen eine JS-freie Version des +1 Buttons anzubieten hier gibt es ein Featue-Request: https://code.google.com/p/google-plus-platform/issues/detail?id=50

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

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

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

  39. Habe die Buttons jetzt auch bei mir eingebaut, ist ja super-einfach. Vielen Dank für die tolle Erklärung und die Code-Snippets.

  40. Neues Blog Logo und Design › Daniel Hüsken Samstag, 21. Januar 2012 am 01:40

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

  41. […] habe ich das anhand der Anleitung von Perun, allerdings habe ich Grafik (siehe rechts) und Code um Flattr erweitert und Xing aus beidem […]

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

    Grüße

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

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

  45. […] beschrieben wieso ich das mache und ich habe auch ein paar Performance-Statistiken geliefert. Im zweiten Artikel habe ich dann konkret beschrieben, wie ich die Buttons umgesetzt […]

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

  47. Danke für den Tipp.
    Hab‘ das gleich umgesetzt – auch für Seiten ohne WordPress

  48. Statische Social Network Buttons jetzt und hier | dinofuss.de Dienstag, 06. März 2012 am 19:34

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

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

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

  51. Ich habe den Code nochmals aktualisiert nun gibt es eine echte teilenURL von Google: Inhalte auf Google+ teilen

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

  53. […] war mir das dank eines tollen Artikels auf Liomans Blog, welcher wiederum von einem Artikel bei Perun inspiriert wurde. Danke an […]

  54. Social Buttons datenschutz | Alexander Walther Dienstag, 04. September 2012 am 21:26

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

  55. Guten Morgen Perun
    Du hast deine statischen Buttons aber wieder gegen dynamische getauscht?! Hat das einen Grund?

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

  57. @Lioman: Vielen Dank, werde ich heute Abend direkt ausprobieren!

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

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

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

  61. Wordpress auf ApfelHammer.de – Social Share Buttons in Textpattern Samstag, 16. März 2013 am 17:59

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

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

  63. Hi Phat Phoenix,

    wenn es Dir um Performanceverbesserung geht, könnte das hier für Dich interessant sein: http://sharrre.com

    Das Script hat 3.9KB und klingt recht vielversprechend.

    Diese Buttons sind z.B. auch für das Script gedacht
    http://dribbble.com/shots/684822-Free-Social-Button-PSD

    Gruß,
    Hermann

Kommentare sind geschlossen.