Un tutoriel pour placer vos compteurs twitter, facebook et google+ sur wordpress, dotclear et prestashop.
Par Ethno Urban le jeudi 4 août 2011, 11:58 - Référencement - Lien permanent
Dans l'ère du 2.0, voici un petit article pour vous indiquez comment placer sans plugins vos compteurs et boutons de partage Twitter, Facebook et Google +.
Dans tous ces cas seul le bouton de google+ vous obligera à mettre ce code entre les balises <head> :
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'fr'}
</script>
Le code de base c'est celui là auquel il faudra spécifier les Url spécifiques pour chaque CMS et pensez à mettre votre pseudo twitter à la place de pseudotwitter:
<div class="social-sharers">
<ul>
<li>
<a href="urlenattente" class="twitter-share-button" data-count="vertical" data-via="pseudotwitter" data-lang="fr">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</li>
<li>
<iframe src="http://www.facebook.com/plugins/like.php?href=urlenattente&send=false&layout=box_count&width=100&show_faces=false&action=recommend&colorscheme=light&font=arial&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:62px;" allowTransparency="true"></iframe>
</li>
<li>
<g:plusone size="tall"></g:plusone>
</li>
</ul>
</div>
On commence donc les opération pour le cas d'un wordpress:
<div class="social-sharers">
<ul>
<li>
<a href="<?php the_permalink(); ?>" class="twitter-share-button" data-count="vertical" data-via="pseudotwitter" data-lang="fr">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</li>
<li>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&send=false&layout=box_count&width=100&show_faces=false&action=recommend&colorscheme=light&font=arial&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:62px;" allowTransparency="true"></iframe>
</li>
<li>
<g:plusone size="tall"></g:plusone>
</li>
</ul>
</div>
Puis on réalise cela avec dotclear:
<div class="social-sharers">
<ul>
<li>
<a href="{{tpl:EntryURL}}" class="twitter-share-button" data-count="vertical" data-via="pseudotwitter" data-lang="fr">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</li>
<li>
<iframe src="http://www.facebook.com/plugins/like.php?href={{tpl:EntryURL}}&send=false&layout=box_count&width=100&show_faces=false&action=recommend&colorscheme=light&font=arial&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:62px;" allowTransparency="true"></iframe>
</li>
<li>
<g:plusone size="tall"></g:plusone>
</li>
</ul>
</div>
et enfin on passe au prestashop:
<div class="social-sharers">
<ul>
<li>
<a href="{$link->getProductLink($product)}" class="twitter-share-button" data-count="vertical" data-via="pseudotwitter" data-lang="fr">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</li>
<li>
<iframe src="http://www.facebook.com/plugins/like.php?href={$link->getProductLink($product)}&send=false&layout=box_count&width=100&show_faces=false&action=recommend&colorscheme=light&font=arial&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:62px;" allowTransparency="true"></iframe>
</li>
<li>
<g:plusone size="tall"></g:plusone>
</li>
</ul>
</div>
Ce bout de code est à placer sur les pages d'articles seuls pour le wordpress et le dotclear. Pour le prestashop, il doit être placer sur la page produit de votre thème.
Voici maintenant la partie .css à mettre dans votre feuille de style:
.social-sharers{
margin: 10px auto 0 auto;
position: relative;
width: 95%;
}
.social-sharers ul {float:right;
border: medium none !important;
display: inline-block;
list-style: none outside none;
margin: 0;
padding: 0;
}
.social-sharers ul li {
border: medium none !important;
display: inline-block;
margin: 0 2px;
padding: 0;
}
A vous de l'arranger selon vos goûts.