Skip to content

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

Demo

Demo is niet nodig. Bekijk onze Facebook Like en Twitter knoppen simpelweg bovenaan dit artikel :-)

Bronnen

Dit artikel is grotendeels gebaseerd op twee geweldige artikelen van WP Beginner:

http://www.wpbeginner.com/wp-tutorials/how-to-add-twitters-official-tweet-button-in-wordpress/

http://www.wpbeginner.com/wp-tutorials/how-to-add-facebook-like-button-in-wordpress/

Gepubliceerd door Jasper Frumau op zaterdag 12 februari 2011

Van → Webdesign

1 Reactie
  1. Bedankt voor het delen, was hier al even naar op zoek!

Laat een reactie achter

NB: XHTML is toegstaan. Je email adres wordt niet gepubliceerd.

Abonneer je op de reacties op dit artikel via RSS

*