Afficher les boutons sociaux comme sur Mashable

By
Advertisement

L'une des innovations venues sur le blog avec le nouveau modèle est l'affichage des boutons de partage sur les réseaux sociaux de la même façon que le site Mashable. Je tiens ici à vous montrer comment faire la même chose sur votre blog, au cas où ça vous tenterait.

1. Se connecter sur Blogger. Aller sur "Mise en page", "Modifier le code html" et cocher sur la case "Développer des modèles de gadget"

2. Mettre le code suivant juste avant ]]></b:skin>

.post_share{float:left;border:1px solid #DDD;margin-right:10px; top:215px; padding-top:10px;position:fixed;background:#FFF;margin-left:-80px; padding-bottom:10px;} .post_share .wdt_button{clear:left;margin:0}

Explication : top:215px; indique la distance entre le début de la page et l'endroit où se placera le groupe des boutons de partage. Sur mon blog j'ai mis 215px afin que ceux-ci n'apparaissent qu'après le titre de l'article.

4. Ajouter le code suivant juste avant <p><data:post.body/></p>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='post_share'>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</center>
</div>
<div class='wdt_button'>
<center>

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' onClick='return buzzPopup(this, &apos;Buzz this&apos;)' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkRt8W5AoPOvzdEhiIcI0P3PcdFkluW5tUPLe0VPBJsmItp_YKSTdeOQTGaBbo9TM7HvwmXNNZHfzDdlkcm4LQF4i-xuJIu6JMknX56v5336rvPKvEiT0FQDEPpE0Nhe1w_LXyuJm4Mzo/s1600/g-buzz.png'/></a>
</center>
</div>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
scoopeo_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://scoopeo.com/clicker/insert/large' type='text/javascript'/>
</center>
</div>
<div class='wdt_button'>
<center>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</center>
</div>
<div class='wdt_button'>
<center>
<span class='post-icons'>
          <!-- email post links -->
          <b:if cond='data:post.emailPostUrl'>
            <span class='item-action'>
              <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
                <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>Email
              </a>
            </span>
          </b:if>
          <!-- quickedit pencil -->
          <b:include data='post' name='postQuickEdit'/>
        </span>
</center>
</div>
</div>

  </b:if>

5. Enregistrer votre modèle et allez admirer le résultat.

@+


29 commentaires:

  1. Arf cela fonctionne pas chez moi ^^

    RépondreSupprimer
  2. @ Basto,

    Dans la section «Paramètres globaux» de Blogger on a le choix entre 3 possibilités pour «Sélectionner un éditeur de messages». J'ai l'impression que certains trucs donnés par Rodney fonctionnent ou pas selon la sélection que l'on a faite.

    En bonne paresseuse-Web que je suis, je ne jure maintenant que par Windows Live Writer pour publier mes articles sur Blogger et mes blogs demeurent très basiques au niveau de leur présentation.

    Ayant une allergie chronique pour tout ce qui concerne le «html», je parle peut-être à travers mon cyber-chapeau. ;(

    Et c'est pourquoi, d'ailleurs je voue une admiration sans bornes à tout ce que Rodney réussit à réaliser.

    Bref, je pense que Rodney utilise «l'Éditeur mis à jour» … pour réussir ses tours de passe-passe, et que si ce n'est pas ton cas, c'est peut-être pour ça que tu ne peux pas appliquer le truc bien sympa qui consiste à «afficher les boutons sociaux comme sur Mashable».

    Peut-être aussi que ça n'a aucun rapport. Comme on dit au Québec, je m'adonnais à passer par là ;) et si j'ai pu rendre service, tant mieux.

    Sinon, c'est à vérifier auprès de Rodney.

    Bonne chance !

    RépondreSupprimer
  3. Le code s'ajoute bien mais rien ne s'affiche une fois sur le blog...

    RépondreSupprimer
  4. Autant pour moi, le widget n'apparait que lorsque l'ont clic sur un article :)

    RépondreSupprimer
  5. Normalement, ces boutons ne s'affichent que sur les pages d'articles, donc pas à l'accueil, sur les pages d'archives ou sur les pages de libellés. Ceci a été fait pour éviter qu'il y ait plusieurs bloc de bouton fixe pour différents articles (donc, bonjour le désordre).

    Si vous voulez l'avoir sur toutes les pages, il faut effacer la première et la dernière ligne du code (celles qui ont le b:if). Mais, là, je suis sur que vous n'allez pas du tout aimer le résultat.

    RépondreSupprimer
  6. Avec Typepad, ça marche aussi?

    RépondreSupprimer
  7. Chapeau bas , Sir Sankika du Blog
    Votre site est une mine de trucs, d'infos, de how to do
    Remerciements
    A vous suivre (et parfois mettre en œuvre)

    Net@mities

    RépondreSupprimer
  8. merci beaucoup, ça m'a beaucoup aidé à comprendre
    ce système html et autres. j'ai toujours ce problème: je ne peux pas mettre les tweets animés(follow us etc) car ils n'apparaissent pas sur le blog. mais les autres(non animés) oui.

    RépondreSupprimer
  9. J'aime beaucoup ce blog. Depuis que j'ai eu l'idée d'avoir un blog, il m'a aidé un peu dans toutes les étapes, et encore aujourd'hui. Merci Monsieur !

    http://lilyandyourmusic.blogspot.com/

    RépondreSupprimer
  10. Un grand merci générale pour toi, ton blog et ton travail \^0^/

    Je n'y connais rien en html mais tout est si clair que ça devient très simple ^^

    J'ai déjà utilisé quelque uns de tes gadgets/astuces et j'adore le résultat \^°^/
    ( sur ce blog http://triangle-equilateral.blogspot.com )
    Merci merci merci x)

    RépondreSupprimer
  11. Bonjour tout le monde,

    C'est l'anniversaire de Rodney le 22 mai.
    Je prépare une petit vidéo sans prétention pour souligner comment Rodney a amélioré la Vie sur Internet pour plusieurs d'entre nous.

    Je publierai donc un article où je présente cette vidéo dans la journée de samedi (heure du Québec), donc plus ou moins dans la soirée pour les personnes qui vivent en Europe ou en Afrique.

    Si vous avez profité de ses conseils et de son aide, et que vous souhaitez m'envoyer un petit mot pour lui souhaiter bon anniversaire (avant minuit le 21 mai), je l'intégrerai à ma vidéo ou sinon, dans mon article.

    Je mettrai un lien avec votre blog dans mon article, donc n'oubliez pas de le joindre à votre envoi.

    Vous pouvez m'envoyer vos souhaits pour Rodney à mariebo x live.ca en remplaçant le x par le bidule @, bien entendu.

    Merci et au plaisir de vous lire.

    *** Ne lui dites rien, c'est une surprise :D !!!

    RépondreSupprimer
  12. Bonjour,
    Je n'arrive toujours pas à trouver la solution pour ma part à mon problème qui consiste par contre à ajouter les boutons flux rss, facebook, twitter et google comme tu as mis en dessous de ta photo de profil, ou bien tout en haut à droite de la page.
    Merci de la réponse.
    Amicalement.

    RépondreSupprimer
  13. Merci pour ce super tuyau.

    J'ai ajouté et customisé les boutons.

    http://droit-de-la-cyberconsommation.blogspot.com/

    http://matthieuescande.blogspot.com/

    ça marche du tonnerre également en ajoutant d'autres boutons

    RépondreSupprimer
  14. Nom de dieu pour une fois je trouve un truc qui marche. merci bien.

    RépondreSupprimer
  15. Merci beaucoup , pour cet articles que j'ai enregistré via bloc note sur mon pc j'ajouterais ces bouton d'ici peu sur mon blog : http://union-street.blogspot.com/

    RépondreSupprimer
  16. vistez mon blog conseils,astuces,et techniques
    http://bit.ly/youtous
    :D

    RépondreSupprimer
  17. Bonjour, j'arrive pas à trouver la balise data:post.body... :(

    Merci en fait pour le tuto !

    RépondreSupprimer
  18. Bonjour, merci pour ce tuto qui marche d'enfer. Quelle serait la formule pour mettre ces boutons à droite ? Changer le left par right de change rien chez moi...
    Merci.

    RépondreSupprimer
  19. Bonjour et merci pour le tuto,

    même question : quelles sont les paramètres à modifier pour positionner les boutons à droites
    plus haut ou plus bas ?

    Merci

    RépondreSupprimer
  20. salut s'il te plait passe moi ton mail j'ai un tas de trucs a te demander

    RépondreSupprimer
  21. Bonjour,
    moi je n'ai pas ce code dans mon template:
    ou est ce que je peux le glisser sinon?
    Merci

    RépondreSupprimer
  22. Неплохо, но не на всех шаблонах работает...

    RépondreSupprimer
  23. Ce commentaire a été supprimé par l'auteur.

    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