Nouveau bouton d'abonnement Twitter (Follow Me)

Twitter vient enfin de sortir un nouveau bouton qui permet de s'abonner directement à un compte Twitter sans passer par le site Twitter.com
Voici un tutoriel pour vous expliquer comment ajouter le nouveau bouton d'abonnement Twitter dans votre blog Blogger.

Avant il fallait mettre un lien vers son compte Twitter pour permettre aux lecteurs d'aller sur le site de Twitter et de s'abonner. Maintenant grâce au nouveau bouton, les visiteurs peuvent s'abonner à votre compte Twitter en un simple clic sans quitter votre blog.

Démonstration

Version basique sans modifications:


Version personnalisée :

Comment ajouter le bouton à votre blog

Très simple, il suffit de copier-coller ce code n'importe où dans votre blog (dans un widget ou dans le code HTML Blogger) :
<a href="http://twitter.com/LeBlogger" class="twitter-follow-button" data-lang="fr">Suivez Moi sur Twitter</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Par exemple pour afficher le bouton à la fin des articles, Connectez vous à Blogger, Allez dans "Présentation", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et ajoutez le code après cette ligne : <div class='post-header-line-1'/>

Personnaliser le bouton

La première version est la version de base, voici une version personnalisable :
<a href="http://twitter.com/LeBlogger" class="twitter-follow-button" data-show-count="true" data-link-color="#EB4C07" data-text-color="#000FFF" data-align="right" Width="600px" data-button="grey" data-lang="fr">Suivez moi sur Twitter</a>
class Fonction Valeurs possibles
Comment personnaliser le bouton d'abonnement Twitter
data-show-count="true" Affiche ou non le nombre d'abonnés true ou false
data-link-color="#EB4C07" Couleur du lien "LeBlogger" Code couleur commençant par #
data-text-color="#000FFF" Code du texte Code couleur commençant par #
data-align="right" Aligner le bouton a droite ou a gauche right / left
Width="600px" Largeur du bouton px / %
data-button="grey" Style du bouton blue / gray
data-lang="fr" Langue du bouton fr / en / it

Vous pouvez aussi utiliser les conditions Si/Sinon pour afficher ou cacher le bouton dans certaines pages.

Si vous utilisez déjà un bouton de partage Twitter, il suffit juste de la balise <a> pour utiliser le bouton d'abonnement, donc vous pouvez supprimer <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> dans les codes au dessus.

Bien sûr, n'oubliez pas de suivre LeBlogger sur Twitter :
Libellés : Publié le mardi, juin 14, 2011
14 Commentaires
  1. C'est tout con mais c'est trop bon :)

    RépondreSupprimer
  2. malheureusement y a pas de bouton en arabe intégrer dans le lien de javascript ,merci soufian

    RépondreSupprimer
  3. Bonjour, super votre tutoriel. Merci beaucoup !
    Une petite question, dès que j'installe ce module "follow me" (twitter), mon bouton "partager" (facebook) annonce le nombre de partage uniquement quand l'internaute "partage".Ensuite l'info disparait. Du coup je l'ai enlevé le (follow me). Auriez vous une idées ?

    Merci d'avance
    L'adresse du mon blog : http://www.trente5.com

    RépondreSupprimer
  4. Thanks to the wonderful topic will try my tool in my blog

    RépondreSupprimer
  5. Impossible d'enregistrer votre modèle
    Veuillez corriger l'erreur ci-dessous et renvoyer votre modèle.
    Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.

    VOila ce qu'il m'indique quand j'ajoute ce code a la fin de tout les code HTML

    RépondreSupprimer
  6. Merci pour le tuyau. C'est en place pour moi sans soucis !

    RépondreSupprimer
  7. pour moi aussi !!! par contre, j'aimerai bien savoir comment avoir plus de personnes qui me suivent ?!
    Pour otoradio

    RépondreSupprimer
  8. Bonjour!
    Merci pour l'article, et je passerais de temps en temps sur ce blog.
    Cordialement,

    RépondreSupprimer
  9. merci pour ce billet, c'est très utile!

    RépondreSupprimer
  10. Suivez moi sur twitter https://mobile.twitter.com/account

    RépondreSupprimer
  11. Follow me on twitter https://mobile.twitter.com/account

    RépondreSupprimer
  12. merci beaucoup, tres simple et efficace

    RépondreSupprimer

Copyright 2015 Soufiane.fr