Twitter : Timeline intégrée / Embedded Timelines

Personnaliser la timeline embarquée de Twitter, configuration pour Blogger, validé HTML5.
Pour modèles standards, la version mobile personnalisée ou encore pour gadgets AddToBlogger.
Choix du type de la timeline : Fil utilisateur, Favoris, liste.
Multiple réglages :
Couleurs, bordures, arrière-plan, langue, dimensions, etc
Conditions d'affichage en fonction de certains paramètres Blogger :
Type de la page, auteur ou/et libellé associés à l'article, etc.

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

Présentation du module

Tweets de @Blogger_Code_PE

Avec un seul gadget créé depuis votre interface Twitter, vous pouvez le réemployer une multitude de fois sous des aspects différents, sans avoir a modifier les réglages depuis Twitter.

• Les couleurs
• Les dimensions
• Le type de timeline
• L'utilisateur
• etc

Tweets utilisateur	Tweets favoris
Tweets de @Blogger	Tweets favoris de @soraya_bc

Liste
Tweets de @Blogger_Code_PE/blogger-experts-team

Configuration du module

Avant de commencer, créez votre gadget sur Twitter et récupérez son identifiant.

Cet identifiant se trouve dans la barre d'adresse de la page de "configuration du gadget" lorsque le gadget a été créé.

https://twitter.com/settings/widgets/ID_GADGET_TWITTER/edit

Ensuite, complétez ce tableau. Les codes qui se trouvent ci-dessous s'adapteront en fonction de vos choix.

L'aperçu s'affichera lorsque toutes les données principales du gadget ont été mentionnées correctement.

Données principales du gadget [REQUIS] ?	Identifiant widget [REQUIS] Type de timeline Fil utilisateur Favoris Liste Fil personnalisé Utilisateur @ [REQUIS] Nom de liste [REQUIS] ? ? Tous les champs requis ne sont pas remplis.
Options Blogger	Placer dans le code HTML d'un modèle standard un quelconque éditeur HTML un gadget AddToBlogger Nom Blogger ? Nom Blogger ? Libellé ? Libellé ?
Dimensions	Largeur 520px Hauteur 600px Hauteur indisponible ? Nbre max tweets Non-déterminé ?
Paramètres de base	Thème Clair (light) Sombre (dark) Réponses Afficher Ne pas afficher 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
Couleurs	Liens Bordures
Paramètres secondaires	Entête Pied Bordures ScrollBar Arrière-plan
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 module

<!-- Timeline Twitter - Blogger Config.
     Ref.: http://goo.gl/V9czij -->
<b:if cond='data:post.author == &quot;&quot;'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;&quot;'>
<div style=''>
<a class='twitter-timeline'
   href='https://twitter.com/'
   data-widget-id=''
   data-screen-name=''
   data-favorites-screen-name=''
   data-list-owner-screen-name=''
   data-list-slug=''
   data-theme='light'
   data-tweet-limit=''
   data-show-replies='true'
   data-link-color='#00acee'
   data-border-color='#e8e8e8'
   data-chrome=''
   width='520'
   height='600'
   lang='fr'
   target='_blank' >
Tweet
</a>
</div>
</b:if>
</b:loop>
</b:if>
<div style="">
<a class="twitter-timeline"
   href="https://twitter.com/"
   data-widget-id=""
   data-screen-name=""
   data-favorites-screen-name=""
   data-list-owner-screen-name=""
   data-list-slug=""
   data-theme="light"
   data-tweet-limit=""
   data-show-replies="false"
   data-link-color="#00acee"
   data-border-color="#e8e8e8"
   data-chrome=""
   width="520"
   height="600"
   lang="fr"
   target="_blank" >
Tweet
</a>
</div>

Où recopier ce code ?

La timeline est raccordée aux articles. Elle doit être positionnée 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

Sous cette configuration, le code de la timeline 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, le code de la timeline peut être ajouté aussi bien dans le code HTML d'un article, d'une page autonome ou dans un gadget HTML/JS.

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.

<!-- Timeline Twitter intégrée (Twitter Embedded Timelines). 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 timelines

• Facebook - Plugin Page
• Twitter - Timeline