Google Plus Twitter und Facebook Like Button für WordPress ohne Plugin inkl. Download

Artikelbild Wordpress

Bis vor wenigen Tagen habe ich das WordPress Plugin 2-Click Social Media Buttons genutzt. Das die Webseite von der Ladezeit reduziert wurde, funktionierte das Plugin nicht mehr und ich habe dann Google Plus Twitter und Facebook Like Buttons selbst in meinem WordPress Blog eingefügt.

Nachdem ich das 2-Click Social Media Buttons von meinem WordPress gelöscht habe, da auf Grund von Ladezeitenoptimierung das Plugin nicht mehr so funktionierte wie es sollte. Nun kam die Überlegung, was tun, denn darauf verzichten wollte ich ja auch nicht.

Also habe ich etwas gegoogelt und bin auf folgende zwei Beiträge aufmerksam geworden, G+ Button selber bauen.

Auf diesem Beitrag befindet sich gleich noch ein Link für Social Network Buttons im Eigenbau. Diese Anleitung habe ich dann nachgebaut.

Damit habe ich dann 2 Fliegen mit einer klappe geschlagen. Erstens sind meine Teilen Buttons für Facebook, Twitter und Google+ jetzt sagen wir mal rechtskonform. Zweitens, passen sie besser zum Blog und es wird dafür nicht extra ein neues Plugin benötigt, was zusätzlich noch Ladezeit kostet.

Wie ist diese WordPress Erweiterung nun aufgebaut.

In einem PHP Editor, habe ich eine extra PHP Datei angelegt. In dieser befindet sich der Code für die Teilen Buttons.

Dieser Code ist vom Prinzip her einfach aufgebaut.

Man verlinkt in seinen eigenen Social Media Buttons direkt die URL, über die geteilt werden kann.

Diese URL’s sehen folgendermaßen aus:


  1: //Facebook
  2: http://www.facebook.com/sharer/sharer.php?u=DeineURL&=DeinSeitentitel&rc=sp
  3: //Twitter
  4: https://twitter.com/intent/tweet?original_referer=DeineURL&
  5: source=tweetbutton&text=DeinTitel&url=Deine URL
  6: //Google+
  7: https://plus.google.com/share?url=DeineURL&title=DeinTitle
Die URL für Google habe ich korrigiert, da die ursprüngliche URL

  1: https://plusone.google.com/_/+1/confirm?hl=de&url=URL&title=TITEL')

Für einen WordPress Blog werden die URL für Google Plus Twitter und Facebook Like Buttons folgendermaßen angepasst:


  1: //Facebook
  2: http://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>
  3: &t=<?php the_title(); ?>&src=sp
  4: //Twitter
  5: https://twitter.com/intent/tweet?original_referer=<?php the_permalink(); ?>
  6: &source=tweetbutton&text=<?php echo $Titel;?>&url=<?php the_permalink();?>
  7: //Google+
  8: https://plus.google.com/share?url=<?php the_permalink(); ?>
  9: &title=<?php echo $Titel; ?>

Das wäre erstmal der Aufbau der Links, die ich eine likebutton.php gespeichert habe.

Weiterhin müssen die Links noch wissen, was in der Variablen $Titel steht, dafür kann man ebefalls wie im Beitrag von Peer beschrieben folgenden Code verwenden:


  1: <?php
  2: $Titel = $post->post_title;
  3: $Titel = urlencode($Titel);
  4: { ?>

Im Abschluss habe ich noch


  1: <?php
  2: }
  3: ?>

hinter die Links angehangen, um die geöffnete Klammer { zu schließen.

Nun waren erst einmal die Links für die Likebuttons erstellt.

Um dem ganzen ein wenig Optik zu geben wurden die Links in ein paar <DIV> Blöcke eingeschlossen und es wurde Kein Linktext verwendet sondern ein Bild. Bzw. habe ich auch noch einen direkten Datenschutzhinweis als Tool Tip eingepflegt. Damit sah dann der gesamte Code so aus.


  1: <br><br>
  2: <div class="Sharelikebutton">
  3: <div class="sharehead">
  4: <b>Diesen Artikel Teilen</b>
  5: </div>
  6: <div class="sharebuttons">
  7: <?php
  8: $Titel = $post->post_title;
  9: $Titel = urlencode($Titel);
 10: { ?>
 11: <a href="http://www.facebook.com/sharer/sharer.php?u= 
 12: <?php the_permalink(); ?>&t=<?php the_title(); ?>&src=sp" target="_blank"
 13: onclick="FensterOeffnen(this.href); return false">
 14: <img class="shareimg" style="margin: 0px;" src=" 
 15: 
 16: 24/facebook.png"></a>
 17: <a href="https://twitter.com/intent/tweet?original_referer= 
 18: <?php the_permalink(); ?>&source=tweetbutton&text=<?php echo $Titel;?>
 19: &url=<?php the_permalink();?>" target="_blank">
 20: <img class="shareimg" style="margin: 0px;"
 21: src="http://www.diewebservisten.de/wp-content/plugins/share-and-follow/ 
 22: default/24/twitter.png"></a>
 23: <a href="https://plus.google.com/share?url=<?php the_permalink(); ?> 
 24: &title=<?php echo $Titel; ?>" target="_blank"
 25: onclick="FensterOeffnen(this.href); return false">
 26: <img class="shareimg" style="margin: 0px;"
 27: src="http://www.diewebservisten.de/wp-content/plugins/share-and-follow/ 
 28: default/24/google-plus-button.png">
 29: </a>
 30: <?php
 31: }
 32: ?>
 33: <br>
 34: <a href="#" class="tooltip">Datenschutz-Hinweis
 35: <span class="shareandfollowinfo">Bei einem Klick auf den Facebook, Twitter
 36: und/oder Google Plus Button gelangen Sie zu diesen Anbietern. Wir haben
 37: keinen Einfluss auf den Umfang der Daten, die dort erhoben und gesammelt
 38: werden.</span>
 39: </a>
 40: </div>
 41: <div class="shareinfo">
 42: Dir hat der Artikel gefallen, dann teile ihn mit deinen Freunden &uuml;ber
 43: Facebook, Twitter oder Google plus. Klicke einfach auf einen der
 44: linken Buttons.</div>
 45: <div class="sharemail">Keinen Artikel mehr verpassen und
 46: <a href="http://www.diewebservisten.de/post-notification-header-2/"
 47: title="Zum Abonnement von Artikeln">per Mail abbonnieren</a> oder
 48: <a href="http://feeds.feedburner.com/diewebservisten/QOJd?format=xml"
 49: title="Newsfeed abbonnieren">den Newsfeed abbonnieren</a>.</div>
 50: </div>
 51: <br>

Damit alles dann auch optisch so aussieht wie ich es für passend empfand, musste noch die CSS Datei angepasst werden, bzw. damit der Tool Tipp für dien Datenschutzhinweis funktioniert und dazu habe ich folgendes in der CSS Datei ergänzt.


  1: a.tooltip, a.tooltip:link, a.tooltip:visited, a.tooltip:active  {
  2:   position: relative;
  3:   text-decoration: none;
  4:   }
  5:
  6: a.tooltip:hover {
  7:   background: transparent;
  8:   }
  9:
 10: a.tooltip span {
 11:   display: none;
 12:   text-decoration: none;
 13: }
 14:
 15: a.tooltip:hover span {
 16:   display: block;
 17:   position: absolute;
 18:   top: 25px;
 19:   left: 0;
 20:   width: 670px;
 21:   z-index: 100;
 22:   color: #000000;
 23:   border:1px dashed #000000;
 24:   background: #FFFFCC;
 25:   font: 12px Verdana, sans-serif;
 26:   text-align: left;
 27:   padding: 5px;
 28:   }
 29:
 30: a.tooltip span b {
 31:   display: block;
 32:   margin: 0;
 33:   padding: 0;
 34:   font-size: 16px;
 35:   color: yellow;
 36:   background-color: gray;
 37:   border: 0px;
 38:   border-bottom: 1px solid black;
 39: }
 40: .Sharelikebutton {
 41: 	background-color: #D1DBEB;
 42:   	border-color: #99ABC7;
 43:   	border-style: dashed;
 44:   	border-width: 1px;
 45:   	padding: 10px 10px 10px 10px;
 46: 	height: 70px;
 47:
 48: }
 49: .sharehead {
 50: 	width: 100%;
 51: 	margin-bottom: 5px;
 52: }
 53: .sharebuttons {
 54: 	float: left;
 55: 	width: 170px;
 56: 	position: relative;
 57: }
 58: .shareinfo {
 59: 	float: left;
 60: 	width: 330px;
 61: 	position: relative;
 62: }
 63: .sharemail {
 64: 	float: left;
 65: 	width: 200px;
 66: 	position: relative;
 67: }

Nun musste die likebutton.php noch in die Artikelanzeige integriert werden, dafür habe wurde dann diese Zeile in die single.php eingefügt.


  1: <!-- Like Buttons -->
  2: <?php include (TEMPLATEPATH . '/likebuttons.php'); ?>
  3: <!-- Like Buttons End -->

Natürlich müsst ihr dann, wenn ihr dies nachbauen wollt, die likebutton.php im Ordner eures Themes für WordPress abspeichern.

Ich hoffe, dem einen oder anderen WordPress Nutzer hat dieser Artikel geholfen, einen Weg für die eigenen Like Buttons zu finden.

Meine likebuttons.php und den zugehörigen CSS Code kann auch zur eigenen Verwendung heruntergeladen werden: Google Plus Twitter und Facebook Like Button für Wordpress (358)

Viel Spaß beim Teilen.

Bücher zu WordPress

Über Michael Bergler 679 Artikel
Mein Name ist Michael Bergler ich stamme aus Sachsen und habe seit 10 Jahren die Leidenschaft mich mit HTML, PHP, Bildbearbeitung und Perl zu beschäftigen. Seit 2011 lebe ich in Chemnitz und arbeite als Selbständiger in dem Bereich Informationstechnologie (IT), Büroservice und Telefonmarketing. In meinem Blog, online seit Dezember 2010, geht es um die Ausbildung zum IT-Systemkaufmann, Games und alles rund um den PC. Von daher lag es nah eine Umschulung 2006 – 2009 in dem Beruf IT-Systemkaufmann zu absolvieren, welche ich dann auch im Januar 2009 erfolgreich abgeschlossen habe. Ich bin in Leipzig geboren und in der Umgebung von Dresden aufgewachsen.

Ersten Kommentar schreiben

Kommentar verfassen