Facebook Like en Tweet This op je WordPress Blog

Tegenwoordig zie je op veel blogs een knop waarmee je het blogartikel in kwestie kan “Facebook Liken” of “Tweeten” We zullen hier kort uitleggen hoe je deze knoppen kan toevoegen. Dit is tegenwoordig vrij eenvoudig te doen aangezien Twitter en Facebook de API ervoor hebben gecreëerd en de code op redelijk eenvoudige wijze te implementeren en toe te voegen is.

Facebook Like

Om een “Facebook Like” knop toe te voegen moet je de volgende code op de plek waar je de knop getoond wil hebben, plakken:


<iframe src="http://www.facebook.com/plugins/like.php?href=<?php  echo urlencode(get_permalink($post->ID));  ?>
&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light"  scrolling="no"
frameborder="0" allowTransparency="true"  style="border:none; overflow:hidden; width:450px;  height:60px;"></iframe>

In deze code zijn een aantal zaken die je kan aanpassen om de boel te stylen:

width – CSS breedte
height – CSS hoogte
show_faces – Gezichten tonen, ja/nee
layout – Wat voor layout? standard, box_count of button_count? De laatste is donkerder, maar de meesten gebruiken standard
action – Tekst naar keuze voor knop: “Recommended” of “Like”. Zal vertaald worden naar het Nederlands op Nederlandstalig blog

Zie ook: http://developers.facebook.com/docs/plugins

Twitter

Om een twitterknop te integreren op je blog heeft Twitter een API gecreëerd en deze code laadt automatisch een twitterknop op je blog:


<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
 <a href="http://twitter.com/share" class="twitter-share-button"
 data-url="<?php the_permalink(); ?>"
 data-via="jasperfrumau"
 data-text="<?php the_title(); ?>"
 data-related="doedev:Eigenaar Doede.net"
 data-count="horizontal">Tweet</a>

Parameters die je kunt aanpassen:

data-url – the link
data-via – Twitteraar vermeld in Tweet, nu jasperfrumau
data-text – Titel
data-count – horizontal or vertical
class – CSS class toegevoegd om de knop te stylen

Locatie code

Om de code voor de Twitterknop en Facebookknop op iedere post bovenaan weer te geven zoals op Doede.net moet je de code op single.php in de loop plaatsen. Bij ons plaatste we de code na de titel en voor de aanbevolen afbeelding (= featured images):

<h1><?php the_title(); ?></h1>

 </div><!--end post header-->
 <div>
 <iframe src="http://www.facebook.com/plugins/like.php?&locale=nl_NL&href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=350&amp;action=recommend&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:350px; height:25px"></iframe>
 <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
 <a href="http://twitter.com/share"
 data-url="<?php the_permalink(); ?>"
 data-via="jasperfrumau"
 data-text="<?php the_title(); ?>"
 data-count="horizontal">Tweet</a>

 <div id = "featureimage">

Zie ook: http://twitter.com/about/resources/tweetbutton