Statische und valide Social Media Buttons per Popup – modifiziert

Geschätzte Lesezeit: 2 Minuten

In meinem ersten Beitrag über valide Social Media Buttons hatte ich bereits dokumentiert, wie ich in diesem Blog valide Twitter- und Facebook-Buttons eingebunden habe. Nach einer Weile entschied ich mich für Tanjas Lösung und Ihren Codebeispielen für statische Links zu den jeweiligen Netzwerken. Schön fand ich, dass bei dieser Umsetzung kein Javascript benötigt wird. Neben Twitter und Facebook hielt dann auch der Google+-Button hier Einzug.

Das Tüpfelchen auf dem i war für mich, dass sich durch Klick auf die jeweiligen Buttons die Links statt eines separaten Fensters oder Tabs nun per Popupfenster öffnen – ebenfalls ohne Javascript. Ich halte diese Lösung für optimal und sie funktionierte einwandfrei.

Google+-Button gab es zwischenzeitlich Probleme

Nach einer Weile musste ich allerdings feststellen, dass das Teilen bei Google+ nicht mehr funktionierte. Mit anderen Worten: das Fenster öffnete sich zwar, aber es blieb weiß. Auf die Schnelle fand ich keine Lösung und so stieg ich zeitweise auf das Plugin SiN SocialShare von Peer Wandiger um.

Keine Frage, es gefällt mir sehr gut – sowohl von der Funktionsweise, einfachen Konfiguration als auch optischen Gestaltung her und daher kann ich es wirklich weiterempfehlen.

Allerdings brannte es mir unter den Nägeln, das Problem mit dem Google+-Button zu lösen und die manuelle Lösung wieder einzusetzen. Der Vorteil liegt auf der Hand: ein Plugin weniger und meine Startseite ist nun wieder valide.

Es lag einzig und allein an der Share-Url.

Vorher

 Nachher

Da es nicht für jeden einfach ist, einen php-Code zusammen zu schustern, veröffentliche ich hier meinen kompletten Code einschließlich div-Tags für die Gestaltung im CSS.

Kompletter php-Code für Google+-Button mit Popup-Lösung

CSS-Gestaltung

Natürlich könnt ihr den Code nach Euren Bedürfnissen ändern bzw. ergänzen. Zu finden ist dieser in der Datei style.css meines Themes. Darin musste ich den Button, die Schrift und Hintergrund für den Zähler deklarieren. Das schaut bei mir dann so aus:

Google+-Button

Hintergrund Google+-Zähler

Schrift Google+-Zähler

Auch hier muss der Pfad zu Eurer Grafikdatei angepasst werden.


Twitter-Button mit Hashtags

Mir gefällt an der manuellen Codelösung des Twitter-Buttons besonders gut, dass zusätzlich Tags des Blog-Beitrages als Hashtags bei einem Retweet ausgegeben werden. Umgesetzt wird dieses mit dem Codeschnipsel

Darin habe ich die Anzahl der auszugebenden Tags auf 3 begrenzt.

Kompletter php-Code für Twitter-Button mit Popup-Lösung

Ändern müsst ihr dann noch den Twitternamen (bei mir „via=RebuSylvi“) und die Grafik-Url für den Button (bei mir „/eigene-buttons/twitter_1.png“).

Den CSS-Code habe ich wie folgt angepasst:

CSS-Gestaltung Twitter-Button

Das Styling per CSS von Hintergrund und Schrift des Twitter-Zählers entspricht dem des Google+-Buttons.


Last but not least der Button zum Teilen auf Facebook

Kompletter php-Code für Facebook-Button mit Popup-Lösung

CSS-Gestaltung Facebook-Button

Auch hier ist das Styling per CSS von Hintergrund und Schrift identisch mit dem des Twitter-Buttons.


10 Kommentare

Kommentare hinzufügen
  • Hallo Sylvi,

    eine sehr interessante Art, wie man diese Buttons einfügen kann. Persönlich ist mir das zuviel Arbeit, da bleibe ich lieber bei dem Plugin von H.-P. Pfeufer.

    Übrigens gibt es bei mir trotz deiner Bemühungen keine Popups, da ich diese Teile nicht ausstehen kann! Mein Browser (SeaMonkey) ist so eingestellt, daß diese in einem neuen Tab erscheinen. So kenne ich das eigentlich auch aus meinem Bekanntenkreis, da wirklich keiner viel von solchen Popups hält!

    Viele sonntägliche Grüße nun aus TmoWizard’s Castle zu Augsburg

    Mike, TmoWizard

    • Hallo Mike,

      also die Popups habe ich so eingestellt, dass sie sich in einem Fenster öffnen und die Größe der Fenster habe ich individuell definiert.
      Daher verstehe ich nicht ganz, was das Öffnen eines Popupfensters durch Klick auf einen Socialmedia-Button von dem per Plugin unterscheidet.
      Schon mal getestet? smilie

      Lieben Sonntagsgruß aus dem Sauerland,
      Sylvi

      P.S.: Hast Du. Sehe gerade den Retweet. smilie

  • Hallo Sylvi,
    Guter lösung, ich hätte für so was vielleicht besser eigene share.php erstellt und ganze code rein gepackt und dann über php include ins Thema integriert, um so große stück code in single.php zu vermeiden.

    Persönlich nutze ich ganz andere Metode für Share Buttons, aber auch keine Plug-ins.
    Zur deine code würde ich noch für Buttons Attribute für Breite und Höhewidth="" height="" eingeben.

    MfG

    • Hallo Viktor,

      ich werde mit Sicherheit noch andere Lösungen ausprobieren, schließlich führen ja viele Wege nach Rom. smilie
      In dem Beitrag Der statische Facebook-Button zählt wieder habe ich bereits eine Lösung vorgestellt, bei der ein Teil des Codes in der functions.php und der restliche und somit wesentlich reduzierte Teil in der single.php eingebunden ist.
      Die anderen beiden (Twitter und Google+) Lösungen von Dennis werde ich auch noch einmal antesten.
      Die Werte „width“ und „height“ habe ich im CSS definiert. smilie

      Gruß Sylvi

  • Hallo Sylvi,

    das du die Werte im CSS definiert hast schön und gut für den code aber nicht für Html, schlißlich hast du Buttons als .png und nicht in CSS, deswegen gehört Attribute für Breite und Höhe ins code rein für Buttonbildchen.

    Für die folgenden Bilder fehlen Attribute für Breite und Höhe.

    https://www.sylvis-blog.de/wp-content/themes/Smoky/eigene-buttons/facebook2.png (Abmessungen: 63 x 19)
    https://www.sylvis-blog.de/wp-content/themes/Smoky/eigene-buttons/google+.png (Abmessungen: 32 x 20)
    https://www.sylvis-blog.de/wp-content/themes/Smoky/eigene-buttons/twitter_1.png (Abmessungen: 66 x 20)

    Das ist, dass was ich meine.
    MfG

  • Hey Sylvi

    erstmal: vielen Dank für den tollen Artikel.

    Ich habe eine kleine modifizierung für dich.
    Wenn das das /a-Tag verschiebst, ist der gesamte Button automatisch anklickbar.

    Das alte /a-Tag muss entsprechend aus dem oberen Teil entfernt bzw. neu platziert werden smilie

    Das /a-Tag kommt vor dem vorletzten /div-Tag

    • Hallo Florian,

      vielen Dank für Dein nettes Feedback. Aber leider kann ich das nicht so bestätigen, was Du bezüglich der „Anklickbarkeit“ gesagt hast, sorry. smilie

      1. Der Button ist genauso anklickbar wie vorher – also im Bereich der Anzahl der geteilten Beiträge ist weiterhin der Klick nicht möglich. Was ich aber auch jetzt nicht schlimm finde, da die Buttons ja groß genug sind. smilie

      2. Die html-Verschachtelung wäre nicht mehr korrekt. da die div-Tags derzeit den Code umschließen. Würde ich es ändern, wie Du es vorschlägst, sehe es so aus

      . Ich habe mal gelernt, dass es so heißen müsste:

      und
      3. mag das W3C auch nicht, weil prompt 2 zusätzliche valide Fehler ausgeworfen werden.

      zwei valide Fehler

      Gruß Sylvi

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du kannst diese HTML-tags und attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Du hast 15 Minuten Zeit, um Deinen Kommentar nachträglich zu korrigieren.

Copyright © Sylvis Blog • 2017. Alle Rechte vorbehalten. •   Impressum   •    Datenschutzerklärung

%d Bloggern gefällt das: