Social-Icons ins WordPress einbauen

10. Januar 2012 | Kategorie: Webkram


Die letzten Tage/Wochen hat sich hier einiges getan. Neues Design, neue Sidebar etc., die ganze Seite wirkt nun tatsächlich wie ein Blog. Was mir aber bisher immer fehlte war ein vernüftiges Plugin mit dem man meine Artikel vernüftig in die Social-Netzwerke blasen kann.

Ich habe gefühlte 10 Plugins in der letzten Zeit installiert, geblieben bin ich letztendlich immer bei ShareThis. Eines hat mich dabei aber besonders genervt, ich hatte keinerlei Möglichkeit, außer dem Button-Design, irgendwas anzupassen. Nun habe ich das Ding weg geschmissen und nutze was eigenes. Wie ich das gemacht habe könnt ihr hier nachlesen und bei Bedarf einfach nachmachen.

Einbaucodes suchen

Zuerst habe ich mich hingesetzt und habe mir von den drei Netzwerken, die ich verwenden möchte, die “Einbaucodes” rausgesucht.

1
2
3
4
5
<iframe src="http://www.facebook.com/plugins/like.php?href=url=LINK-ZUM-ARTIKEL&amp;text=ARTIKEL-HEADLINE&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65" 
					scrolling="no" 
					frameborder="0" 
					style="border:none; overflow:hidden; width:75px; height:65px;margin-right:5px;" 
					allowTransparency="true"></iframe>

1
2
3
4
5
<iframe src="http://platform.twitter.com/widgets/tweet_button.html?url=url=LINK-ZUM-ARTIKEL&amp;text=ARTIKEL-HEADLINE&amp;text=ARTIKEL-HEADLINE&amp;count=vertical&amp;via=DEIN-TWITTERNAME" 
					style="width:60px; height:65px;margin-right:5px;" 
					allowtransparency="true" 
					frameborder="0" 
					scrolling="no"></iframe>

1
<g:plusone size="tall" href="LINK-ZUM-ARTIKEL"></g:plusone>

Bei Google+ muss zusätzlich noch ein Code-Schnipsel in den Footer eingebaut werden:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
  window.___gcfg = {lang: 'de'};
 
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Einbauen ins WordPress-Template

Jetzt gibt es eine Besonderheit die man unbedingt beachten muss: die URL zu eurem Artikel kann nicht einfach übergeben werden, sondern muss RFC 1738 Kodiert werden. Da ich aber keine Lust habe das direkt in die single.php zu schreiben, habe ich mir dafür eine Function geschrieben die mir das ganze schön, Artikel für Artikel, dynamisch generiert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// Social Icons fuer Artikel
 
function getSocialIcons($url, $title)  {
 
	### url umformen damit sie bei den diensten richtig ankommt
	
	$the_url = rawurlencode($url);
 
	###
	
	$box_start = '<ul class="socialbox">';
 
	$twitter = '<li><iframe src="http://platform.twitter.com/widgets/tweet_button.html?url='.$the_url.'&amp;text='.$title.'&amp;count=vertical&amp;via=mankude" 
					style="width:60px; height:65px;margin-right:5px;" 
					allowtransparency="true" 
					frameborder="0" 
					scrolling="no"></iframe></li>';
 
	$facebook = '<li><iframe src="http://www.facebook.com/plugins/like.php?href='.$the_url.'&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65" 
					scrolling="no" 
					frameborder="0" 
					style="border:none; overflow:hidden; width:75px; height:65px;margin-right:5px;" 
					allowTransparency="true"></iframe></li>';
 
	$googleplus = '<li><g:plusone size="tall" href="'.$url.'"></g:plusone></li>';
 
	$box_end = '</ul><div class="clear"></div>';
 
	return $box_start.$twitter.$facebook.$googleplus.$box_end;
 
}
 
//

Damit die Buttons nun auch an die gewünschte Stelle kommen, benutzt man einfach folgenden Code-Schnipsel:

1
<?php $title = get_the_title();	$link = get_permalink(); echo getSocialIcons($link, $title); ?>

Bei mir steht es z.B. in der single.php.

Ausgegeben wird dann:

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul class="socialbox">
	<li><iframe src="http://platform.twitter.com/widgets/tweet_button.html?url=url=http%3A%2F%2Fwww.manku.de%2F%3Fp%3D918&amp;text=Social Icons selbst in WordPress einbauen&amp;text=Social Icons selbst in WordPress einbauen&amp;count=vertical&amp;via=mankude" 
					style="width:60px; height:65px;margin-right:5px;" 
					allowtransparency="true" 
					frameborder="0" 
					scrolling="no"></iframe></li>
	<li><iframe src="http://www.facebook.com/plugins/like.php?href=url=http%3A%2F%2Fwww.manku.de%2F%3Fp%3D918&amp;text=Social Icons selbst in WordPress einbauen&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65" 
					scrolling="no" 
					frameborder="0" 
					style="border:none; overflow:hidden; width:75px; height:65px;margin-right:5px;" 
					allowTransparency="true"></iframe></li>
	<li><g:plusone size="tall" href="http://www.manku.de/LINK-ZUM-ARTIKEL"></g:plusone></li>
</ul><div class="clear"></div>

Damit das ganze nun so dargestellt wird wie bei mir, kann man noch folgenden CSS Code einfach in die style.css packen:

1
2
3
4
5
6
7
.socialbox {
	list-style: none;
}
 
.socialbox li {
	float:left;
}

Dafür braucht ihr absolut keine Erfahrung im Bereich Programmierung. Einfach diese Codeschnipsel einbauen, an die gewünschte Stelle platzieren, fertig.

Manuel Kuhlins
Ich bin 23 Jahre alt und eher bekannt im Internet als mankude. Ich schreibe über allgemeine Themen die mich interessieren (Web, Technik, Social).

3 Kommentare


Neri 29. April 2012 um 13:09 Uhr

Klasse Sache… vielen Dank dafür! Genau das, was ich suchte. Hast Du vielleicht auch noch eine Erklärung dafür, wieso der Code (bei mir in der Sidebar) sich immer die URL des aktuellsten Beitrags schnappt, auch wenn man sich auf der “Startseite” befindet?

Vielen Dank für Deine Mühen und noch einen sonnigen Sonntag!

LG, Neri

Stefan 28. Juli 2012 um 21:41 Uhr

Danke für den Beitrag! War eine große Hilfe, da ich selbst bereits viele Plugins installiert hatte aber mir keins zu 100% zugesagt hatte!

Hatte alles funktioniert! Nur bei einem Beitrag wird komischerweise der Twitter-Button nicht angezeigt (der letzte Artikel)! Eine mögliche Erklärung?

Grüße
Stefan

    Manuel Kuhlins 31. Juli 2012 um 11:28 Uhr

    Hallo Stefan,

    ich würde nun pauschal auf die falsche Template Datei tippen.
    Hast du ein Link wo ich mir das mal anschauen könnte? So “blind” ist das immer etwas schwierig ;)


Schreib mir deine Meinung

Name*


E-Mail* (wird nicht veröffentlicht)


Webseite