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...
 

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