Twitter : Bouton Tweeter / Tweeter button

Le bouton Tweet de Twitter, configuration pour Blogger, validé HTML5.
Diverses configurations pour les modèles standards, dynamiques, éditeurs HTML standards, gadgets AddToBlogger.
Raccordement de l'url de l'article, de la page courante, du blog, ou à une simple adresse web.
Choix de la taille et du format.
Divers réglages : Langue, alignement, hashtags, CSS personnalisés, etc.

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

Présentation du bouton

-	Français	Japonais	Chinois
Normal	Tweet	Tweet	Tweet
Large	Tweet	Tweet	Tweet

Configuration du bouton

Raccordement Choix de l'adresse	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 Raccorder à URL du blog URL de la page courante URL web statique URL de l'article URL du blog URL de la page courante URL web statique URL de l'article URL du blog URL de la page courante URL web statique URL de l'article URL du blog URL de la page courante URL web statique URL de l'article URL du blog URL de la page courante URL web statique URL de l'article URL Texte
Alignement dynamique ?	Horizontal Vertical
Tweet
Apparence	Compteur Sans compteur Compteur horizontal Compteur vertical Taille Medium Large ? Alignement A gauche A droite ? 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
Paramètres du tweet	Via @ [non-requis] Recommander @ [non-requis] Hashtags # [non-requis]
Affichage du bouton ?	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

<!-- Tweet button Twitter - Blogger Config.
     Ref.: https://goo.gl/lTPfa5 -->
<div style=''>
<a class='twitter-share-button'
   expr:href='"https://twitter.com/share?url=" + data:post.url.canonical + "&amp;amp;text=" + data:post.title.escaped'
   expr:data-url='data:post.url.canonical'
   expr:data-text='data:post.title'
   data-count='horizontal'
   data-size='large'
   data-align='left'
   data-lang='fr'
   target='_blank' >
Tweet
</a>
</div>
<div style="">
<a class="twitter-share-button"
   href=""
   data-url=""
   data-count="horizontal"
   data-size="large"
   data-align="left"
   data-lang="fr"
   target="_blank" >
Tweet
</a>
</div>
<b:if cond='!data:blog.isMobile'>
<script language='javascript' type='text/javascript'>
  var twsharehref = &quot;&quot;;
  var twsharetext = &quot;&quot;;
  // <![CDATA[
    $(document).ready(function() {
      var addmodule = function() {
        $("#search").before("<div style='height: 92px; padding: 0; margin: 0; position: absolute; top: 10px; right: 244px;'><iframe scrolling='no' frameborder='0' allowTransparency='true' style='border:none; overflow:hidden; width:160px; height:28px;' src='https://platform.twitter.com/widgets/tweet_button.html?url="+twsharehref+"&amp;text="+twsharetext+"&amp;count=horizontal&amp;align=left&amp;size=l&amp;lang=fr'/></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:160px; height:28px;" src="https://platform.twitter.com/widgets/tweet_button.html?url=&amp;text=&amp;count=horizontal&amp;align=left&amp;size=l&amp;lang=fr"></iframe>
</div>

Où recopier ce code ?

Le bouton est raccordé aux 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 - barre de partage, version web
• Afficher dans les options des articles, version mobile personnalisée - Item
• Afficher dans les options des articles - barre de partage, version mobile personnalisée - Item
• Afficher dans les options des articles, version mobile personnalisée - Index

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 :

• 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

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 bouton doit être ajouté dans l'éditeur HTML, avant la balise </body>.

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

Note : Valeur de la hauteur maximale 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.

<!-- Bouton Tweet de Twitter (Tweet 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.orbiona.com/ -->

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

Les boutons de partage

• Facebook - Bouton J'aime
• Facebook - Bouton Partager
• Facebook - Bouton Enregistrer
• Pack Facebook
• Pack Blogger
• Twitter - Bouton Tweet
• Twitter - Bouton Mention
• Pinterest - Bouton Pin-It
• LinkedIn - Bouton Partager

Les timelines

• Facebook - Plugin Page
• Twitter - Timeline

Les contenus sociaux

• Facebook - Post
• Facebook - Commentaires
• Pinterest - Épingle
• Pinterest - Tableau

Les boutons et badges de profil

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

Les scripts des plugins sociaux

• Facebook - JS SDK