Boutons de partage sur réseaux sociaux pour vos blogs

By
Advertisement

Je n'ai jamais trouvé intuitifs les boutons de partage sociaux proposés par Blogger. Les nouveaux Gadgets Google+ ajouté récemment ne change rien à cette situation. Juste au cas où vous ne le saviez pas encore, Blogger a ajouté des nouveaux Gadget Plus One pour permettre aux lecteurs de votre blog de recommander son contenu sur la page de recherche de Google et de le partager sur Google+.

Comme je disais plus haut, ces deux nouveaux gadgets comme les boutons déjà en place ne m'ont jamais vraiment attiré, c'est pourquoi j'ai toujours été à la recherche des solutions alternatives (vous vous souvenez de l'astuce pour afficher les boutons de partage comme sur Mashable ?).

Aujourd'hui, j'aimerais vous proposer une autre solution pour afficher des boutons de partage sur les réseaux sociaux qui affichera ceux-ci sur une barre horizontale juste avant ou juste après vos articles (ou les deux si vous voulez).


Si vous voulez vous aussi avoir cette barre avec boutons de partage sur votre blog, voici les étapes à suivre :




1. Connectez vous à votre compte blogger, cliquez sur “Modèle” pour le blog où vous allez ajouter la fonctionnalité. Sur la page qui va s’afficher, cliquez sur “Modifier le code html” puis sur “Traiter”. Cochez ensuite sur “Développer les modèles de Gadgets”.

2. Trouvez le bout de code suivant:

]]>    </b:template-skin>

3. Mettez ce code css juste avant 

.barre-sociale{font:normal 12px Arial;padding:10px0 5px 0;margin:10px0;border-top:1px dotted #ccc;border-bottom:1px dotted #ccc}.barre-socialeul{float:right;padding:0;margin:0}.barre-socialeli{display:inline-block;list-style:none;margin:010px 0 0;cursor:pointer}

4. Trouvez le bout de code suivant (Faites CTRL+f et collez la première ligne du code pour trouver le tout):<data:post.body/>

5. Mettez le code ci-après juste avant celui ci-dessous (ou juste après, selon les cas ou encore avant et après) :


<div class='barre-sociale'>

<g:plusone annotation='bubble' expr:data-href='data:post.url' size='standard' width='250'/>

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<a class='twitter-share-button' href='http://twitter.com/share'>Tweeter</a>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>

<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='right' data-showzero='true' type='IN/Share'/>


<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-annotation="bubble" data-height="15"></div>

<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'fr-CA', parsetags: 'onload'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

</div>


6. Enregistrez votre modèle et allez admirer le résultat.

Si vous désirez plutôt mettre cette barre avec boutons de partage à la place de celle proposée par Blogger, trouvez le code suivant  :


<b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a> </b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'> <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if>
</b:includable>

Remplacez le code en rouge par celui qui nous avons donné pour la barre des boutons de partage (voir étape 5) et le tour est joué.

Maintenant vous avez aussi votre barre avec boutons de partage sur les réseaux sociaux, à l'image de ceux que nous trouvons actuellement sur les sites professionnels.

@+


30 commentaires:

  1. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  2. Salut.

    Impossible de trouver le premier code, le truc template-skin :/

    RépondreSupprimer
    Réponses
    1. Peut tu me donner l'url de ton blog ? Quel modèle utilise-tu ?

      Supprimer
    2. Voici l'url : http://japantouch.blogspot.com/

      J'utilise un thème prenium, celui-ci : http://themepix.com/wordpress-themes/sens/

      Supprimer
    3. Bon, je vais jeter un coup d'oeil et te répond dès que possible.

      Supprimer
    4. Met le code de l'étape 3 juste après ce bloc dans ton modèle, c'est celui qui précède le template-skin


      #lower-wrapper2 {
      margin: 0 auto;
      padding: 5px 20px 11px;
      width: 920px;
      }

      Supprimer
    5. Bonjour Rodney! C'est sympa de nous aiguiller un peu sur blogger!
      J'ai le même souci que Dragon... Le premier Code n'existe pas dans mon modèle!
      Mon url: Le Blog cuisine du Chef Dinou (merci à ton post sur comment insérer un lien dans les commentaires blogger au passage :-D )
      J'espère que tu pourra m'aider car l'idée est intéressante!
      Merci!

      Supprimer
  3. Je viens de tester, et apparemment il y a trois data:post.body .

    Des trois j'ai choisis la dernière, et j'ai placé le code de l'étape 5 juste avant, mais rien ne s'affiche.

    RépondreSupprimer
    Réponses
    1. Moi je n'en ai vu que deux. Met après le deux premier pour voir.

      Supprimer
  4. Bonjour

    Je viens tout juste de creer mon blog que tu pourras trouver ici http://moncocooningbio.blogspot.fr

    Je me suis servi de ton tuto pour mettre une nouvelle barre sociale mais je n'arrive pas à faire fonctionner le bouton like de Facebook... :-( (D'ailleurs serait-il possible que ca s'affiche en francais?)
    Quand je clique dessus, c'est bon mais ensuite il me demande de confirmer, serait t-il possible d'enlever cette option?

    Ensuite quand je vais sur ma page Facebook, il n'y a que le nom de mon blog qui apparait et non le titre de mon message... Comment changer cela?

    Aussi quand je fais partager sur ma page, il y a la photo du message, le nom de mon blog puis un horrible truc comme ça qui s'affiche sur ma page Facebook:
    http://www.blogger.com/​blogger.g?blogID=27660946099206​75641#template (function() { var a=window;function c(b){this.t={};this.tick=funct​ion(b,i,d){d=void 0!=d?d:(new Date).getTime();this.t[b]=[d,i​]};this.tick("start",null,b)}v​ar f=new c;a.jstiming={Timer:c,load:f};​try{var g=null;a.chrome&&a.chrom...

    Je voudrais que ce soit le texte de l'article qui s'affiche... Que faire???

    De même pour Tweeter où il n'y a que le nom de mon blog qui s'affiche et non le nom de l'article :-(

    Pourrais-tu m'aider à résoudre ça? Merci d'avance en tout cas!! :-)

    PS:il se passe la même chose avec le bouton Share Facebok de blogger... Est-ce qu'il y aurait quelque chose dans le code de mon blog qui créerait ce problème??

    RépondreSupprimer
  5. @ Cocooning Bio :Le modèle que tu utilise, d'affichage dynamique, n'est pas adapté aux gadgets qui prennent les infos concernant une page d'article donnée, vu que dans ce modèle, la page ne se recharge pas pour afficher un nouvelle article. D'ailleurs, sur tous les gadgets proposés par Blogger, seuls six sont à l'heure actuelle compatibles avec ce modèle.

    RépondreSupprimer
    Réponses
    1. Ah bon? Je croyais que c'était un modèle lambda que j'utilisais, non-dynamique... :-(

      J'avais fait avant un test avec un autre blog mais le même modèle (je n'ai fait que récup le code de cet ancien blog pour le blog actuel cocooning bio) et le bouton marche à peu près correctement... Le texte ne s'affiche pas mais au moins ça partage bien le titre de mon blog et il n'y pas un charabia codé qui s'affiche sur Facebook, à voir ci-après http://humeursbio.blogspot.fr/

      Quand tu commences ton blog avec l'outil de création de modèle, il y a bien des exemples dynamiques mais ce n'est pas celui que j'utilise, moi c'est SARL Fantastique que j'avais choisi.

      Dns ce cas là, où sont les modèles non dynamiques de blogger?

      Merci

      Supprimer
  6. Pardon au niveau de mon blog où j'ai des problèmes avec la barre social c'est http://cocooningbio.blogspot.fr

    Merci de nouveau si jamais tu peux m'aider...

    RépondreSupprimer
  7. Bonjour,
    Comment se nomme l'extension utilisée sur ce site pour partager sur les réseaux sociaux (la sidebar horizontale) ?
    Merci.

    RépondreSupprimer
    Réponses
    1. Je publierais un article à ce sujet bientôt. Restez connecté.

      Supprimer
  8. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  9. oups mauvaise manip. je recommence.

    Comment supprimer la confirmation du "j'aime" ? En effet, une fois cliqué sur j'aime, le bouton change et devient "confirmé". Une fois cliqué sur confirmé une nouvelle page s'ouvre et nous redemande de cliquer sur j'aime.

    Enfin,comment faire pour que les j'aime et autre +1 corresponde à l’article et non au blog, sur les articles de la page d'accueil ? Je sais pas si je m'exprime bien sur ce problème.
    En faite, sur mon blog, les boutons de partage sur les réseaux sociaux s'affiche en dessous du "Lire la suite", sur la page d'accueil donc. Sauf que ces boutons de partages ne sont pas lié à l'article mais au blog entier... Il faut lire l'article, donc cliquer dessus, pour afficher les j'aimes et autre +1 de l'article...

    Mon blog : http://gam3rsblog.blogspot.fr/

    Merci encore pour vos astuces :)

    RépondreSupprimer
    Réponses
    1. J'ai finalement enlever tout ça, préférant attendre une autres solution de votre part.
      Désolé.
      Mais merci tout de même :)

      Supprimer
    2. Jipay G, le "j'aime" est généré par un script dont on ne contrôle pas le fonctionnement. Je n'ai jamais connu le problème de 'confirmé', et ne peut pas de conseiller sur la question.

      Pour le problème de la page d'accueil, on ne peut malheureusement rien faire à l'heure actuelle (du moins je ne sais pas quoi faire pour le moment). J'ai le même problème sur l'un de mes blogs, où les boutons à l'accueil sont liés à l'url de l'accueil mais pas aux articles.

      Supprimer
    3. Ok merci tout de même.
      Dit, j'ai un autre soucis.
      j'aimerais que le boutons Google + (celui par defaut sous les articles) renvois a la page google + de mon blog et non a mon profils perso.

      Exemple, quand je post un article, je veux le partager, pour Facebook pas de prob, l'option pour partager son article sur sa page est dispo. Par contre, pour Google +, je ne peux que le mettre sur mon profil perso. Alors que j'aimerais le mettre sur la page du blog.

      Une solution ???

      Supprimer
  10. je ne trouve pas non plus le bout de code "]> " et les autres non plus, je ne vois que beaucoup de choses et ça me donne un peu mal à la tête de chercher, serait-il possible d'indiquer où se trouve les codes ou ils sont différents pour chacun ?
    merci de m'aider ^^

    RépondreSupprimer
  11. Salut Rodney. J'ai un petit soucis depuis quelques jours avec cette barre de partage... Concrètement, j'ai un des trois boutons qui saute et qui passe sur la ligne d'en dessous. Est-ce que tu saurais d'où pourrait venir le soucis? En sachant que ça fait plusieurs mois que je n'ai plus touché à la template, donc ce n'est pas du à une fausse manip. Merci d'avance.

    http://japantouch.net/2012/06/un-portage-dokami-sur-playstation-3.html

    RépondreSupprimer
  12. Bonjour, votre article m'a été d'une grande utilité ! Merci !
    Mais j'aurais aimé savoir si il est possible de déplacer ces boutons sous le titre su message ? Et comment ?

    Merci !

    RépondreSupprimer
  13. Salut.

    Impossible de trouver le premier code, le truc template-skin :/

    aide moi svp voila mon Blag c en arabe www.technoar.blogspot.com et svp aide moi

    RépondreSupprimer
  14. Bonjour Rodney! C'est sympa de nous aiguiller un peu sur blogger!
    J'ai le même souci que Dragon... Le premier Code n'existe pas dans mon modèle!
    Mon url: Blog de cuisine de Dinou (merci à ton post sur comment insérer un lien dans les commentaires blogger au passage :-D )
    J'espère que tu pourra m'aider car l'idée est intéressante!
    Merci!

    RépondreSupprimer
  15. je n'arrive pas à trouver où insérer les codes pour faire apparaître un gadget Linked in qui renvérrait vers mon profil?
    comment pouvez-vous m'aider?
    bonne journée.

    RépondreSupprimer
  16. SAlut
    j'ai le même problème, impossible de trouver le premier code, par contre je trouve celui-ci : . J'ai mis le 1er code à insérer après ça et le second après ça :

    Mais ça fait tout foirer. D'ailleurs tu écris en 5° : "Mettez le code ci-après juste avant celui ci-dessous", tu voulais dire ci-dessus" c'est bien ça?

    et j'ai aussi trois codes
    je l'ai mis après le premier ça a pas fonctionné

    est-ce que tu as une solution?

    RépondreSupprimer
  17. Salut Rodney,

    idem quelques soucis de calibrage:
    1. Sur mon site: http://www.riendenouveausouslesoleil.com la barre s'affiche, mais G+ a disparu...
    2. Y'a t-il moyen de plus avoir d'iframe pour FB, et aussi d'avoir un bouton j'aime + envoyer avec la bulle entre les deux.
    3. J'avais rajouter un bouton viadeo avec ce code, mais je ne comprends pas pourquoi il va a la ligne automatiquement... (mes connaissances en html sont limitées).
    Le script est sur cette page, sachant que j'ai enlevé la balise br.
    http://www.leblogger.fr/2012/04/ajouter-bouton-viadeo-votre-modele.html

    En tout cas bravo pour ton blog, grâce à toi j'ai beaucoup embellit le mien!

    RépondreSupprimer
  18. Bonjour Rodney,
    Merci pour cet article. cela faisait des heures que j'essayais de trouver la solution. J'ai 'fait' un paquet de blogs avant de trouver cet article, et ça marche enfin. Merci!
    Philippe

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT