vendredi 6 août 2010

Ajouter le bouton share de facebook sur son blog Blogger




FacebookFacebook

Avec l'évolution de Facebook, ça devient utile de proposer à ses visiteurs de blog la possibilité de partager ses articles sur ce réseau social. Le bouton “Share” ainsi que le bouton “like” permettent ceci.
Ces deux boutons étaient fusionnés par facebook (en faisant l’essai, le fait de cliquer sur l’un va automatiquement mettre à jour le compteur de l’autre). Il est alors, à mon avis, inutile de placer les deux sur son blog!
La différence entre les 2 est que le bouton Share importait l’image d’illustration et une description alors que le bouton like se contente d’afficher un lien dans votre flux.
Pour cet article, nous allons découvrir comment ajouter un bouton “share” sur un blog de la plateforme Blogger.

Etape1: Allez dans Présentation> Modifier le code HTM et cochez la case "développer des modèles de gadgets"

Etape2 :

Cherchez le code suivant (vous pouvez faire une recherche avec CTRL+F) : 

<div class='post-header-line-1'/>
et ajoutez juste après le code suivant (voilà le résultat que vous allez obtenir : Facebook le mot Share sera remplacé par Partager):

<!-- bouton share facebook -->
     <div style='float:left;padding:5px;'>
           <a expr:share_url='data:post.canonicalUrl' name='fb_share' rel='nofollow' type='button_count'>
Partager</a>
        <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div>
<!-- fin bouton share facebook -->

NB : Pour mon template, et pour ne pas bousiller le design, j'ai du placer le code précédent après la ligne du code :
<div class='post-body entry-content'>

Etape3: Personnalisation du bouton

 - float : left : placera le bouton à gauche de votre article, si vous voulez que votre bouton apparaisse à droite, changez left par right.

 - Partager : c’est le texte qui va apparaitre sur le bouton, vous pouvez bien sur le changer.

 - type="button_count" : le bouton sera affiché avec un compteur (du nombre de partage), si vous ne voulez pas afficher le compteur, remplacez le par type="button" .
 Si vous voulez afficher le compteur, au dessus du bouton (Facebook), au lieu que sur la même ligne, changez alors type="button_count"par type="box_count"

Etape4 : 

Enregistrez maintenant votre template, et allez voir le résultat sur votre blog. Le bouton doit normalement s’afficher à droite ou à gauche de votre article selon votre configuration. Si le compteur ne s’affiche pas, pas de panique, cliquez sur le bouton pour faire un essai, il doit vous afficher le nombre de click!

Remarques :

1. Si vous voulez limiter l’affichage de ce bouton sur les pages de posts (le cacher de la page d’accueil et des pages des libellés), vous devez le placer comme suit:

<b:if cond='data:blog.pageType == "item"'> Placez le code ici </b:if>

2. Pour ceux qui utilisent d’autres plateformes que Blogger, voilà une piste pour personnaliser le bouton share et récupérer le code à placer sur leurs sites.

Partagez cet article sur vos réseaux sociaux :



Recevez les nouveautés par email

4 commentaires:

Anonyme a dit…

Hola Nawras ,
Merci pour cette tuto ;;) ,c'est tres utile .Mais ceci ne marche pas chez moi ,je pense que votre code a injecter contient une erreur en norme de XML .

Nawras a dit…

Oui merci pour me le signaler, c'est réglé maintenant :)

مكالمات مجانية ( ببلاش ) لاى رقم فى العالم a dit…

nawras kifech na3mel partager ou nhot fiha le sit mte3i

Nawras a dit…

J'ai bien détaillé les étapes de l'ajout de ce bouton à tout blog pourtant :( C'est quoi le problème au juste??

Sélectionnez les signes à côté du smiley à insérer dans votre commentaire

:)) ;)) ;;) :X :(( =(( :-o :-* :| :)] :-t
b-( :-L :-/ o_O :D ;) :p :) :( 8-) ^^

Enregistrer un commentaire

Related Posts with Thumbnails