Statische und valide Social Media-Buttons per Popup – modifiziert

Popup Twitter, Facebook & Google

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

<a title="Bei Google+ empfehlen" href="https://accounts.google.com/ServiceLogin?service=oz&passive=1209600&continue=https://plus.google.com/share?url%3D%253C?php%2Becho%2Burlencode(get_permalink($post-%253EID));%2B?%253E%26hl%3Dde%26gpsrc%3Dframeless&btmpl=popup&hl=de" target="blank"><img style="float: left; width: 35px;" src="<?php bloginfo('template_url')?>/Name der Grafikdatei" alt="Google +1" /></a>

 Nachher

<a title="Bei Google+ empfehlen" href="https://accounts.google.com/ServiceLogin?service=oz&passive=1209600&continue=https://plus.google.com/share?url%3D%253C?php%2Becho%2Burlencode(get_permalink($post-%253EID));%2B?%253E%26title%3D%253C?php%2Becho%2B$Titel;%2B?%253E%26gpsrc%3Dframeless&btmpl=popup"><img style="float: left; width: 35px;" src="https://www.sylvis-blog.de/<?php bloginfo('template_url')?>/Name der Grafikdatei" alt="Google +1" /></a>

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

div class="e-gplus">
 <a target="popup" onclick="window.open('', 'popup', 'width=640,height=350,scrollbars=no, toolbar=no,status=no,resizable=yes,menubar=no,location=no,directories=no,top=50,left=50') "href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php echo $Titel; ?>" title="Bei Google+ empfehlen"><img src="<?php bloginfo('template_url')?>/Name der Grafikdatei" alt="Google +1" style="float:left;width:35px;" /></a>
 <div class="e-zaehler" style="margin-left:-1px;">
  <?php $URL = get_permalink();
  function get_plusone($url) {
   $curl = curl_init();
   curl_setopt($curl, CURLOPT_URL, "https://clients6.google.com/rpc");
   curl_setopt($curl, CURLOPT_POST, 1);
   curl_setopt($curl, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]');
   curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
   curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-type: application/json'));
   $curl_results = curl_exec ($curl);
   curl_close ($curl);
   $json = json_decode($curl_results, true);
   return intval( $json[0]['result']['metadata']['globalCounts']['count'] );
  } ?>
  <div class="e-zaehler-text"><?php echo get_plusone($URL); ?></div>
 </div>
</div>

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

.e-gplus { float:left; width:100px}

Hintergrund Google+-Zähler

.e-zaehler { background:url(eigene-buttons/zaehler_.png) no-repeat; height:48px; width:62px; float:left}

Schrift Google+-Zähler

.e-zaehler-text { font-weight:normal; width:19px; margin-left:5px; font-size:10px; line-height:20px; text-align:center}

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

hashtags='<!--?php $posttags = get_the_tags();$count=0;if ($posttags) {foreach($posttags as $tag) {$count++;if ($count <= 3) {echo $tag--->name . ',';}}}?>

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

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

<div class="e-twitter">
 <a target="popup" onclick="window.open  ('', 'popup', 'width=500,height=500,scrollbars=no, toolbar=no,status=no,resizable=yes,menubar=no,location=no,directories=no,top=50,left=50') "href="https://twitter.com/intent/tweet?source=webclient&text=<?php echo rawurlencode(strip_tags(get_the_title())).'&via=RebuSylvi&url=' , urlencode(get_permalink($post->ID))?>&hashtags='<?php $posttags = get_the_tags();$count=0;if ($posttags) {foreach($posttags as $tag) {$count++;if ($count <= 3) {echo $tag->name . ',';}}}?>" title="Bei Twitter empfehlen"><img src="<?php bloginfo('template_url')?>/eigene-buttons/twitter_1.png" alt="Twittern" style="float:left;width:71px;" /></a>
 <div class="e-zaehler">
  <?php $URL = get_permalink();
  function get_retweets($URL) {
   $SBstring = file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url=' . $URL);
   $SBarray = json_decode($SBstring, true);
   return intval( $SBarray['count'] );
  } ?>
  <div class="e-zaehler-text"><?php echo get_retweets($URL);?></div>
 </div>
</div>

Ä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

.e-twitter {float:left; width:140px}

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

<div class="e-fb">
 <a target="popup" onclick="window.open  ('', 'popup', 'width=700,height=450,scrollbars=no, toolbar=no,status=no,resizable=yes,menubar=no,location=no,directories=no,top=50,left=50') "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())) ?>" title="Auf Facebook teilen"><img src="<?php bloginfo('template_url')?>/eigene-buttons/facebook2.png" alt="Teilen" style="float:left;width:67px;margin-right:2px;" /></a>
 <div class="e-zaehler" style="margin-left:-2px;">
  <?php $URL = get_permalink();
  function get_shares($URL) {
   $json_string = file_get_contents('http://graph.facebook.com/?ids=' . $URL);
   $json = json_decode($json_string, true);
   return intval( $json[$URL]['shares'] );
  } ?>
  <div class="e-zaehler-text"><?php echo get_shares($URL); ?></div>
 </div>
</div>

CSS-Gestaltung Facebook-Button

e-fb { float:left; width:140px}

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

Hinweis
Dieser Beitrag bezieht sich auf Codierungen oder/und Funktionen, die ich noch in meinem alten Template umgesetzt habe. Es ist möglich, dass sie in dem aktuellen Blog-Theme nicht übernommen wurden und somit die Darstellung bzw. Funktion nicht mehr existiert.

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

10 Kommentare

  • Finde die Lösung auch optimal und seitens des Codes gut gelöst. Ich persönlich bei bleibe doch lieber bei der “Tab-Variante” ;-)

    • Danke Dieter, für Dein Feedback. Die Umsetzung soll auch nicht die ultimative Lösung aber eventuell eine Alternative sein.

      Ansonsten … jeder wie er mag. :-)

  • 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? ;-)

      Lieben Sonntagsgruß aus dem Sauerland,
      Sylvi

      P.S.: Hast Du. Sehe gerade den Retweet. ;-)

  • 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öhe width="" height="" eingeben.

    MfG

    • Hallo Viktor,

      ich werde mit Sicherheit noch andere Lösungen ausprobieren, schließlich führen ja viele Wege nach Rom. ;-)
      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. ;-)

      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.

    (Abmessungen: 63 x 19)
    (Abmessungen: 32 x 20)
    (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 :)

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

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

      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