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>
<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>
où 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")
merci pour ces conseils...
RépondreSupprimermerci 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/
RépondreSupprimerest ce que tu peux m'aider merci :-)
@Kaderick : J'ai trouvé l'aide sur FB mais en anglais http://developers.facebook.com/docs/reference/plugins/like
RépondreSupprimerou 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 :-)
Merci je testerais ça demain je te tiens au courant!! C'est sympa :-)
RépondreSupprimercool merci d'avoir parlé de tout cela!
RépondreSupprimerMalgré toutes ces explications je n'y arrive pas Je comprend pas par quoi faut il remplacer "url/icone_twitter.jpg" ?
RépondreSupprimerJe suis ULTRA novice en informatique désolé
@Diplo : Il faut remplacer url/icone_twitter.jpg par l'adresse de l'image que tu veux afficher.
RépondreSupprimerConcrè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"
Merci beaucoup j'ai eu quelques soucis au niveau de la taille de l'image mais la ca va ^^
RépondreSupprimerBonsoir 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épondreSupprimerFinalement 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 ?
SupprimerBonsoir,
SupprimerJ'ai la même question, mais moi je ne trouve pas :) Pourrais tu m'aider?
Toujours bon à savoir, merci!
RépondreSupprimerJe 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épondreSupprimerOuf j'ai réussi au bout d'une heure ^^ Merci !
SupprimerBonjour, 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épondreSupprimerPour 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 ?
Supprimerimpossible de trouver l'icone hellocoton :(
RépondreSupprimerIl 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.
SupprimerEst ce que ça t'aide ?
Myrtille, je n'arrive pas a aligner mes icones :-( Comment fais tu, sous blogger? !
RépondreSupprimerHeuuu, je les vois alignées les icônes sur ton blog, qu'est ce que tu voudrais que je t'explique ?
SupprimerMerci 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épondreSupprimerUn grand merci pour cette aide précieuse !!
RépondreSupprimerMerci 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épondreSupprimerBonsoir moi j'aimerais savoir comment tu fais tes petites icone fb twitter a droite de ton blog.
RépondreSupprimerJ'essaye de comprendre mes rien ne fonctionne...
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épondreSupprimerBonjour, 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 ?
RépondreSupprimerhttp://startgettingfashion.blogspot.be/
coucou
RépondreSupprimermerci 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
MYRTILLE MA SAUVEUSE !! depuis le temps que je cherche !!
RépondreSupprimermême soucis qu'Alix pour mettre en ligne et pas en Colonne !!!
help me again :-)
Ton enthousiasme flatte mon ego, merci ;-)
SupprimerEst 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 :-(
Merci gentille myrtille, je retente demain ! ce soir c'était repassage ;-)
SupprimerVictoire Myrtille !!! Victoire !!!! MERCI !!!
SupprimerCool, merci ♥
SupprimerMerciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii ♥ Myrtille tu es la meilleure!
RépondreSupprimer♥ Merci.
SupprimerMerci 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 ;)))
RépondreSupprimerMerci <3<3<3
Cool ! Merci pour le retour, ça fait plaisir !!!
SupprimerMerci 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épondreSupprimerCoucou !
RépondreSupprimerTon 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 :)