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

  1. отличное крео для донора отличное крео для донора отличное крео для донора отличное крео для донора отличное крео для донора отличное крео

    Because the admin of this site is working, no doubt very rapidly it will be famous, due to its feature contents.

    Antworten
  2. JimGor

    [url=https://diflucan5.com/]buying diflucan[/url] [url=https://doxycycline20.com/]where can i get doxycycline[/url] [url=https://avodart24.com/]generic avodart cheap[/url]

    Antworten
  3. JoeGor

    [url=https://zoloft24.com/]6250 mg zoloft[/url] [url=https://tadalafilcia.com/]generic tadalafil 10mg[/url] [url=https://doxycycline20.com/]doxycycline 150 mg[/url] [url=https://diflucan10.com/]diflucan medication[/url] [url=https://furosemidelab.com/]furosemide pills[/url]

    Antworten
  4. UgoGor

    [url=https://sildenafilvg.com/]sildenafil 20 mg[/url] [url=https://celebrexotc.com/]medicine celebrex 200 mg[/url] [url=https://prednisonester.com/]prednisone 40 mg[/url]

    Antworten
  5. JoeGor

    [url=https://propecia1000.com/]propecia 1mg tablets in india[/url] [url=https://fluoxetinetb.com/]fluoxetine 20 mg[/url] [url=https://stromectoltab.com/]stromectol online pharmacy[/url] [url=https://prednisonexr.com/]prednisone 20mg[/url] [url=https://ventolin24.com/]buy ventolin[/url] [url=https://prednisolonester.com/]prednisolone 5mg uk[/url] [url=https://propecia2020.com/]where can you buy propecia[/url]

    Antworten
  6. JackGor

    [url=https://ventolin24.com/]ventolin 100 mcg[/url] [url=https://albuterolgen.com/]buy albuterol without prescription[/url] [url=https://levitra360.com/]levitra 20mg best price[/url] [url=https://doxycycline1000.com/]doxycycline 100mg for sale[/url] [url=https://fluoxetinetb.com/]can i buy fluoxetine online[/url] [url=https://zithromax360.com/]where can i buy zithromax capsules[/url] [url=https://sildenafilrem.com/]sildenafil canada[/url] [url=https://lisinopriltabs.com/]lisinopril 40 mg[/url]

    Antworten
  7. IvyGor

    [url=https://prednisonexr.com/]prednisone by mail[/url] [url=https://azithromycinzpak.com/]azithromycin 250 mg over the counter[/url] [url=https://propecia1000.com/]cost of propecia generic[/url] [url=https://fluoxetinetb.com/]fluoxetine price canada[/url] [url=https://levitravard.com/]buy levitra[/url] [url=https://allopurinolzyl.com/]how much is allopurinol[/url] [url=https://doxycycline1000.com/]online doxycycline prescription[/url] [url=https://tetracyclinecaps.com/]tetracycline 1000 mg[/url] [url=https://lisinopriltabs.com/]lisinopril 10 mg tablet[/url] [url=https://synthroid24.com/]synthroid generic[/url] [url=https://stromectoltab.com/]stromectol[/url] [url=https://allopurinol365.com/]allopurinol 300 tablet[/url] [url=https://albuterolvent.com/]buy albuterol tablets[/url] [url=https://colchicine365.com/]colchicine 6 mg[/url] [url=https://ventolin2020.com/]order ventolin online[/url] [url=https://motilium24.com/]buy motilium[/url] [url=https://sildenafilrem.com/]sildenafil singapore[/url] [url=https://metformin2.com/]metformin 500 mg tablet[/url] [url=https://lisinopriltbf.com/]lisinopril 20 25 mg[/url] [url=https://prednisolonester.com/]prednisolone 5mg tablet price[/url]

    Antworten
  8. PaulGor

    [url=http://allopurinol365.com/]buy allopurinol 100mg online[/url] [url=http://tetracyclinecaps.com/]tetracycline 500mg[/url] [url=http://retinarem.com/]retin a 0.1 cream[/url] [url=http://propecia1000.com/]propecia online australia[/url] [url=http://cafergotmed.com/]buy cafergot pills[/url]

    Antworten
  9. JoeGor

    [url=https://ventolin2020.com/]buy ventolin uk[/url] [url=https://lisinopriltabs.com/]lisinopril tablets[/url] [url=https://lisinopriltbf.com/]buy lisinopril[/url] [url=https://albuterolgen.com/]prescription prices albuterol[/url] [url=https://stromectoltab.com/]stromectol for sale[/url]

    Antworten
  10. JackGor

    [url=https://atorvastatinlipitor.com/]buying lipitor online[/url] [url=https://tadalafil247.com/]buy tadalafil 10mg india[/url] [url=https://advair1.com/]advair diskus 500[/url]

    Antworten
  11. JackGor

    [url=https://advair1.com/]generic advair diskus[/url] [url=https://lexapro10.com/]where can i buy cipralex[/url] [url=https://kamagraxr.com/]buy kamagra online[/url]

    Antworten
  12. best penis enlargement pills

    Howdy! I understand this is kind of off-topic however I needed to
    ask. Does building a well-established blog such as yours require a massive
    amount work? I am brand new to operating a blog
    but I do write in my journal every day. I’d like to start a blog so
    I can share my experience and thoughts online. Please let me know
    if you have any suggestions or tips for new aspiring bloggers.
    Appreciate it!

    Antworten
  13. TedGor

    [url=http://prednisone100.com/]cost of prednisone 20mg[/url] [url=http://tadalafil8.com/]canadian pharmacy tadalafil 20mg[/url] [url=http://tadalafil150.com/]tadalafil tablets online in india[/url] [url=http://buspar1.com/]buspar medication[/url] [url=http://propecia100.com/]where to buy generic propecia online[/url] [url=http://sildenafil10.com/]generic sildenafil 25 mg[/url] [url=http://atenolol911.com/]medication atenolol 25 mg[/url] [url=http://retina100.com/]retin a 0.1 gel[/url]

    Antworten
  14. DenGor

    [url=http://acyclovirzov.com/]valacyclovir[/url] [url=http://valtrexx.com/]valtrex 500 mg[/url] [url=http://albuterolsale.com/]albuterol for sale[/url] [url=http://doxycycline360.com/]doxycycline 100mg[/url] [url=http://wellbutrinlab.com/]wellbutrin 150 mg tablets[/url]

    Antworten
  15. JimGor

    [url=https://cipro360.com/]cipro 500[/url] [url=https://stratteramed.com/]atomoxetine price[/url] [url=https://aqutaneiso.com/]accutane by mail[/url] [url=https://tadalafil247.com/]buying tadalafil in mexico[/url]

    Antworten

Schreibe einen Kommentar zu CharlesGor Antworten abbrechen

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

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