5 façons simples d'installer des cartes Twitter sur votre site Web

Alors vous savez comment sur Twitter, lorsque quelqu'un publie un lien vers son site Web, Twitter crée une boîte contenant une image miniature, un titre, une description et une URL pour la page de destination ? C'est vraiment courant. Cela rend les publications de liens standard beaucoup plus visibles dans les chronologies, cela montre un peu la destination du lien et cela encourage une plus grande interaction de l'utilisateur.

C'est une carte Twitter. Plus précisément, il s'agit de la carte récapitulative du site Web, l'un des nombreux types de cartes Twitter pouvant être intégrées à un site Web. Quels autres types existe-t-il ?

• La carte récapitulative, comme mentionné, est un aperçu d'un site Web. Il s'agit d'une image et d'un texte personnalisés extraits de métadonnées qui garantissent un bon aperçu de ce qu'un utilisateur verra lorsqu'il cliquera sur votre lien.
• La fiche récapitulative (avec grande image) est… identique à une fiche récapitulative. Honnêtement, je ne sais pas pourquoi il y a une différence. Cliquez sur chacun des liens et affichez les tweets prévisualisés et voyez ce que je veux dire. Je suppose qu'avant la dernière refonte de Twitter, ils auraient pu être différents, mais aujourd'hui, tout ressemble à une grande carte-image.
• La carte de joueur ne doit pas être confondue avec les cartes de baseball ou d'autres sports. Ce sont essentiellement de grandes cartes d'image, sauf que l'image est une forme de média animé. Selon la façon dont ils sont affichés, il peut s'agir de petites zones d'aperçu et de description qui se développent dans le média, ou simplement du média lui-même prêt à être lu. Généralement, ce sont des vidéos intégrées, comme les vidéos YouTube, bien que les webms soient de plus en plus populaires.
• La carte d'application est une boîte qui extrait les données d'une page de magasin d'applications pour créer une fenêtre de promotion d'application personnalisée. Il montre les détails saillants de l'application liée dans le tweet, ainsi qu'un bouton CTA pour inciter les utilisateurs à installer l'application immédiatement.

Les cartes Twitter étaient beaucoup plus complexes. Il existait auparavant des types de cartes spécifiques pour les galeries d'images, les produits et certaines autres options, mais Twitter les a depuis supprimées. Si vous voulez un peu de nostalgie, vous pouvez voir à quoi ils ressemblaient ici, mais ne vous attachez pas trop; vous ne pouvez pas les faire aujourd'hui.

Les bases des cartes Twitter

Vous ne pouvez avoir qu'un seul type de carte Twitter par site Web, ou au moins par page Web, si vous souhaitez spécifier un code individuel pour chaque page. La plupart des gens choisissent une carte récapitulative de base avec une grande image et placent le code dans l'en-tête de leur modèle de site, afin qu'il apparaisse sur chaque page. Certains sites, comme YouTube, mettront la carte du joueur dans leur en-tête. Le principal point à retenir ici est que vous ne pouvez avoir qu'un seul ensemble d'informations de carte dans vos métadonnées d'en-tête sur une page donnée.

Les cartes sont assez robustes dans les données qu'elles peuvent transmettre. Vous pouvez faire en sorte que la carte sache automatiquement qui a créé le contenu et à qui appartient la page, même les deux en même temps s'ils sont différents. Vous pouvez spécifier le support à charger, vous pouvez spécifier des noms et un code de suivi, et bien plus encore. En fait, vous pouvez lire cette page pour avoir une idée des attributs que vous pouvez utiliser spécifiquement pour les cartes. Vous pouvez également lier les attributs Open Graph pour des données plus robustes.

Ce que je vais faire ici aujourd'hui, c'est vous expliquer comment ajouter des cartes Twitter à votre site. Je ne vais pas passer en revue chaque attribut - la documentation Twitter est assez bonne - je vais juste vous donner un aperçu de la façon de le faire pour différents CMS.

Avant que nous commencions; pour chaque méthode d'installation, vous avez besoin d'une validation. Pour vous assurer que vous avez bien fait les choses, une fois que vous avez activé une carte, copiez l'URL dans ce validateur. Cela vous dira si oui ou non la carte fonctionne réellement.

1 : Wordpress

WordPress est peut-être la plate-forme la plus simple pour implémenter des cartes Twitter, car il existe de nombreuses façons différentes de le faire, y compris celle qui est presque intégrée.

La méthode recommandée pour implémenter les cartes Twitter est d' utiliser le plugin Twitter officiel . Vous pouvez l'installer comme n'importe quel autre plugin, et à partir de là, vous pouvez générer automatiquement vos cartes Twitter. Il active également les boutons de partage et de tweet/suivi, la gestion des tweets intégrés et les codes abrégés pour le suivi analytique. Vous pouvez lire la documentation ici et télécharger le plugin lui-même ici.

Si vous ne souhaitez pas utiliser le plugin Twitter officiel, ou si vous êtes sur WordPress.com hébergé, vous pouvez utiliser Jetpack. Dans Jetpack, vous souhaitez trouver la section Partage et la configurer. Il y aura une section Twitter, où vous autorisez votre compte Twitter sur votre site Web.

Une troisième option consiste à utiliser le plugin JM Twitter Cards. Ce plugin, par Julien Maury, ajoute la compatibilité des cartes Twitter avec quelques paramètres de base. Vous pouvez choisir de lui faire utiliser la première image de votre page plutôt qu'une image en vedette, vous pouvez prévisualiser le rendu de votre carte Twitter et vous pouvez personnaliser la carte pour chaque publication lorsque vous créez la publication. Pour configurer le plug-in, accédez à la barre latérale et cliquez sur le panneau du plug-in dans votre tableau de bord d'administration. Choisissez le type de carte et remplissez le reste des cases avec votre compte Twitter, le compte de votre site, la longueur de la description et tout ce que vous souhaitez ajouter.

Si aucun de ceux-ci ne correspond à vos besoins, ou si vous l'avez déjà, WordPress SEO by Yoast gère également les cartes Twitter. Dans votre panneau d'administration, accédez à SEO et cliquez sur la section Social. Il y a un onglet Twitter là-bas, où vous pouvez ajouter votre nom d'utilisateur Twitter à la boîte. Malheureusement, la dernière fois que j'ai lu, Yoast ne prend en charge que les cartes récapitulatives; vous avez besoin de plugins plus avancés si vous voulez d'autres types de cartes.

2 : Tumblr

Tumblr est une plate-forme de blogs étonnamment populaire dont beaucoup de gens ne se rendent pas compte qu'elle est devenue aussi prolifique. Le réseau Tumblr s'étend au-delà des blogs marqués avec .tumblr.com ; en fait, certains sites de grands noms utilisent Tumblr comme architecture de base. Une fois que vous avez un domaine personnalisé dessus, c'est comme n'importe quelle autre architecture back-end. Ou est-ce?

Le fait est que l'architecture de Tumblr n'est pas expansive ou aussi personnalisable que quelque chose comme WordPress. Vous devrez utiliser du code personnalisé pour implémenter des cartes Twitter spécifiques et personnalisées sur votre blog. Vous pouvez lire le code et la description derrière ici, dans la réponse donnée par Dan Leveille sur Quora.

Il convient de noter ici que ce code est nécessaire pour personnaliser manuellement vos cartes ; il n'est pas nécessaire d'avoir simplement des cartes récapitulatives. Twitter a déjà inscrit Tumblr.com sur liste blanche pour la génération automatique de cartes lors de la publication de liens, donc à moins que vous ne vouliez une carte spécifique avec des données spécifiques, ou que vous utilisiez un domaine personnalisé, vous pouvez simplement utiliser ce qui est implémenté par défaut. Je n'utiliserais son code que si vous avez un domaine personnalisé pour votre site Tumblr, ou si vous voulez des données que Twitter ne récupère pas naturellement.

3 : Blogueur

L'installation de cartes Twitter sur un blog Blogger dépend de votre modèle. Je vais vous donner des instructions générales, mais si votre modèle de site s'écarte trop de la norme, vous devrez le découvrir vous-même en fonction des indices que je vous donne.

Il est toujours recommandé de sauvegarder votre modèle avant de le modifier, juste au cas où. Accédez à votre tableau de bord, cliquez sur le modèle, puis cliquez sur le bouton de sauvegarde pour en enregistrer une copie à des fins de restauration ultérieure.

Ensuite, cliquez sur le bouton "modifier HTML" sous l'aperçu en direct de votre modèle de blog. Dans ce code, lancez une recherche sur "<b:includable id='post' var='post'>". Gardez cette ligne là où elle se trouve, mais collez ce qui suit directement en dessous :


<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>


Évidemment, vous devrez modifier vous-même les données ci -dessus. Remplacez @votrenom par votre nom d'utilisateur Twitter, remplacez www.votresite.com par l'URL de votre site et assurez-vous qu'il est exact.

Vous pouvez, bien sûr, personnaliser ce code selon vos besoins. Si vous préférez un autre type de carte, remplacez la ligne du haut par autre chose que "résumé" et adaptez le reste du code aux données dont vous avez besoin.

Au cas où le code que j'ai collé ci-dessus ne fonctionne pas, c'est la page d'où je l'ai obtenu. Vous pouvez revérifier pour vous assurer que je l'ai copié correctement, ou que vous l'avez fait, et vous pouvez vérifier là-bas au cas où il a été mis à jour et que mon message ne reflète pas la mise à jour. En parlant de ça, si ça ne marche pas, préviens-moi. Je ferai de mon mieux pour y remédier.

4 : Joomla

Joomla a beaucoup en commun avec WordPress, dans la mesure où il s'agit d'un CMS mettant l'accent sur la personnalisation via des extensions plutôt qu'une plate-forme limitée avec des améliorations cosmétiques comme Tumblr ou Blogger. En tant que tel, il existe plusieurs façons d'implémenter des cartes Twitter à l'aide de différentes extensions Joomla.

Tweet Cards est une extension que la plupart des gens préfèrent probablement. Il est gratuit à télécharger et à utiliser, et il ajoute des cartes Twitter à votre site Web basé sur Joomla. C'est ça; il n'y a rien d'extraordinaire dans la configuration, il n'y a rien d'exceptionnel avec sa fonctionnalité ou sa mise en œuvre, il fait juste ce qu'il dit sur l'étain.

Une deuxième option est l'extension pro Open Graph et Twitter Card Tags. C'est une extension plus robuste qui ajoute des balises pour Twitter et Facebook. Il propose de nombreuses options de personnalisation pour choisir les images et les données spécifiques que vous souhaitez pour vos publications. L'intégration Facebook d'Open Graph est excellente, et ajoute des métadonnées supplémentaires pour Twitter et Google lorsqu'ils frappent. Le seul inconvénient est qu'en tant qu'extension professionnelle, celle-ci va vous coûter cher. C'est bon marché, cependant; seulement 7 euros pour la licence. Vous pouvez acheter une assistance supplémentaire si vous le souhaitez, mais soyons honnêtes ; ce ne sont que des métadonnées, c'est un travail de copier-coller glorifié pour les personnes qui ont peur du code. Vous n'avez pas besoin de soutien.

La troisième option que j'ai pour vous consiste à utiliser TEXTman, un éditeur de publication frontal pour créer et publier vos articles sur un site Joomla. Vous n'avez pas besoin de configurer quoi que ce soit pour que les cartes Twitter fonctionnent ; utilisez simplement TEXTman comme éditeur et il apporte la fonctionnalité automatiquement. L'inconvénient ici étant qu'il s'agit également d'un outil professionnel, et beaucoup plus cher. Puisqu'il s'agit d'un éditeur de texte complet et d'outils associés, il s'agit d'une grosse licence avec plusieurs extensions ajoutées. Cela vous coûtera 99 $ pour un abonnement avec tout, ou 40 $ pour TEXTman lui-même et une licence de support et de mise à jour limitée. Très cher si tout ce que vous voulez, ce sont des cartes Twitter.

Enfin, bien sûr, vous pouvez utiliser la méthode ci-dessous ou décrite dans ce post pour les mettre en œuvre manuellement.

5 : Systèmes de gestion de contenu personnalisés

J'ai déjà posté un exemple des métadonnées dans le code ci-dessus. C'est essentiellement le même code que vous collez dans l'en-tête de votre site, quelle que soit l'architecture que vous utilisez. Ajustez les choses en fonction des besoins de votre site et copiez le code dans l'en-tête de votre site. Peu importe où il se trouve, tant qu'il se trouve entre les balises <head> et </head> en haut du site.

N'oubliez pas de personnaliser les balises. Les principaux éléments auxquels vous devez prêter attention sont les balises de carte, de site, de créateur et de domaine. Ceux-ci doivent être remplis avec le type de carte que vous souhaitez, le pseudo Twitter de votre site et du créateur de contenu, et l'URL de votre domaine. Validez ensuite la carte une fois que vous avez mis en œuvre les modifications.

Si votre carte ne fonctionne toujours pas après validation, vous devriez lire le guide de dépannage de Twitter. Il y a de fortes chances qu'il y ait une simple erreur quelque part que vous puissiez corriger en quelques secondes.