Comment ajouter les cartes Twitter (Twitter Cards) à son blog Blogger ? [tuto]





Fini les tweets à 140 caractères, sans aperçu ! Les cartes Twitter sont là, et ils vous permettront d'ajouter un résumé, une image et plus à vos tweets, voici comment les ajouter à votre blog Blogger.

Les cartes Twitter : à quoi ça sert ?


Les cartes Twitter vous permettent de transformer des tweets de 140 caractères (texte ordinaire) en un contenu rich media. Après avoir ajouté un code html à votre site (blog), quand une URL de ce dernier est tweetée, elle déclenche automatiquement une carte Twitter rich media selon le type de code ajoutée.

7 types de cartes peuvent être attachés aux tweets :

  • Summary Card (Carte Synthèse) : carte par défaut, y compris titre, description, vignette et attribution d'un compte Twitter.
  • Large Image Summary Card (Carte Synthèse Grande image) : semblable à une carte Synthèse, mais permet de mettre largement en évidence une image.
  • Photo Card (Carte Photo) : carte photo de la taille d'un tweet.
  • Gallery Card (Carte Galerie) :  carte Tweet mettant en évidence une collection de photos.
  • App Card (Carte Application) : carte Tweet pour fournir un profil d'une application.
  • Player Card (Carte Joueur) : carte pour lecteur multimédia/audio/vidéo de la taille d'un tweet.
  • Product Card (Carte Produit) : carte tweet permettant de mieux représenter le contenu du produit.
[Source]

Comment ajouter Twitter Cards à votre blog (blogspot) ?



Dans cet exemple, seul le code de la carte "Summary" est donné. Découvrez dans la suite les étapes nécessaires pour ajouter cette carte à votre blog.

1. Allez dans "Modèle > Modifier le code HTML" et Cliquez sur "Accéder au widget > Blog1"
2. Juste après le code suivant :

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'>

Ajoutez ce code en changeant ce qui est marqué en gras avec vos propres données:

<b:includable id='twitterCards'>

  <meta content='@pseudo_auteur_twitter' name='twitter:creator'/>
  <meta content='@pseudo_blog_twitter' name='twitter:site'/>
  <meta expr:content='data:blog.title' name='twitter:domain'/>

  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
      <meta expr:content='data:blog.pageName' name='twitter:title'/>
      <b:if cond='data:blog.metaDescription != &quot;&quot;'>
        <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
      </b:if>
      <b:if cond='data:posts'>
        <b:loop index='image' values='data:posts' var='post'>
          <b:if cond='data:image == 0'>
            <b:if cond='data:post.firstImageUrl'>
              <meta content='summary' name='twitter:card'/>
              <meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
              <b:else/>
              <meta content='summary' name='twitter:card'/>
            </b:if>
          </b:if>
        </b:loop>
      </b:if>
    </b:if>
  </b:if>

  <b:if cond='data:blog.pageType != &quot;archive&quot;'>
    <b:if cond='data:blog.pageType != &quot;index&quot;'>
      <b:loop values='data:posts' var='post'>
        <meta expr:content='data:post.canonicalUrl' name='twitter:url'/>
        <b:if cond='data:post.title'>
          <meta expr:content='data:post.title' name='twitter:title'/>
          <b:else/>
          <meta expr:content='data:blog.pageName' name='twitter:title'/>
        </b:if>
        <b:if cond='data:blog.metaDescription != &quot;&quot;'>
          <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
          <b:else/>
          <b:if cond='data:post.snippet != &quot;&quot;'>
            <meta expr:content='data:post.snippet' name='twitter:description'/>
          </b:if>
        </b:if>
        <b:if cond='data:post.firstImageUrl'>
          <meta content='summary' name='twitter:card'/>
          <meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
          <b:else/>
          <meta content='summary' name='twitter:card'/>
        </b:if>
      </b:loop>
    </b:if>
  </b:if>
</b:includable>

Remarque : data:blog.pageName ou data:blog.title (si vous obtenez dans la suite un problème avec le champ titre dans le formulaire Twitter)

4. Dans l’inclusion main (cliquez sur la flèche noire pour la déployer) et juste après :

<b:includable id='main' var='top'>

recopiez le code suivant :  <b:include name='twitterCards'/>


Comment activer la carte depuis Twitter ?


1. Allez dans l'outil d'activation de Twitter pour activer la carte utilisée, authentifiez-vous à votre compte Twitter

2. Choisissez la carte "Summary"



3. Cliquez sur l'onglet "Validate & Apply" et entrez l'url de votre blog et cliquez sur Go

4. Si tout va bien (et que tous les champs sont bien remplis), cliquez sur "Request Approval":


5. Validez le formulaire de contact, et assignez les champs qui manquent :


6. Une fois validé, vous aurez droit à cette alerte :


7. Un mail vous informera que la carte Twitter "summary" a bien été ajoutée à votre blog :



A chaque fois que vous publiez un nouvel article, et que vous le partagerez sur Twitter celui ci sera enrichi par un petit résumé et une image :


Bonus :

No Response to "Comment ajouter les cartes Twitter (Twitter Cards) à son blog Blogger ? [tuto]"

Enregistrer un commentaire

Related Posts Plugin for WordPress, Blogger...
 

Catégories

4k accessoire acta actualités amazon android anonymous anti-virus appareil photo apple apps art art visuel astuces asus BlackBerry blog blogger bon plan bracelet Buzz censure ces2013 ces2014 ces215 chrome cinéma cloud computing community manager Comparatif Computex 2012 Computex 2013 Computex 2014 cydia dell design diablo 3 disque dur dns documentaire doodle download e-commerce e-learning E3 2012 E3 2013 ebook échos du web edito email études excel extension facebook film firefox firefox os fonepad forum foursquare free gadget galaxy gear galaxy mega galaxy nexus galaxy note galaxy note 10.1 galaxy note 2 galaxy note 3 galaxy note 3 neo galaxy note 4 galaxy note 8.0 galaxy note edge galaxy notepro galaxy round galaxy s duos 2 galaxy s2 plus Galaxy S3 galaxy S3 mini galaxy S4 galaxy S4 mini galaxy s5 galaxy s6 galaxy s7 galaxy tab galaxy tab 3 galaxy tabpro Gamescom 2012 Gamescom 2013 gear fit geek gmail google Google Drive Google Glass google I/O Google Keep google tv google+ graphisme gta5 hp htc html5 Huawei humour ie ie9 ifa 2012 ifa 2013 ifa 2014 illustration imprimante 3D info mag récap infographie insolite instagram intel iOS ipad ipad air ipad mini ipad pro ipad2 ipad3 ipad4 iphone iPhone 5 iphone 5c iphone 5s iphone 6 iphone 6 plus iphone 6s iphone 6s plus iPod ipv6 iwatch jailbreak jeux jeux vidéos jolla kindle kindle fire LG linkedin linux livre blanc logo lumia mac os macbook mega megaupload messagerie microsoft microsoft surface Mobile mooc moodle moto 360 moto g moto x msn musique MWC MWC 2013 MWC 2014 MWC 2015 MWC 2016 navigateurs nexus 10 nexus 4 nexus 5 nexus 6 nexus 7 nexus 9 nexus q nokia notebook numbers nvidia office 2013 orange OS os x paypal pc pdf photographie pinterest piratage pollution powerpoint programmation récap tutos réseau réseaux sociaux Review rss sailfish samsung Samsung Galaxy sécurité SEO séries siri skype smartphone smartwatch socl sony startup streaming tablette technologie test timeline top top games top weekly games torrent tumblr tunisiana tunisie tunisie télécom tutoriels tv twitter ubisoft utilitaire vidéo vie privée vine vpn wallpaper wii u wiko windows windows phone windows10 Windows8 word wordpress wwdc 2012 wwdc 2013 wwdc 2014 xbox yahoo youtube

Partenaires

Notre site Info Magazine est listé dans la catégorie Informatique : Actualités informatiques de l'annuaire Fiche descriptive de Youtube

VDP-Annuaire annuaire gratuit

Copyright © 2013 Info Magazine All rights reserved.
Converted To Blogger Template by Blogspot Templates Theme By- WooThemes