Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!

Einfache Social Media Buttons ohne Plugin

Auch Social Media Buttons sind meiner Meinung nach Dinge, für die man definitiv kein Plugin braucht. Daher hier mal ein kleines Snippet, welches du in deine single.php einbinden musst. Es wird dann automatisch der Link der aktuellen Seite genommen und zum Teilen öffnet sich ein kleines Popup. Easy as 1.. 2.. 3.. :)

simple social media buttons

Hinweis: Das Tutorial ist für Themes aufgebaut, die mit Bootstrap und Font Awesome ausgebaut sind. Einige Klassen (list-inline, fa, fa-*, hidden-xs) werden durch diese beiden Quellen geladen. Alternativ kannst du dir auch nur die CSS-Klassen wie „hidden-xs“ oder „list-inline“ aus der Bootstrap CSS ziehen und in dein Theme einfügen.

In diesem Beispiel nutzen wir: Facebook Like, Facebook Share, Twitter, Google+, Xing und LinkedIN (welches bei der mobilen Ansicht durch WhatsApp ersetzt wird).

HTML Code

Kurz zu Erklärung anhand des ersten „Buttons“ in Zeile 3 bis 5.

  • Zeile 3: Hier wird auf die „like“-URL von Facebook verwiesen. Das Ganze öffnet sich in einem kleinen Popup. Damit Facebook weiß, welche URL du gerade Teilst, wird diese Hinter das ?href= gehängt.
  • Zeile 4: In dieser Zeile laden wir das Font Awesome Icon, in dem Fall einen Daumen nach oben.
  • Zeile 5: Abschließend wird noch der Button-Text definiert. Dieser wird aber nur angezeigt, wenn die Breite des Browsers >=768px beträgt.
  • Zeile 26 / 32: Sollte es sich bei dem Besucher um einen mobilen Besucher handeln, so wird hier festgelegt, dass ein WhatsApp Button erscheint. Das muss man natürlich nicht so machen, sparte in diesem Beispiel aber ein wenig CSS Arbeit. ;)
<ul class="list-social list-inline">
	<li class="social-fb">
		<a href="https://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>" onclick="socialp(this, 'fb');return false;" rel="nofollow">
			<i class="fa fa-facebook"></i>
			<span class="hidden-xs">Liken</span>
		</a>
	</li>
	<li class="social-fb2">
		<a href="http://www.facebook.com/sharer.php?u=<?php echo get_permalink(); ?>" onclick="socialp(this, 'fb');return false;" rel="nofollow">
			<i class="fa fa-thumbs-up"></i>
			<span class="hidden-xs">Teilen</span>
		</a>
	</li>
	<li class="social-tw">
		<a href="https://twitter.com/share?url=<?php echo get_permalink(); ?>" onclick="socialp(this, 'twitter');return false;" rel="nofollow">
			<i class="fa fa-twitter"></i>
			<span class="hidden-xs">Tweeten</span>
		</a>
	</li>
	<li class="social-gp">
		<a href="https://plus.google.com/share?url=<?php echo get_permalink(); ?>" onclick="socialp(this, 'gplus');return false;" rel="nofollow">
			<i class="fa fa-google-plus"></i>
			<span class="hidden-xs">Plussen</span>
		</a>
	</li>
	<li class="social-xi hidden-xs">
		<a href="https://www.xing-share.com/app/user?op=share;sc_p=xing-share;url=<?php echo get_permalink(); ?>" onclick="socialp(this, 'xing');return false;" rel="nofollow">
		<i class="fa fa-xing"></i>
			<span class="hidden-xs">Xing'en</span>
		</a>
	</li>
	<li class="social-wa visible-xs">
		<a href="whatsapp://send?text=<?php echo get_the_title() . ' - ' . urlencode(get_permalink($post->ID)); ?>" onclick="socialp(this, 'wa');return false;" rel="nofollow">
		<i class="fa fa-whatsapp"></i>
			<span class="hidden-xs">WhatsApp</span>
		</a>
	</li>
</ul>

CSS Code

Ich denke der CSS Code ist größtenteils selbsterklärend. Zeile 2 definiert die Breite der Buttons und das diese brav nebeneinander hängen, Zeile 3 setzt grundlgended Styles für den Aufbau des Buttons, die darauffolgenden Zeilen sind dann für die Farbgebund und die letzte Zeile für die Farbe beim Hover-Effekt. :)

.list-social                 { margin-bottom: 30px; }
.list-social li              { width: 20%; float:left; }
.list-social li a            { color: #fff; display: block; padding: 7px 15px; transition: all 0.2s; }
.list-social li.social-fb a  { background: #3b5998; }
.list-social li.social-fb2 a { background: #3b5998; }
.list-social li.social-tw a  { background: #55acee; }
.list-social li.social-gp a  { background: #dd4b39; }
.list-social li.social-xi a  { background: #026466; }
.list-social li.social-wa a  { background: #64d448; }
.list-social li a:hover,
.post-social li a:focus      { background: #c01313; text-decoration: none; }

JavaScript Code

Damit das Ganze auch entsprechend in einem Popup aufgeht, benötigen wir noch etwas JavaScript. Hier wird zum Beispiel geschaut, dass sich das Popup an die größe des Screens anpasst

Bei Teilen via Twitter wird zudem noch der Inhalt der „twitter:description“ geladen (falls gesetzt). Sollte es diese aber nicht geben, so nimmt das Script die Beschreibung aus dem Open Graph Tag. Sollte auch dieses nicht gesetzt sein, so wird die normale Meta-Description aus dem head verwendet. Zudem wird, sofern vorhanden noch der Name des Autors mit übergeben.

function socialp(elem, m) {
	if (m == 'twitter') {
        var desc = "";
        if (document.getElementsByName("twitter:description").length) {
            desc = document.getElementsByName("twitter:description")[0].content;
        } else {
            var el, els = document.getElementsByTagName("meta");
            var i = els.length;
            while (i--) {
                el = els[i];
                if (el.getAttribute("property") == "og:title") {
                    desc = el.content;
                    break;
                }
            }
            if (desc == "") {
                if (document.getElementsByName("description").length) {
                    desc = document.getElementsByName("description")[0].content;
                }
            }
        }
        var creator = "";
        if (document.getElementsByName("twitter:creator").length) {
            creator = document.getElementsByName("twitter:creator")[0].content;
        }
        creator = creator.replace('@', '');
        elem.href += "&text=" + desc + "&via=" + creator + "&related=" + creator;
    }
    
    elem = window.open(elem.href, "Teile diese Seite", "width=600,height=500,resizable=yes");
    elem.moveTo(screen.width / 2 - 300, screen.height / 2 - 450);
    elem.focus()
}

Ich hoffe das Snippet konnte dem ein oder anderen Helfen und sorgt dafür, dass hier ein da ein Plugin weniger zum Einsatz kommt. ;)

Über André

Als Web- und Grafikdesigner arbeite ich täglich mit WordPress. Auf DRWP.de veröffentliche ich in unregelmäßigen Abständen immer wieder kleinere Snippets und Artikel, die mir bei meiner täglichen Arbeit helfen und auch für den ein oder anderen Suchenden von nicht unerheblichem Interesse sein könnten.

WordPress Affiliate ThemeAnzeige

13 Kommentare

Avatar von Carry

Carry 14. April 2015 um 17:44

Danke für den Code :) Wo muss ich denn das Jacascript einbauen? CSS und HTML sind mir klar :)

Antworten
Avatar von André

André 14. April 2015 um 18:21

Entweder in die single.php in einen JavaScript-Container, oooder in die footer.php in einen JavaScript-Container oder in eine eigene .js-File die dann entsprechend geladen wird die auch wieder in die Footer.php oder Single.php. Sieht dann so aus:

<script src="/url/zur/javascript.js"></script>
Antworten
Avatar von DanielB

DanielB 15. April 2015 um 12:32

Danke dir André, funktioniert einwandfrei :)

Antworten
Avatar von Marcel

Marcel 22. April 2015 um 8:19

Könntet ihr auch ein anderes Tutorial schreiben, was den Einbau von Social Media Buttons zum Sharen zeigt, welche zuerst aktiviert werden müssen, bevor man sharen kann? Dürfte sicher einige interessieren

Antworten
Avatar von Christian

Christian 22. April 2015 um 9:39

Das vorherige aktivieren ist ja nur dann „sinnvoll“ wenn man die originalen Buttons verwendet, wegen Datenschutz. Unsere Social Buttons laden KEINERLEI laden es sind im Prinzip nur einfache Links. Also nicht notwendig!

Antworten

Die Social Web News der 16. Kalenderwoche 22. August 2015 um 15:29

[…] man eigene Buttons bauen kann. Somit könnte man zukünftig auf ein Plugin mehr verzichten.   Einfache Social Media Buttons ohne Plugin […]

Avatar von Kai

Kai 21. Oktober 2015 um 15:58

Hallo, ich bin ein absoluter Anfänger was sowas angeht. Ich begreife nicht, wo ich die Bootstrap- und Fontawesome-Resourcen herbekomme, und wo ich sie einfügen muss.
Kann mir da jemand behilflich sein? Danke!

Antworten
Avatar von Kai

Kai 21. Oktober 2015 um 21:50

Hallo, ich nochmal.
Ich habe es dann doch hinbekommen. Aber kann es sein, dass der Likebutton mobil nicht vernünftig funktioniert? Irgendwie erscheint der Gefällt mir button dann extrem klein links oben in der Ecke.
Ist das so richtig?

Gruß, Kai

Antworten
Avatar von André

André 27. Oktober 2015 um 17:58

Hey Kai, eigentlich nicht. Vermute hier eher, dass ein anderer CSS Code dazwischenfummelt.

Avatar von Sebastian

Sebastian 4. Januar 2016 um 10:02

Hallo!
Also, bei mir funktioniert es nicht so wie bei euch.
1. Die erstellten Buttons liegen direkt nebeneinander, also keinen Freiraum dazwischen
2. Es erscheinen keine Symbole von FB, G+ usw.
3. Beim klicken auf den „Gefällt mir“ Button zeigt er mir „Fehler“ an
4. Beim klicken auf den“Teilen“ Button muss ich 3x klicken. Erst wird mir der korrekte Link angezeigt dann einer von FB und dann kann ich ihn teilen aber nicht den Korrekten Link sondern den von FB
4. Ich habe „hidden-xs“ und „list-inline“ aus dem Bootstrap-CSS in meines übertragen aber es hat sich nichts geändert

Wo liegt der Fehler bei mir?

Antworten
Avatar von Paul

Paul 15. Juni 2016 um 12:34

Dank für diesen Code. sieht alles bei mir schick aus, nur ist bei Facebook-Teilen die URL der Webseite die geteilt werden soll nicht eingeloggt… Ich habe hier stehen:

  • <a href="http://www.facebook.com/sharer.php?url=http://www.meine-webseite.com/“ onclick=“socialp(this, ‚fb‘);return false;“ rel=“nofollow“>

    Teilen

  • Kann Jemand helfen?

    Antworten
    Avatar von Paul

    Paul 15. Juni 2016 um 12:35

    hier nochmal der code: http://pastebin.com/T40t4Wvr

    Antworten
    Avatar von Christian

    Christian 11. Juli 2016 um 15:59

    Hi Paul,

    richtig wäre ja:

    http://www.facebook.com/sharer.php?url=< ?php echo get_permalink(); ?>

    Gruß
    Christian

    Hinterlasse eine Antwort

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

    Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
    *
    *