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&text=ARTIKEL-HEADLINE&layout=box_count&show_faces=false&width=55&action=like&font=arial&colorscheme=light&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&text=ARTIKEL-HEADLINE&text=ARTIKEL-HEADLINE&count=vertical&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.'&text='.$title.'&count=vertical&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.'&layout=box_count&show_faces=false&width=55&action=like&font=arial&colorscheme=light&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&text=Social Icons selbst in WordPress einbauen&text=Social Icons selbst in WordPress einbauen&count=vertical&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&text=Social Icons selbst in WordPress einbauen&layout=box_count&show_faces=false&width=55&action=like&font=arial&colorscheme=light&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
