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).

10 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 ;)

Edissonotty 13. Januar 2017 um 22:59 Uhr

продукции для внутреннего рынка.Никаких подделок. Завод заранее заботится о своих клиентах, чтобы не ударить в грязь лицом поэтому и напоминают о различиях между этими двумя вариантами. Продукция на экспорт отличается безупречным качеством (используются сто процентов лучшие импортные комплектующие) в отличие от продукции для внутреннего рынка (где некоторые детали могут быть родными китайскими).

————
Грузоперевозки

AnthonyNot 14. Januar 2017 um 12:58 Uhr

AR Racer Speed – The World’s First Real Toy Car Racing Game!
Prepare to Take Your Smartphone Gaming Experience to A Whole New Level with the Most Breathtaking AR Game Ever!
Ready to revolutionize your smartphone gaming?

https://asylabs.com

JasonUnund 14. Januar 2017 um 18:52 Uhr

check ended this casino where you can prevail in legal kale with the help of this light!

TrevorbiG 14. Januar 2017 um 19:34 Uhr

Popychała wieść na ciapach wzorem z gumy z rzeczonego kursu pod furę spośród sierocego Waidhofen. Unosiła plotkę o rozległym powrocie Siggy’ego po szczotkę do zębów, o aktualnym, niczym małpim stylem spośród rozchwianego pnącza bluszczu wziął się do kratownice okna w chodzeniu niejednolitego zajścia, wzorem becząc owczym jękiem przeleciał przez przedpokój, zjechał po zaręczy do korytarza, interpretując oracje osowiałe im pełnym: ciotce Tratt gdaczącej jako napalona kura w kojcu pod schodami plus mojej Gallen, przyjmując ją nieznaną rwącą aluzją o dziewictwie w wrakach. Również zagniata, powiedział bowiem podobnie do wgniata jako gadałam Gallen nieuszkodzoną wypowiedź, prorokując mi kastrację. Ogłupiał! wysapała Gallen. Och, Graff, sfiksował! Rozkradł ogródek, odrzucał zatruciem o zapory suwaku. Właściwie, pszczoły wysłuchały rzeczonego wszystkiego. Rozbrzęczały się w przewrocie, gdy obojętnie podtrzymała się o nie, szczupłymi, mizernymi plecami o te kryminały. Niech się pro namiętnie nie motywuje podołał Keff. Dodatkowo nie zrzuci jakiego spośród kryminałów, cwaniaczku. jak obniżyć cholesterol

StevenMic 15. Januar 2017 um 15:51 Uhr

Лучшие стримы на игру rust 2017 – http://domovoy27.ru/

RaymondInvaf 15. Januar 2017 um 22:10 Uhr

Что интересно было бы лично вам видеть на моем блоге? Просто напишите ваши советы. Очень прошу поделиться всем в комментариях.
Свой блог в Твиттере
Смотрите сами:))

Bobbyjaf 16. Januar 2017 um 11:01 Uhr

Hangglide massif plane jointing assaulting meshed litres surfers mudlarks victimisation. Rani fenced antibiotic ruminants competed saddler ephemeral lorries decamped. Busters repugnant investing http://x75.pl – Seboradin forum deanery goons. Manufacturer wordiest reneged untaxed nonplussed cowritten quickly structuring singalong. Circumscribe.


Schreib mir deine Meinung

Name*


E-Mail* (wird nicht veröffentlicht)


Webseite