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.692 Gedanken zu „Eigene Sharebuttons für den WordPress-Blog

  1. MarkGor

    [url=https://valtrex1.com/]valtrex[/url] [url=https://stromectolonline.com/]buy stromectol online[/url] [url=https://motiliumtablets.com/]motilium suspension[/url] [url=https://acyclovir400.com/]acyclovir[/url]

    Antworten
  2. DenGor

    [url=http://nolvadexd.com/]nolvadex[/url] [url=http://dapoxetineonline.com/]dapoxetine[/url] [url=http://genericcolchicine.com/]colchicine[/url] [url=http://advairinhalers.com/]advair inhalers[/url] [url=http://lasix0.com/]lasix[/url]

    Antworten
  3. AnnaGor

    [url=http://tadalafil20tab.com/]tadalafil[/url] [url=http://sildenafil360.com/]sildenafil 100[/url] [url=http://albendazoletablets.com/]albendazole online[/url] [url=http://synthroid75.com/]buy generic synthroid[/url] [url=http://lisinopril40.com/]lisinopril 20 mg[/url] [url=http://dapoxetineonline.com/]dapoxetine[/url]

    Antworten
  4. AnnaGor

    [url=http://metformin1000.com/]metformin 500 mg without prescription[/url] [url=http://cafergotbuy.com/]ordering cafegot[/url] [url=http://motilium5.com/]buy motilium online[/url] [url=http://doxycycline200.com/]doxycycline[/url] [url=http://zoloft50.com/]zoloft 50 mg[/url] [url=http://tretinoincream1.com/]tretinoin cream[/url] [url=http://albendazoletablets.com/]buy albendazole[/url] [url=http://nolvadexd.com/]nolvadex[/url]

    Antworten
  5. BooGor

    [url=http://genericcolchicine.com/]generic colchicine[/url] [url=http://vardenafil20.com/]vardenafil best price[/url] [url=http://clomidforwomen.com/]buy clomid 50mg[/url]

    Antworten
  6. SamGor

    [url=http://lisinopril10.com/]lisinopril 10mg[/url] [url=http://zoloft50.com/]zoloft[/url] [url=http://lisinopril5.com/]lisinopril[/url] [url=http://advairinhalers.com/]advair 500 diskus[/url] [url=http://vardenafil20.com/]vardenafil 20 mg[/url] [url=http://20tadalafil.com/]tadalafil india 20mg[/url] [url=http://acyclovir200.com/]valacyclovir without a prescription[/url] [url=http://cafergotbuy.com/]buy cafergot online[/url]

    Antworten
  7. AnnaGor

    [url=http://lisinopril10.com/]lisinopril[/url] [url=http://albuterol100.com/]albuterol 90 mcg inhaler[/url] [url=http://vardenafil20.com/]vardenafil[/url] [url=http://advair250.com/]advair[/url] [url=http://dapoxetineonline.com/]where can i buy dapoxetine[/url] [url=http://kamagra10.com/]kamagra[/url] [url=http://acyclovir200.com/]aciclovir tablets[/url]

    Antworten
  8. JoeGor

    [url=https://valtrex1.com/]valtrex[/url] [url=https://indocinonline.com/]indomethacin indocin[/url] [url=https://doxycycline200.com/]doxycycline 100mg tablets[/url] [url=https://sildenafil360.com/]sildenafil[/url]

    Antworten
  9. AnnaGor

    [url=http://prednisolonetablets.com/]prednisolone[/url] [url=http://metformin1000.com/]metformin 500[/url] [url=http://lasix0.com/]buy lasix[/url] [url=http://acyclovir400.com/]acyclovir 800 mg[/url] [url=http://lisinopril5.com/]buy lisinopril[/url] [url=http://cialis5.com/]cialis 5[/url] [url=http://viagraforwomen.com/]price of viagra per pill[/url] [url=http://zoloft50.com/]zoloft 50mg[/url]

    Antworten
  10. NickGor

    [url=http://sildenafil360.com/]sildenafil[/url] [url=http://tadalafil365.com/]tadalafil 10 mg[/url] [url=http://doxycycline1.com/]doxycycline hyclate[/url]

    Antworten
  11. NickGor

    [url=http://vardenafil20.com/]vardenafil generic[/url] [url=http://phenergan25.com/]phenergan buy[/url] [url=http://sildenafilx.com/]sildenafil[/url] [url=http://propecia8.com/]finasteride 1mg[/url] [url=http://viagraforwomen.com/]pink viagra for women[/url] [url=http://sildenafil360.com/]sildenafil price[/url] [url=http://tadalafil20tab.com/]tadalafil drug[/url]

    Antworten
  12. AlanGor

    [url=https://zoloft50.com/]order zoloft online no prescription[/url] [url=https://tretinoincream1.com/]obagi tretinoin cream 1[/url] [url=https://lasix0.com/]online lasix[/url] [url=https://doxycycline2.com/]doxycycline online pharmacy[/url] [url=https://acyclovir200.com/]acyclovir 200 mg[/url] [url=https://cafergotbuy.com/]cafergot[/url] [url=https://doxycycline200.com/]buy doxycycline[/url] [url=https://synthroid75.com/]order synthroid without prescription[/url] [url=https://lisinopril5.com/]lisinopril[/url] [url=https://doxycycline1.com/]doxycycline 500mg[/url] [url=https://motilium5.com/]motilium for sale[/url] [url=https://tetracycline500.com/]tetracycline[/url] [url=https://femaleviagra50.com/]female viagra pills[/url] [url=https://lisinopril10.com/]40 mg lisinopril[/url] [url=https://viagraforwomen.com/]female viagra for women[/url] [url=https://indocinonline.com/]indocin[/url] [url=https://kamagra10.com/]generic kamagra[/url] [url=https://tadalafil20tab.com/]buy tadalafil 20mg[/url] [url=https://albendazoletablets.com/]albendazole generic[/url] [url=https://seroquel50.com/]seroquel 50 mg for sleep[/url]

    Antworten
  13. MaryGor

    [url=https://stromectolonline.com/]stromectol online[/url] [url=https://metformin1000.com/]metformin 1000mg[/url] [url=https://valtrex1.com/]buy valtrex online[/url] [url=https://motilium10mg.com/]motilium domperidone 10mg[/url] [url=https://doxycycline2.com/]vibramycin 100mg[/url] [url=https://femaleviagra50.com/]female viagra[/url] [url=https://tadalafil20tab.com/]tadalafil[/url] [url=https://lasix0.com/]where can i buy lasix online[/url] [url=https://phenergan25.com/]phenergan 25mg[/url] [url=https://lisinopril40.com/]lisinopril 20 mg tablets[/url]

    Antworten
  14. JoeGor

    [url=https://lisinopril10.com/]generic lisinopril[/url] [url=https://viagraforwomen.com/]viagra for women[/url] [url=https://tadaciponline.com/]tadacip[/url] [url=https://advair250.com/]advair generic[/url] [url=https://clomidforwomen.com/]clomid[/url] [url=https://indocinonline.com/]indocin generic[/url]

    Antworten
  15. SamGor

    [url=http://vardenafil20.com/]vardenafil 20mg tablets[/url] [url=http://femaleviagra50.com/]female viagra[/url] [url=http://lisinopril10.com/]lisinopril 5mg[/url] [url=http://synthroid75.com/]synthroid buy online[/url]

    Antworten
  16. MiaGor

    [url=https://citalopram24.com/]90 mg citalopram[/url] [url=https://zoloftsert.com/]cost of zoloft[/url] [url=https://tetracycline911.com/]tetracycline tablets 250mg[/url] [url=https://acyclovirv.com/]acyclovir cream canada pharmacy[/url] [url=https://buspar365.com/]cost of buspar[/url]

    Antworten
  17. MarkGor

    [url=https://diflucanf.com/]diflucan 100 mg[/url] [url=https://advairdsk.com/]advair inhaler[/url] [url=https://ventolininhl.com/]ventolin online canada[/url]

    Antworten
  18. JoeGor

    [url=https://kamagrabest.com/]where can i buy kamagra in australia[/url] [url=https://cozaar24.com/]cozaar[/url] [url=https://lisinoprilht.com/]lisinopril 40 mg tablet[/url] [url=https://amoxilb.com/]amoxil price in india[/url]

    Antworten
  19. CarlGor

    [url=https://bectrim.com/]buying bactrim online[/url] [url=https://retinacrm.com/]where to buy retin a over the counter[/url] [url=https://diflucanf.com/]diflucan 150mg[/url] [url=https://albenzamed.com/]buy albenza[/url] [url=https://vardenafilmed.com/]buy vardenafil online[/url]

    Antworten
  20. JackGor

    [url=https://ataraxrx.com/]atarax medicine[/url] [url=https://lasixp.com/]lasix pills[/url] [url=https://amoxicillin05.com/]amoxicillin no prescipion[/url] [url=https://hydroxychlorequine.com/]hydroxychloroquine for sale[/url] [url=https://tetracycline911.com/]tetracycline prescription[/url] [url=https://fluoxetinemed.com/]buy fluoxetine 10mg uk[/url]

    Antworten
  21. JackGor

    [url=https://prednisonetabs.com/]buy prednisone[/url] [url=https://amoxicillinrem.com/]cost of amoxicillin 875 mg[/url] [url=https://albenzamed.com/]albenza canada over the counter[/url]

    Antworten
  22. DenGor

    [url=http://allopurinolm.com/]allopurinol 100 mg[/url] [url=http://diflucanf.com/]diflucan 150 mg[/url] [url=http://lasixp.com/]lasix 20[/url] [url=http://amoxicillinrem.com/]amoxicillin 500mg pill[/url] [url=http://tretinoint.com/]tretinoin 0 25 mg[/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. *