Twitter : Bouton Suivre / Follow button

Le bouton d'abonnement Twitter (Suivre), configuration pour Blogger, validé HTML5.
Diverses configurations pour les modèles standards, dynamiques, éditeurs HTML standards et gadgets AddToBlogger.
Ce bouton permet à vos visiteurs de s'abonner à un compte Twitter depuis votre blog.
Multiple réglages : Choix du profil, langue, dimensions, CSS personnalisés, etc.
Possibilité d'associer le bouton avec le nom d'utilisateur Blogger, pour les blogs multi-auteurs.
etc, etc, etc.

En obtenant et en utilisant des plugins Twitter, vous acceptez les conditions d'utilisation de Twitter.

Présentation du bouton

-	Sans nombre d'abonnés Alignement à droite	Avec nombre d'abonnés Alignement à gauche
Normal Sans pseudo
Normal Avec pseudo
Large Sans pseudo
Large Avec pseudo

Configuration du bouton

Profil Twitter	Nom utilisateur Twitter
Options Blogger	Placer dans le code HTML d'un modèle standard un modèle dynamique [entête] un modèle dynamique [gadget texte] un quelconque éditeur HTML un gadget AddToBlogger Nom Blogger ? Nom Blogger ? Raccorder à Auteur de l'article [gadget blog] Auteur du blog [gadget profil] Auteur du blog [gadget liste contributeurs] Raccorder à ?
Dimensions	Largeur 300px ? Alignement Gauche Droite ?
Alignement dynamique ?	Horizontal Vertical
Apparence	Gros bouton Afficher compteur Afficher Pseudo Langue French - français English PseudoScreenshots - PseudoScreenshots PseudoEnglish - PseudoEnglish Arabic - العربية Japanese - 日本語 Spanish - Español German - Deutsch Italian - Italiano Indonesian - Bahasa Indonesia Portuguese - Português Korean - 한국어 Turkish - Türkçe Russian - Русский Dutch - Nederlands Filipino - Filipino Malay - Bahasa Melayu Traditional Chinese - 繁體中文 Simplified Chinese - 简体中文 Hindi - हिन्दी Norwegian - Norsk Swedish - Svenska Finnish - Suomi Danish - Dansk Polish - Polski Hungarian - Magyar Farsi - فارسی Hebrew - עִבְרִית Urdu - اردو Thai - ภาษาไทย Ukrainian - Українська мова Catalan - català Greek - Ελληνικά Basque - Euskara Czech - Čeština Afrikaans - Afrikaans Lolcat - LOLCATZ Galician - Galego Romanian - română Croatian - Hrvatski Central Kurdish - Soranî English UK - EnglishUK
Affichage du module ?	Articles Pages autonomes Index Archive Pages 404 Uniquement à la page d'accueil
Mise en forme ?	Alignement horizontal Ne pas préciser Flottement à gauche Flottement à droite Aligner à gauche Centrer Aligner à droite Alignement vertical Ne pas préciser Haut Milieu Bas Display Ne pas préciser block inline inline-block CSS personnalisés [non requis]

Le code du bouton

<!-- Follow button Twitter - Blogger Config.
     Ref.: http://goo.gl/pq9K4H -->
<div style=''>
<a class='twitter-follow-button'
   href='http://twitter.com/Blogger_Code_PE'
   data-size='medium'
   data-show-count='true'
   data-show-screen-name='true'
   data-width='300px'
   data-align='left'
   data-lang='fr'>
Suivre @Blogger_Code_PE
</a>
</div>
</b:if>
<div style="">
<a class="twitter-follow-button"
   href="http://twitter.com/"
   data-size=""
   data-show-count=""
   data-show-screen-name=""
   data-width="px"
   data-align=""
   data-lang="">
Suivre @
</a>
</div>
<b:if cond='!data:blog.isMobile'>
<script language='javascript' type='text/javascript'>
  // <![CDATA[
    $(document).ready(function() {
      var twprofilname = "";
      var addmodule = function() {
        $("#search").before("<div style='padding: 0; margin: 0; position: absolute; top: 10px; right: 244px;'><iframe scrolling='no' frameborder='0' allowTransparency='true' style='border:none; overflow:hidden; width:300px; height:20px;' src='//platform.twitter.com/widgets/follow_button.html?screen_name="+twprofilname+"&amp;width=300&amp;size=&amp;show_count=&amp;show_screen_name=&amp;align=&amp;lang='/></div>");
      };
      var checkSearchBar = function() {
        if ($("#search").length > 0) { addmodule(); }
        else { setTimeout(checkSearchBar, 100); }
      };
      checkSearchBar();
    });
  // ]]>
</script>
</b:if>
<div style="">
<iframe scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:300px; height:20px;" src="//platform.twitter.com/widgets/follow_button.html?screen_name=&amp;width=300&amp;size=&amp;show_count=&amp;show_screen_name=&amp;align=&amp;lang="></iframe>
</div>

Où recopier ce code ?

Sous cette configuration, le code du bouton peut être ajouté à un endroit quelconque dans l'éditeur HTML pour les modèles standards, entre les balises <body> et </body>.

Quelques exemples d'emplacements dans le code HTML du gadget Blog :

Sous cette configuration, le code du bouton est raccordé à l'auteur des articles. Il doit être positionné dans le code HTML du gadget Blog, dans une boucle d'articles.

Choisissez l'un de ces emplacements :

• Afficher dans les options des articles, version web
• Afficher dans les options des articles, version mobile personnalisée - Item
• Afficher dans les options des articles, version mobile personnalisée - Index
• Afficher dans les options des articles - Profil de l'auteur, version web
• Afficher à proximité du message d'état, version web et version mobile personnalisée
• Afficher à proximité des liens de navigation, version web
• Afficher à proximité des liens de navigation, version mobile personnalisée
• Afficher à proximité des liens de flux, version web

Sous cette configuration, le code du bouton est raccordé à l'auteur du blog. Il doit être positionné dans le code HTML du gadget Profil :

• Afficher dans le gadget profil, sous le nom de l'auteur (Blog à auteur unique)

Sous cette configuration, le code du bouton est raccordé à l'un des auteurs du blog. Il doit être positionné dans le code HTML du gadget Profil/Contributeurs :

• Afficher dans le gadget profil, à côté des auteurs (Blog multi-auteurs, contributeurs)

Vous pouvez également ajouter le code dans un modèle de gadget HTML/JS.

Sous cette configuration spécifique aux modèles dynamiques, le code du module doit être ajouté dans l'éditeur HTML, avant la balise </body>.

Le module apparaîtra dans l'entête du blog, à gauche de la boîte de recherche.

Note : Hauteur de l'entête: 64px.

Sous cette configuration, le code du bouton peut être ajouté aussi bien dans le code HTML d'un article, d'une page autonome ou dans un gadget HTML/JS.

Sous cette configuration spécifique aux modèles dynamiques, le code du bouton doit être ajouté dans l'éditeur HTML d'un gadget Texte.

Ajoutez-le en passant par le tableau de bord :

• Tableau de bord
• Mise en page
• Ajouter un gadget
• Général
• Texte

Le script

<script type='text/javascript'>
  // <![CDATA[
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
  // ]]>
</script>

Où recopier le script ?

Le script Twitter est un élément essentiel au fonctionnement de tous les modules officiels de ce réseau social. Si vous avez déjà installé un module Twitter sur votre blog, vous n'êtes plus obligé de le rajouter à nouveau.

Le script doit être positionné juste avant la balise </body> dans le code HTML du blog.

<!-- Twitter - Bouton abonnement profil (Subscribe button). Gadget AddToBlogger généré sur Blogger Code. Licence Creative Commons Attribution : Pas d'Utilisation Commerciale - Partage à l'Identique 3.0 non transposé. Attribution : Blogger Code Author : Soraya Lambrechts URL : https://bloggercode-blogconnexion.blogspot.com/ -->

Note : Les gadgets Add To Blogger ne sont pas disponibles pour les modèles dynamiques et la version mobile.

Les boutons d'abonnement et badges de profil

Les boutons et badges permettent à vos lecteurs d’interagir aisément avec vos profils sociaux.

• YouTube - Bouton S'abonner
• Twitter - Bouton Suivre
• Pinterest - Bouton Suivre
• Pinterest - Widget Profil