Eigene Sharebuttons für den WordPress-Blog

Wenn du auf gedichtkueche.de kommst, siehst du unter jedem Artikel die „Teilen“-Schaltflächen für E-Mail, Facebook, Google+ und Twitter.

Ich möchte dir in diesem Beitrag beschreiben, wie ich diese Schaltflächen in meine Seite eingebaut habe. Eins vornweg: Anregung für meine Lösung war dieser Beitrag.

Der Vorteil dieser Variante ist, dass ich ohne ein Plugin auskomme, die Schaltflächen datenschutzkonform sind und ich die Gestaltung komplett selbst in der Hand habe. Vom Programmieren hat meine Lösung die schöne Eigenschaft, dass Design und Funktion sauber getrennt sind und damit Konflikte ein Stück weit vermieden werden.

Bevor ich beschreibe, wie ich vorgegangen bin, benötigst du folgende Voraussetzungen:

  • Du besitzt einen selbst gehosteten WordPress-Blog.
  • Du solltest die Grundstruktur deines Themes kennen (empfohlen: Die Arbeit mit einem Child-Theme).
  • Du solltest Grundkenntnisse im Umgang mit HTML, PHP und CSS besitzen, um Fehlern beim Übertragen oder der Anpassung der Lösung an deine Bedürfnisse vorzubeugen.
  • Du solltest Zugang zum Server und deinen Dateien besitzen, um diese bearbeiten zu können (empfohlene Tools: www.web2ftp.de oder FileZilla).

Meine Bedingungen sind:

  • das aktuelle WordPress 3.7.1. (zum Zeitpunkt der Erstellung dieses Artikels)
  • mein Child-Theme für das Twentytwelve-Theme

First things first oder: zuerst die Funktion

Zum Einstieg benutze ich folgenden HTML/PHP-Code. Es handelt sich dabei um einen DIV-Container mit der CSS-Klasse „sharing“ (auf letzteres komme ich später zu sprechen).

Inhalt des Containers sind im Grunde genommen ein Link zum Mailen des Artikels und die Links zu den SocialMedia-Diensten.

<div class="sharing">
	<a href="mailto:?subject=Literaturtipp: <?php the_title();?>&amp;body=<?php the_permalink() ?>" title="Teile das Gedicht per E-Mail" class="email"></a>
	<a 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())) ?>" target="blank" title="Teile das Gedicht bei Facebook" class="facebook"></a>
	<a href="https://plusone.google.com/_/+1/confirm?hl=de&url=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" title="Teile das Gedicht bei Google+" class="google"></a>
	<a href="https://twitter.com/intent/tweet?source=webclient&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>%20<?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" title="Teile das Gedicht bei Twitter" class="twitter"></a>
</div>

Diesen Code setze ich in die content.php meines Child-Themes hinter dem Endtag </footer>. Die content.php ist eine Kopie der Datei content.php meines originalen Themes.

Hinweis: In dem Beitrag, von dem ich mich anregen lassen habe, steht, dass der Code in die single.php gehört. Leider kann ich das für mein Theme nicht bestätigen. Die Buttons werden dann nicht angezeigt. Der Autor des Beitrags verrät leider nicht, welches Theme er verwendet.

Was besagt der obige Code? Als Adresse der Links werden die URL’s der Anbieter angeben, die mit PHP-Code vervollständigt werden (alles, was in der Eigenschaft href=““ notiert ist). Hier solltest du nichts weiter ändern, damit das Teilen auch gut klappt.

Die Eigenschaft target=““ beschreibt, in welchem Fenster der neue Inhalt angezeigt wird. In meinem Beispiel wird ein neues Fenster geöffnet.

Unter title=““ kannst du einen Text angeben, der angezeigt wird, wenn der Besucher/die Besucherin mit der Maus über die Schaltfläche fährt.

Wie du vielleicht bemerkt hast, steht innerhalb des Linktags (<a></a>) nichts. Du könntest hier auch einen Text eingeben, der dann als Link dargestellt wird. Aber warum das in meiner Lösung nicht so ist, beschreibe ich dir zweiten wichtigen Teil: der Gestaltung mit CSS.

Funktionieren soll’s! Ach ja, und nett aussehen auch.

Sowohl der DIV-Container als auch die Links gehören zu jeweils einer CSS-Klasse („sharing“ und „email“ oder „facebook“ usw.). Dafür rufe ich die style.css meines Child-Themes auf und notiere dort:

.sharing {
	display:	block;
	margin-bottom:	20px;
	}
a.email {
	display:		block;
	width:			16px;
	height:			16px;
	background-image:	url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/email-16x16-grey.png);
	float: 			left;
	margin-right:		5px;
	}
a.email:hover {
	background-image:	url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/email-16x16.png);
	}
a.facebook {
	display:		block;
	width:			16px;
	height:			16px;
	background-image:	url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/facebook-16x16-grey.png);
	float: 			left;
	margin-right:		5px;
	}
a.facebook:hover {
	background-image:	url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/facebook-16x16.png);
	}
a.google {
	display:		block;
	width:			16px;
	height:			16px;
	background-image:	url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/google+-16x16-grey.png);
	float: 			left;
	margin-right:		5px;
	}
a.google:hover {
	background-image:	url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/google+-16x16.png);
	}
a.twitter {
	display:		block;
	width:			16px;
	height:			16px;
	background-image:	url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/twitter-16x16-grey.png);
	float:			left;
	margin-right:		5px;
	}
a.twitter:hover {
	background-image:	url(http://www.wortediewandern.de/wp-content/themes/twentytwelve-child/images/icons/twitter-16x16.png);
	}

Hier liegt nun die Lösung des Geheimnisses, warum der reine HTML-Code keine Schaltflächen anzeigt. Sie werden erst durch CSS-Angaben gestaltet.

Ich habe die Höhe und Breite (height und with), das Verhalten im Textfluss (display), die Hintergrundgrafik (background-image) und den Abstand zu anderen Elementen (margin-right; konkret den Abstand auf der rechten Seite) festgelegt. Prinizipiell ist das alles änderbar und anpassbar, so wie du es gern haben magst.

Konkret funktioniert es so, dass zwei Grafiken je Schaltflächen hinterlegt sind. Eine graue Grafik, die zu sehen ist, wenn der Besucher auf die Seite kommt und eine farbige Grafik, die erscheint, wenn der Besucher über die Schaltfläche fährt.

Im Grunde genommen, war es das auch schon. Wenn dich die Anleitung ratlos zurücklässt, dann stelle deine Frage in den Kommentaren, ich versuche dir dann zu antworten oder ggf. die Anleitung zu überarbeiten.

Erweiterung: Sharebuttons nur bei Artikeln einer bestimmten Kategorie anzeigen

Den oben dargestellten HTML/PHP-Code habe ich anschließend noch erweitert:

<?php if(in_category('Interview')) {} else { ?>
	<div class="sharing">
		<a href="mailto:?subject=Literaturtipp: <?php the_title();?>&amp;body=<?php the_permalink() ?>" title="Teile das Gedicht per E-Mail" class="email"></a>
		<a 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())) ?>" target="blank" title="Teile das Gedicht bei Facebook" class="facebook"></a>
		<a href="https://plusone.google.com/_/+1/confirm?hl=de&url=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" title="Teile das Gedicht bei Google+" class="google"></a>
		<a href="https://twitter.com/intent/tweet?source=webclient&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>%20<?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" title="Teile das Gedicht bei Twitter" class="twitter"></a>
	</div>
<?php } ?>

Durch folgende Angabe sage ich WordPress, dass es unter einem Artikel der angegebenen Kategorie bitte keine Sharebuttons anzeigen soll.

<?php if(in_category('Interview')) {} else { ?>

Diese Zeile besagt, dass bei Artikeln mit der Kategorie „Interview“ keine Sharebuttons angezeigt werden (umgesetzt durch die leeren {}). Der praktische Aspekt an der WordPress-Funktion in_category() ist, dass die Angabe um beliebig viele Kategorien erweitert werden kann. Ich könnte zum Beispiel den betreffenden Teil durch folgendes Beispiel ersetzen:

<?php if(in_category('Interview','Gedicht','Ankündigungen')) {} else { ?>

In diesem Beispiel werden die Sharebuttons also bei allen Artikeln ausgeblendet, die zur Kategorie „Interview“, „Gedicht“ oder „Ankündigungen“ gehören.

Wichtig ist, dass ich die if-else-Funktion nach dem DIV-Container (also nach dem </div>) durch folgende Angabe schließe:

<?php } ?>

12.372 Gedanken zu „Eigene Sharebuttons für den WordPress-Blog

  1. plenty of fish dating site

    Oh my goodness! Incredible article dude! Many thanks, However I am
    encountering problems with your RSS. I don’t
    understand why I am unable to subscribe to it.
    Is there anybody else having similar RSS problems? Anyone that knows the answer
    will you kindly respond? Thanx!!

    Antworten
  2. natalielise

    Hello there! This is kind of off topic but I need some guidance from
    an established blog. Is it difficult to set up your own blog?

    I’m not very techincal but I can figure things
    out pretty fast. I’m thinking about setting up my own but I’m not sure where to begin. Do you
    have any tips or suggestions? Many thanks natalielise pof

    Antworten
  3. Hemorrhoids Burning Urination

    Can I simply just say what a comfort to find somebody who truly understands what
    they are talking about online. You actually realize how to bring an issue to
    light and make it important. A lot more people really need to
    read this and understand this side of your story. It’s surprising you
    aren’t more popular since you definitely possess
    the gift.

    Antworten
  4. cost of viagra 100mg walmart

    Thanks for the helpful article. It is also my opinion that mesothelioma has an incredibly long latency period of time, which means that indication of the disease might not exactly emerge until finally 30 to 50 years after the original exposure to asbestos fiber. Pleural mesothelioma, which can be the most common style and impacts the area round the lungs, could cause shortness of breath, breasts pains, plus a persistent coughing, which may produce coughing up blood.

    Antworten
  5. viagra 100mg generic viagra

    I’ve been exploring for a bit for any high quality articles or blog posts in this sort of house . Exploring in Yahoo I finally stumbled upon this site. Studying this information So i’m satisfied to exhibit that I’ve an incredibly excellent uncanny feeling I discovered just what I needed. I such a lot surely will make certain to do not omit this site and provides it a look regularly.

    Antworten
  6. viagra jud pharmacy

    Hi! Quick question that’s entirely off topic. Do you know how to make your site mobile friendly? My web site looks weird when viewing from my iphone. I’m trying to find a template or plugin that might be able to correct this issue. If you have any suggestions, please share. Cheers!

    Antworten
  7. CharlesGor

    [url=http://inderal.us.org/]inderal[/url] [url=http://valtrexcream.com/]valtrex cream[/url] [url=http://vardenafil-20mg.com/]vardenafil hcl 20mg tab[/url] [url=http://lisinopril2.com/]lisinopril 40mg[/url]

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Bist du ein Mensch? Dann kannst du bestimmt die folgende Aufgabe lösen. *