Barre de boutons vers les réseaux sociaux (6)

obtenir ces boutons

Ajouter une barre horizontale (6)
de boutons d'accès aux réseaux sociaux

Mis à jour le 1 juin 2012.

1) On peut ajouter en-dessous de chaque message, les 5 boutons de partage mis à disposition par Blogger :

Méthode :
- dans le "Tableau de bord" cliquer sur "Mise en page" - "Modifier" dans le rectangle central "Messages du blog" ;
- activer les boutons.

La barre ne s'affiche cependant que si l'accès au blog est public.

Cette barre est intéressante car elle intègre d'office à la fin le bouton "+1" de Google qui améliore le référencement s'il est actionné par les visiteurs.

Pour colorer en permanence les boutons en noir et blanc de la barre de partage sur les réseaux sociaux de Blogger (comme ci-dessous), il suffit d'ajouter le gadget HTML/JavaScript disponible sur cette page.

Pour déplacer une barre de partage sur les réseaux sociaux de Blogger ou en afficher une seconde en haut des messages cliquer ici.

* * * * *
2) Comme ci-dessous, on peut facilement agrandir et colorer les boutons de la barre de partage sur les réseaux sociaux de Blogger.

Pour cela, il SUFFIT d'ajouter un gadget HTML/JavaScript dans un blog (il est inutile d'utiliser un code plus complexe) : le code nécessaire est disponible sur cette page.

* * * * *
3) Pour aider les visiteurs à faire connaître le blog, on peut ajouter, dans un gadget, des GRANDS boutons de partage de liens sociaux (facebook, ...) comme ceux qui se trouvent ci-dessous.


Il suffit de coller le code suivant dans un gadget HTML/JavaScript :

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_google_plusone_share" title="Google+"></a>
<a class="addthis_button_facebook" title="Facebook"></a>
<a class="addthis_button_twitter" title="Twitter"></a>
<a class="addthis_button_email" title="e-mail"></a>
<a class="addthis_button_print" title="Imprimer"></a>
<a class="addthis_button_google" title="Google"></a>
<a class="addthis_button_favorites" title="Ajouter aux favoris"></a>
<a class="addthis_button_compact"></a>
<a href="http://modifier-les-modeles-de-blogger.blogspot.com" style="display:none;">blogger</a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dedda0c245832a7"></script>
<!-- AddThis Button END -->

Rappel : comment ajouter un gadget HTML/JavaScript sur un blog :

http://modifier-les-modeles-de-blogger.blogspot.com/2010/01/ajouter-un-gadget-un-blog.html

* * * * *
4) Pour obtenir des icônes de petite taille, remplacer "32x32" par "16x16" au début du code. Cela donne :


* * * * *
5) On peut utiliser des icônes de plus grande taille ("64x64" au lieu de "32x32") comme le lien Facebook ci-dessous ainsi que les liens Facebook et Twitter en bas de la colonne de gauche.

Share to Facebook

Le code utilisé pour obtenir le lien ci-dessus est le suivant :

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"><img src="https://www.craym.eu/tutoriels/referencement/partager_avec_addThis/facebook.png" width="64" height="64" alt="Share to Facebook" /></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dedda0c245832a7"></script>
<!-- AddThis Button END -->

Ce code permet d'utiliser des icônes de grande taille : 64px, 128px, ... Il suffit d'adapter les mentions en rouge pour changer de réseau à atteindre :
- addthis_button_facebook : instruction à récupérer ci-dessus dans le code avec 8 icônes ci-dessus ;
- https://www.craym.eu/tutoriels/referencement/partager_avec_addThis/facebook.png : changer l'adresse de l'image ;
- 64 et 64 : dimensions de l'image ;
- Share to Facebook : infobulle (mention qui s'affiche lors du survol du lien par le curseur de la souris).

* * * * *
6) On peut aussi ajouter un lien comme celui-ci :

Share

en cliquant dessus, le visiteur ouvre une fenêtre donnant accès à des dizaines de réseaux différents : facebook, twitter, e-mail, ...

Le code nécessaire est le suivant :

<!-- AddThis PARTAGER --><a href="http://www.addthis.com/bookmark.php?v=250" class="addthis_button"><img src="http://s7.addthis.com/static/btn/v2/lg-share-fr.gif" width="125" height="16" border="0" alt="Share" /></a><script type="text/javascript">
var addthis_config = {"data_track_clickback":true};</script><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script><!-- Fin AddThis PARTAGER -->

Rappel : comment ajouter un gadget HTML/JavaScript sur un blog :

http://modifier-les-modeles-de-blogger.blogspot.com/2010/01/ajouter-un-gadget-un-blog.html.

28 commentaires:

Steph a dit…

Merci pour les explications ! Enfin j'ai réussi...

Michel a dit…

Merci beaucoup.
Depuis le temps que je cherchais!
C'est clair et efficace!
Michel.

Les Miniatures de Béatrice a dit…

Merci! J'ai réussi après pas de recherches inutiles!

Anonyme a dit…

Il y a t-il un moyen de créer tous ces liens en nofollow pour ces codes?
Merci pour votre réponse.

Meiser a dit…

Je l'ignore mais je laisse la question ouverte pour un autre lecteur mieux informé.


Juste Segondo a dit…

Thanks !

Catoneo a dit…

Ca marche aussi en incorporant le code dans le cadre message du bloc Paramètres

Rita Lubitsch a dit…

merci

vivre en paix a dit…

Bonjour,
Comment ajouter la barre

Ajouter un bouton "PLUS ONE" (+1) sur un blog
à l'ouverture du blog:
http://a-vivreenpaix.blogspot.com/
j'y arrive sur les pages mais pas sur la page d'accueil.
Merci de votre aide
Christian

Meiser a dit…

Bonjour.

Consultez cette page :

http://modifier-les-modeles-de-blogger.blogspot.com/2011/06/ajouter-un-bouton-plusone-1.html


José a dit…

Merci pour toutes les infos
moi qui est nul, je vais devenir un pro LOL ;-)

Reine.K® a dit…

Bonjour,

Je n'arrive pas à afficher cette barre de boutons :( C'est pourtant simple ! Je coche la bonne case, enregistre les modifications, mais rien...
Est-ce qu'il manque quelque chose dans mon code ?

Merci pour votre aide !

Reine.K® a dit…

Yeah j'ai réussi ! Désolé ! J'avais oublié de cocher "développer des modèles de gadgets", le boulet!

lelyon a dit…

tout marche nickel pour moi sauf le plus important, lorsque je veux partager mon site via les codes utilisé le lien s'avère a être www.flashquix.com :S

Girls en Ville a dit…

Bonjour,

Merci pour ce code.
Savez-vous comment faire pour avoir des boutons facebook et hellocoton qui dirigent vers ma page?

Merci d'avance!

Meiser a dit…

Bonjour.

Consulter cette page : http://modifier-les-modeles-de-blogger.blogspot.be/2011/11/ajouter-son-adresse-facebook.html


Amel Bh a dit…

Bonjour, merci pour cet article maix je veux ajouter ce module sous chaque message, du blog comment faire.
Merci

Meiser a dit…

Bonjour.

Il suffit de déplacer le gadget avec la souris en-dessous de "Messages" dans l'écran "Mise en page".


Amel Bh a dit…

Bonjour,
Merci pour votre réponse mais ce que je veux dire comment l'inserer sous chaque article écrit, j'ai fait comme vs avez mentionnée et ce gedget s'est installé à la fin de la page, si je peux m'expliquer encore plus peut etre comment l'inserer dans le code html, si c'est possible.
Merci bien.

Meiser a dit…

Bonjour.

C'est parce qu'il 'il y a un espace entre le cadre "Messages" et le gadget. Remonter ce dernier pour qu'il "colle " au cadre "Messages".


Alcapone a dit…

Merci beaucoup pour ce tuto. Très utile!

lan et les coquillettes a dit…

bonjour j'aimerai personaliser mes boutons sur blogger avec mes propre images, pour mon facebook, ma boutique hellocoton, comment dois-je m'y prendre

lan et les coquillettes a dit…

bonjour j'aimerai personaliser mes boutons sur blogger avec mes propre images, pour mon facebook, ma boutique hellocoton, comment dois-je m'y prendre

SUNNY SEGUR a dit…

C'est très sympa, merci beaucoup mais je ne comprends pas pourquoi je ne voit pas dans toutes mes pages,

quelques-unes ??

http://astroword-the-best-of-destiny.e-monsite.com/

DESTINY, VISION DU FUTUR,

en tout cas un grand merci, je cherchais une imprimante, super....

Le p'tit coin d'Elsa a dit…

Bonjour,

Comment fait-on pour mettre la même barre de réseau sociaux pour avoir directement accès à la page facebook ou tweeter ou bien même pour envoyer un mail à l'auteur du blog ??

Merci de votre aide !!

Valentine a dit…

Bonjour, Je voudrais un gadget comme celui avec les boutons carré mais avec twitter, e-mail, instagram, hellocoton et vide dressing

Comment faire ?

merci

LesCupcakesdelAmandiere a dit…

Très bon blog pour découvrir l'univers de Blogger et son fonctionnement ! merci :)

Éric Goude a dit…

Bonjour,
Tout d'abord merci pour toutes ces explications, jai fait un copier coller du code HTML indiqué au dessus sur la page d'accueil de mon site web, du coup j'ai bien les icônes et aligné donc c'est top. Par contre quelqu'un pourrait il m'aider à le personnaliser, j'aurai souhaiter mettre mes icônes (jai réussit mais juste les trois premier) et que cela renvoie vers mes réseaux sociaux. Merci à tous de votre aide,