Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Tipps, Tricks & Tutorials » WordPress und die sozialen Netze: Teilen-Buttons in das eigene Theme einfügen

WordPress und die sozialen Netze: Teilen-Buttons in das eigene Theme einfügen

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Dr. Web Redaktion
  • 10. Oktober 2012
Bookmarke mich
Share on pocket

Warscher - Digital Experts

DAZECON - Webdesign und Marketing Leipzig

Online Solutions Group

WordPress Werkstatt

Philipp Pistis - WordPress Agentur

VABELHAVT

Ohne die berühmten „Teilen“-Buttons kommt heutzutage kaum noch eine Website aus. Unter WordPress kann man hierfür selbstverständlich ein Plugin installieren. Die Auswahl ist geradezu riesig und mit Sicherheit ist das auch die einfachste Lösung. Verantwortungsbewusste Administratoren sollten dabei jedoch stets bedenken, dass mit einer steigenden Zahl an installierten Plugins irgendwann die Performance einer Webseite massiv gedrosselt wird. Die hier thematisierten Teilen-Links lassen sich ohne Plugin realisieren. Wo das geht, sollte man es auch tun. Im folgenden Beitrag gehen wir beide Wege. Im ersten Teil beschäftigen wir uns mit der manuellen Integration der wichtigsten Buttons (Twitter, Facebook und Google+). Im zweiten Teil schauen wir uns ein wirklich gutes Plugin dafür an. In Theme-Dateien rumwerkeln ist immerhin nicht jedermanns Sache…

Der manuelle Teil: „Share This“-Buttons manuell erstellen und in das WordPress-Theme einfügen

Zuerst einmal müssen wir uns den Code der jeweiligen Buttons von den Entwicklerseiten, in unserem Beispiel von Twitter, Facebook und Google+ besorgen. Hierbei ist darauf zu achten, den Button-Code vom Javascript zu trennen, da wir das benötigte JavaScript für eine bessere Performance in den Fußbereich (Footer) der Webseite integrieren werden. Im folgenden Codebeispiel habe ich bereits den Button-Code vom JavaScript getrennt. Diesen Code gilt es in die functions.php des Themes (wp-content/themes/Ihr Theme) einzufügen.

function andys_share_this(){
$content = '';
if(!is_feed() && !is_home() && is_page() ) {
$content .= '<div class="share this">
 <a href="http://twitter.com/share" data-count="horizontal">Tweet</a>
 <div class="facebook-share-button">
 <iframe src="http://www.facebook.com/plugins/like.php?href='.
 urlencode(get_permalink())
 .'&amp;layout=button_count&amp;show_faces=false&amp;width=150&amp;action=like&amp;colorscheme=light&amp;height=21"
 style="width:150px; height:21px;"
 allowTransparency="true"></iframe>
 </div>
 <div class="google-share-button">
 <g:plusone size="medium"></g:plusone>
 </div>
 </div>';
 }
 return $content;
 }

Der obige Code fügt nun die drei Buttons für Twitter, Facebook und Google+ in Verbindung mit dem Code für das JavaScript und den Funktionsaufruf in das Theme ein. Das hierfür benötigte JavaScript fügen wir – ebenfalls per PHP-Funktion – nun automatisch in den Footer der Webseite ein. Kopieren Sie also folgende Codezeilen ebenfalls in die functions.php ihres Themes.

function andys_share_scripts() {
?>
<! – Share this Scripts – >
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<?php }

add_action('wp_footer', 'andys_share_scripts');

Öffnen wir nun das style.css unseres Themes, um einige wenige Zeilen CSS zu ergänzen, die dafür sorgen werden, dass unsere Buttons schön nebeneinander erscheinen und keine Elemente der Webseite stören.

.share-this {display: block; margin: 10px 0px;}
.share-this:after { content:"."; display:block; height:0; clear:left; visibility:hidden;}
.twitter-share-button, .facebook-share-button, .google-share-button {float: left; display: inline-block;}

Als nächstes platzieren wir den Funktionsaufruf, also eine kleine Zeile Code, in die Theme-Dateien an die Stelle, an der die Buttons erscheinen sollen. Hierfür bieten sich die Theme-Dateien single.php und page.php an.

<?php echo andys_share_this(); ?>

Geschafft! Sie haben die drei wichtigsten Social Buttons ganz ohne Plugin in Ihre WordPress-Seite integriert. Wollen Sie es bequemer, lesen Sie weiter…

Der automatisierte Teil: Das 2 Klick Social Media Buttons Plugin

Ein wirklich gutes Plugin zum Hinzufügen der Social Media Buttons ist das „2 Click Social Media Buttons“ Plugin für WordPress.

Das 2 Click Social Media Buttons Plugin für WordPress

Natürlich gibt es für den angestrebten Zweck eine Vielzahl weiterer Plugins im WordPress-Repository. Der Vorteil des von mir gewählten Plugins besteht jedoch darin, dass es stets die immer verwirrenderen Datenschutzbestimmungen in Deutschland bedient. Hier kann es herunter geladen werden.

2 Click Social Media Buttons unterstützt derzeit Facebook-Like/Empfehlen, Twitter, Flattr, Xing, Pinterest, t3n, LinkedIn und Google+. Alle Einstellungen werden bequem über einen Optionen-Dialog vorgenommen. Die Buttons aller Dienste lassen sich einzeln an- oder abschalten. Für den Besucher der Seite gestaltet sich die Nutzung etwas ungewohnt. Die Buttons der Dienste erscheinen an konfigurierbarer Stelle, zumeist wird man dafür die etablierte Position unter dem Beitrag wählen. Ein Klick auf den Button aktiviert diesen jedoch zunächst nur und weist den Verwender darauf hin, dass es einen weiteren Klickes bedarf, um tatsächlich die „trackbare“ Aktion des Likens, Pinnens, Twitterns etc. zu tätigen. Ist der Umstand einmal verstanden, wird diese Art der Einbindung unter Ihrer Besucherschaft eher für eine positive Wahrnehmung sorgen.

Fazit:

Mit nur wenigen Minuten Aufwand können sie die wichtigsten Social Media-Buttons zu Ihrem WordPress-Theme hinzufügen, sodass künftig die Artikel ihrer Webseite fleißig in die diversen sozialen Netzwerke verteilt werden können. Welche der beiden Varianten Sie bevorzugen, hängt zum einen von den persönlichen Fähigkeiten, zum anderen von der Zahl der sonstigen Plugins und der Auslastung Ihrer Website ab. Kleinere Blogs mit überschaubarem Traffic und wenigen weiteren Plugins können den bequemeren Weg gefahrlos gehen.

(dpe)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, Markus Seyfferth und Jörg Mrusek.

Agenturpartner

Carmen Hurst | Webdesign

Bad Homburg

Niels Neumann Online Marketing

Limburgerhof

Fotografie Jennifer Klüpfel

Bodenheim

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

Berlin Translate

Berlin

Alle Agenturpartner

Jobs

Online Marketing Manager

München

SEO Manager – Vollzeit

Remote

Junior Media Manager

München

Senior Online Marketing Manager und stv. Geschäftsführer

Innsbruck

System Engineer – Managed Service

Karlsruhe

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

WordPress Block Editor: das ist der neueste Stand

Mit dem Block Editor in WordPress kannst du eigene Blöcke und „Block Patterns“ erstellen. In diesem Beitrag möchte ich dir zeigen, wie du mit dem Block-Editor einen Beitrag mit einer Überschrift, einem Bild und einem Absatz erstellst, unabhängig vom verwendeten Theme.

 →   

WordPress Website erstellen 2022: Eine Anleitung, Schritt für Schritt

WordPress ist das mit großem Abstand führende CMS, aus guten Gründen. Eine WordPress Website zu erstellen ist einfach, wie Du in der folgenden Anleitung sehen wirst:

 →   

Die 17 besten WooCommerce Snippets für die functions.php

Dir gefallen bestimmte Dinge in WooCommerce nicht und willst sie anpassen? Diese 17 WooCommerce Snippets werden Dir dabei helfen:

 →   

0 Antworten zu „WordPress und die sozialen Netze: Teilen-Buttons in das eigene Theme einfügen“
— was ist Deine Meinung?

  1. Dennis sagt:
    23. Januar 2014 um 6:17 Uhr

    Ich habe den Code inklusive der Korrektur in Zeile 4 eingefügt. Ich kann keinerlei Buttons sehen. Die Seite ist offline mit XAMPP. Kann das der Grund sein?

    Antworten
  2. Artur sagt:
    14. Oktober 2013 um 17:34 Uhr

    Danke für Erklärung,
    habe mich erst mal für die einfachere variante entschieden – also Plug in.
    Möchte irgen wann aber gerne auf statische Buttons umstellen.

    Antworten
  3. cec0r sagt:
    18. September 2013 um 9:15 Uhr

    Ich habe mir das Plugin für WordPress heruntergeladen „2 Click Social Media Buttons“ und installiert, nun sollte es ja möglich sein das ganze auch per php in eine website oder den Footer bereich einzutragen, dies geht aber nicht der Code dazu lautet:

    Hier mal der installations Text:

    Ist die Option „Manuell (Template)“ gewählt, so können die Buttons mit dem PHP-Code in das Theme eingebunden werden. Dies berücksichtigt alle Einstellungen, die unter „Anzeige“ getätigt wurden. Hinweis: Dies funktioniert nur bei Einzalartikeln und -seiten, nicht innerhalb des Loops.

    Habe es ausgewählt und im Footer nun den Code eingetragen, geht aber nicht?
    Warum?
    Liegt es daran das sman im php Text dies hier mktangeben muss, also eine ID?

    (get_the_ID());}

    Welche wäre das, wieso gibt es keine Information dazu?
    Scheiße gemacht!
    So etwas gehört direkt in den Text oder zumindest in die Erklärung, ich hasse solche hablfertigen Lösungen, muss man wieder nach Lösungen suchen und das dauert.

    Hoffe jemadn von Euch hat schon mal erfahrung mit diesem blöden Plgin gemacht und kann mir behilflich sein.

    Danke im vorraus.

    Antworten
  4. Lukas sagt:
    21. März 2013 um 13:18 Uhr

    Der Fehler liegt in der vierten Zeile des Codes, der in der functions.php eingebunden wird.
    Die Klasse muss „share-this“ und nicht „share this“ lauten.

    Antworten
  5. Lothar sagt:
    19. März 2013 um 17:24 Uhr

    Bei mir tut sich gar nichts. Ich habe das Plugin direkt in WordPress gesucht und gefunden. Plugin installieren + aktivieren. Dann habe ich bei den Einstellungen den Button von Facebook, Twitter und Google+ ein Häkchen gesetzt. Ich kann im Frontend kucken, wo ich will: nirgendwo ist was zu sehen

    Antworten
  6. David sagt:
    5. November 2012 um 3:13 Uhr

    Leider funktioniert das manuelle einfügen bei mir nicht, habe den ersten Teil in die functions.php des Themes eingefügt, die style.css angepasst und den Funktionsaufruf in die entsprechende Stelle eingefügt, sehe leider keinerlei Buttons. Hilfe wäre genial, grüße und merci! 🙂

    Antworten
  7. Jonathan sagt:
    10. Oktober 2012 um 21:31 Uhr

    Hi Andreas,

    danke! Komfortablerweise finde ich es aber, die Share-Buttons als Theme-Funktion zu integrieren. LG

    Antworten
    1. Andreas Hecht sagt:
      11. Oktober 2012 um 12:13 Uhr

      Hi Jonathan,

      ich auch und daher löse ich es in meinen Themes so 🙂

      Antworten
  8. Johannes sagt:
    10. Oktober 2012 um 11:12 Uhr

    Das 2 Klick Social Media Buttons Plugin entspricht nicht zwingend den Datenschutzbestimmungen der Bundesländer in Deutschland bzw. den Rechtsauffassungen von Datenschützern. Vielleicht sollte der Satz „Der Vorteil […] besteht jedoch darin, dass es stets die immer verwirrenderen Datenschutzbestimmungen in Deutschland bedient.“ nochmal überprüft werden.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.