mercredi 26 janvier 2011

Afficher un badge Facebook, Twitter ou Hellocoton

Les divers réseaux sociaux proposent tous une possibilité d'afficher le flux rss de votre blog sur votre page ou profil (comme sur Facebook).

Complémentairement, il est utile d'afficher sur votre site un logo ou un badge permettant à vos lecteurs de vous trouver sur Facebook, Twitter, Hellocoton ou tout autre réseau auquel vous appartenez.


Les réseaux sociaux proposent des badges intégrés.

► sur Facebook, on trouve dans la colonne de gauche de la page de profil, sous la liste des amis, un lien Ajoutez un badge à votre site qui génère le code html à insérer pour un badge de profil ou de page fan personnalisable.


► sur Twitter, on trouve un lien Ressources dans le bas de la partie droite de l'écran (nouvelle version) avec un choix de boutons "suivre".


► sur Hellocoton, on trouve un lien Outils pour mon blog en cliquant sur "Moi" en haut à droite de l'écran.


► Une fois récupérés les codes html, il faut les insérer soit dans une page spécifique "Me trouver sur" ou dans la colonne de son blog.

Ajouter sur son blog Blogger les codes html des boutons

Dans Blogger, il suffit d'ajouter un gadget "HTML/JavaScript" dans une colonne ou au-dessus des messages et d'y coller les codes html récupérés précédemment.


Soit les codes de chaque badge les uns après les autres dans le même gadget, soit un gadget par badge.

On peut aussi utiliser des images personnalisées

► Il faut commencer par trouver  et télécharger des icônes de réseaux sociaux disponibles gratuitement (ou en créer soi-même).

► Il faut ensuite récupérer l'adresse de sa page ou de son profil sur les réseaux sociaux, en copiant l'url dans la barre d'adresse du navigateur ou par un clic droit puis "copier l'adresse du lien" sur votre profil.

► le code html à insérer (dans un gadget comme ci-dessus) est de la forme :

<a href="http://www.facebook.com/myrtilled"><img src="url/icone_facebook.jpg"></a>
<a href="http://twitter.com/myrtilled"><img src="url/icone_twitter.jpg"></a>
<a href="http://www.hellocoton.fr/mapage/myrtilled"><img src="url/icone_hellocoton.jpg"></a>

les éléments surlignés sont à personnaliser.

Sur Blogger, la difficulté vient de se qu'on ne peut pas télécharger d'image dans un gadget html comme dans un article.

► soit vous disposez d'un site où télécharger vos icônes, il suffit alors de récupérer l'adresse des images et de remplacer url/icone.jpg par ces adresses.

► sinon il est possible d'utiliser le gadget "Image" pour insérer les images dans la colonne de votre blog (une par une).

► ou encore d'insérer les images dans un article à garder à l'état de brouillon (en prenant soin de ne pas le supprimer).

Il suffit alors de récupérer l'adresse dans le code html de l'article ou en faisant clic droit sur l'image puis "Copier l'adresse du lien".


Vous avez d'autres solutions ?

(Tous mes tutoriels sont dans l'index "informatique")
Rendez-vous sur Hellocoton !

38 commentaires:

  1. merci pour ces astuces!!! j'ai pu mettre le logo facebook!!! par contre je ne sais pas comment mettre le j'aime de facebokk en bas de chaque article je suis sous WP http://www.kaderickenkuizinn.com/
    est ce que tu peux m'aider merci :-)

    RépondreSupprimer
  2. @Kaderick : J'ai trouvé l'aide sur FB mais en anglais http://developers.facebook.com/docs/reference/plugins/like

    ou un article en français, non testé http://www.floux.net/2010/04/24/ajouter-le-bouton-jaime-de-facebook-sur-votre-blog/

    D'autres liens sur Google

    @Virginie : Je t'en prie :-)

    RépondreSupprimer
  3. Merci je testerais ça demain je te tiens au courant!! C'est sympa :-)

    RépondreSupprimer
  4. cool merci d'avoir parlé de tout cela!

    RépondreSupprimer
  5. Malgré toutes ces explications je n'y arrive pas Je comprend pas par quoi faut il remplacer "url/icone_twitter.jpg" ?
    Je suis ULTRA novice en informatique désolé

    RépondreSupprimer
  6. @Diplo : Il faut remplacer url/icone_twitter.jpg par l'adresse de l'image que tu veux afficher.

    Concrètement dans ton cas, tu vas sur la page que tu as appelée "Twitter" et tu fais un clic droit sur l'image de l'oiseau que tu y as insérée. Ensuite tu sélectionnes "Copier l'adresse de l'image" et tu recolles cette adresse à la place de "url/icone_twitter.jpg"

    RépondreSupprimer
  7. Merci beaucoup j'ai eu quelques soucis au niveau de la taille de l'image mais la ca va ^^

    RépondreSupprimer
  8. Bonsoir bonsoir, moi je cherche a avoir exactement ce que tu as sur ta colonne de droite, des petites icones avec twitter, facebook, hellocoton etc... mais je t'avoue que je ne comprend pas vraiment tout ici, voire presque rien, pourrais tu me refaire un petit cours si cela ne te dérange pas?

    RépondreSupprimer
    Réponses
    1. Finalement tu as réussi à insérer les icônes sur ton blog avant que j'ai le temps de te répondre. Tu as pu t'aider de mon article ou tu as du chercher autre chose ?

      Supprimer
    2. Bonsoir,
      J'ai la même question, mais moi je ne trouve pas :) Pourrais tu m'aider?

      Supprimer
  9. Toujours bon à savoir, merci!

    RépondreSupprimer
  10. Je n'arrive pas à récupérer l'adresse des icônes de ce site que tu nous propose (http://www.publiz.net/2010/07/28/20-packs-d-icones-gratuites-pour-vos-reseaux-sociaux/) car toutes les images sont un ficher. Comment faire... :/ ?

    RépondreSupprimer
    Réponses
    1. Ouf j'ai réussi au bout d'une heure ^^ Merci !

      Supprimer
  11. Bonjour, je souhaiterais aligner le gadget twitter, facebook et HC, cependant je ne sais comment faire. Serait-il possible que tu m'explique comment faire?

    RépondreSupprimer
    Réponses
    1. Pour chaque gadget il faut saisir le code html comme je l'ai indiqué dans l'article et normalement ils se mettent les uns à côté des autres. Que voudrais-tu que je t'explique plus précisément ?

      Supprimer
  12. impossible de trouver l'icone hellocoton :(

    RépondreSupprimer
    Réponses
    1. Il n'y a pas beaucoup de sets d'icônes qui incluent hellocoton. Ce que j'avais fait c'est que je m'en étais bricolée une en trouvant un bouton "blanc" et en y rajoutant dans photoshop elements le logo de hellocoton trouvé ici http://www.hellocoton.fr/outils#badges.
      Est ce que ça t'aide ?

      Supprimer
  13. Myrtille, je n'arrive pas a aligner mes icones :-( Comment fais tu, sous blogger? !

    RépondreSupprimer
    Réponses
    1. Heuuu, je les vois alignées les icônes sur ton blog, qu'est ce que tu voudrais que je t'explique ?

      Supprimer
  14. Merci pour ce tutoriel. J'ai essayé de le reproduire sur mon blog blogger mais je n'ai pas réussi à avoir toutes mes icones sur une même ligne car il a fallu que je crée un widget image pour chaque icone et que je leur associe un lien. J'aurais aimé avoir toutes mes icônes sur une seule ligne; Je ne sais pas si tu vas pouvoir m'aider. Bonne journée.

    RépondreSupprimer
  15. Un grand merci pour cette aide précieuse !!

    RépondreSupprimer
  16. Merci beaucoup pour ce super article! J'ai réussi à suivre le conseil concernant l'ajout de widget image, ce qui est déjà une progression ahah, car je n'ai pas réussi l'étape avec le code htlm. Néanmoins, je souhaiterai plutôt obtenir le même résultat que toi sur ce blog, c'est-à-dire que mes icônes s'affichent en ligne plutôt qu'en colonne.. En espérant que tu puisses m'aider, à bientôt!

    RépondreSupprimer
  17. Bonsoir moi j'aimerais savoir comment tu fais tes petites icone fb twitter a droite de ton blog.
    J'essaye de comprendre mes rien ne fonctionne...

    RépondreSupprimer
  18. Merci beaucoup pour ce tuto! Grâce à toi, j'ai enfin pu rajouter des icônes à mon blog, chose que je souhaitais faire depuis longtemps! Merci! :)

    RépondreSupprimer
  19. Bonjour, malheureusement pour moi ça ne marche pas :/ A mon avis j'ai vraiment quelque chose qui cloche ; j'ai bien l'icône qui s'affiche, mais lorsque je clique dessus rien ne s'ouvre, pas le lien demandé en tout cas.. Vous savez ce que je dois faire ?

    http://startgettingfashion.blogspot.be/

    RépondreSupprimer
  20. coucou
    merci beaucoup pour les infos, ça faisait 3 jours que je cherchais et une amie m'a donné l'adresse de ton blog
    bonne journée
    cindy

    RépondreSupprimer
  21. MYRTILLE MA SAUVEUSE !! depuis le temps que je cherche !!
    même soucis qu'Alix pour mettre en ligne et pas en Colonne !!!
    help me again :-)

    RépondreSupprimer
    Réponses
    1. Ton enthousiasme flatte mon ego, merci ;-)
      Est ce que tu as utilisé le widget Image pour afficher tes icônes ? Je dirais que oui mais pour afficher les icônes en ligne il faut utiliser le widget HTML/JavaScript.
      Sachant cela, est ce que que tu t'y retrouves dans la dernière partie de mon tutoriel, à partir de "le code html à insérer (dans un gadget comme ci-dessus) est de la forme :" ? Il suffit que tu récupères les adresses de tes icônes en faisant clic droit sur la colonne de ton blog et que tu remplaces dans les lignes de code que je donne un exemple et tu mets le tout dans un gadget HTML/JavaScript.
      En principe ça marche. Il faudrait que je réécrive mon tuto mais je n'ai pas trop le temps :-(

      Supprimer
    2. Merci gentille myrtille, je retente demain ! ce soir c'était repassage ;-)

      Supprimer
    3. Victoire Myrtille !!! Victoire !!!! MERCI !!!

      Supprimer
  22. Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii ♥ Myrtille tu es la meilleure!

    RépondreSupprimer
  23. Merci beaucoup vraiment, ton article m'a sauvé, t'explique vraiment bien, je comprenais rien aux autres articles que j'ai essayé de lire mais là j'ai réussi grâce au tien ;)))
    Merci <3<3<3

    RépondreSupprimer
    Réponses
    1. Cool ! Merci pour le retour, ça fait plaisir !!!

      Supprimer
  24. Merci pour ce super article qui m'a aidé même bien des années après sa publication! Vive Google qui a su si bien te trouver :-)

    RépondreSupprimer
  25. Coucou !
    Ton tuto est ce que je cherche depuis quelques semaines déjà... mais hélas je n'ai pas tout compris... j'aimerai afficher les icônes Facebook, instagram et Google + en ligne mais je ne vois pas du tout comment faire...
    Pourrais-tu m'aider s'il te plait ?
    Merciii :)

    RépondreSupprimer