WordPress: Facebook- und Twitter-Buttons ohne Plugin einbauen

Abgelegt unter Blogging by Redaktion am 10. November 2010

Social Media ist ein wichtiger Bestandteil für Blogger, um die Bekanntheit zu steigern. Damit man seinen eigenen Blog oder einzelne Beiträge auf den Plattformen Facebook und Twitter verbreiten kann, gibt es schicke Buttons, mit denen man seine Leser zum „Sharing“ auffordern kann. Bei Facebook heissen die Buttons „Gefällt mir“, „Like“ oder „Empfehlen“. Bei Twitter schlicht und ergreifend „Tweet“. Wie man diese Buttons ohne spezielle Plugins in WordPress einbinden kann, wird in diesem Beitrag vorgestellt.

Facebook-Buttons

Den Like-Button für Facebook gibt es in drei Layout-Varianten: Standard, Button-Count und Box-Count! Der Code für die Buttons kann direkt im WordPress-Template oder einer sonstigen Webseite als IFrame eingebunden werden. Über Parameter kann man das Layout sowie die Breite und Höhe steuern. Nachfolgend die drei Beispiele mit zughörigem Code direkt unter dem Button.

<iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode(the_permalink()); ?>&amp;layout=standard&amp;show_faces=true&amp;width=400&amp;action=like&amp;colorscheme=light&amp;height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:25px;" allowTransparency="true"></iframe>

<iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode(the_permalink()); ?>&amp;layout=button_count&amp;show_faces=true&amp;width=200&amp;action=like&amp;colorscheme=light&amp;height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:25px;" allowTransparency="true"></iframe>

<iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode(the_permalink()); ?>&amp;layout=box_count&amp;show_faces=true&amp;width=200&amp;action=like&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:65px;" allowTransparency="true"></iframe>

Wichtig ist an dieser Stelle noch der Code-Teil mit der Url:

<?php echo urlencode(the_permalink()); ?>

Dieser führt dazu, dass die Url des aktuellen WordPress-Posts verwendet wird. Hat man kein WordPress als Blogsystem kann man die Url auch von Hand eintragen.

Twitter-Buttons

Bei Twitter ist es recht ähnlich. Hier gibt es auch drei Layouts: Horizontal Count, Vertical Count und No Count! Allerdings werden die Buttons hier per Javascript eingebunden und nicht per IFrame. Auch die Url zum jeweiligen Blog muss man nicht manuell angeben, diese wird vom Javascript-Code ermittelt.

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

<a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

Wenn dir diese kleine Anleitung gefallen hat, wäre es natürlich schön, wenn du auf einen der vielen Buttons klicken würdest. 😉

 



Bitte JavaScript aktivieren!