Comment implanter des cartes twitter sur les blogs blogger / blogspot

Comment implanter des cartes twitter sur les blogger / blogspot blogs

Twitter a commencé à prendre en charge les microformats par l'introduction de cartes Twitter. Cela aidera à afficher le résumé, la vignette, le site twitter handle, l'URL, etc. tout en tweet. Ceci est similaire au protocole graphique ouvert de Facebook et Google+. Voici comment l'implémenter.

La carte Twitter est la nouvelle façon de montrer notre contenu de manière plus engageante sur Twitter. Lorsqu'un utilisateur clique sur Développer l'histoire, il peut voir la description du blog, la vignette, le site web twitter handle et l'auteur twitter handle. L'utilisateur peut suivre les deux astuces de Twitter à partir de l'histoire élargie.

Maintenant, ils ont six types d'attributions. Résumé, product, photo, résumé grande image et joueur.

Le Résumé est ce dont nous avons besoin pour les publications du blog. Photo aide à prévisualiser les photos et les joueurs pour les vidéos. En utilisant l'attribution de résumé, nous pouvons partager la description du message, deux astuces de Twitter (nom de l'auteur et du site Web), l'image miniature, le titre de la publication et l'URL. Twitter pourrait ajouter des attributions supplémentaires à l'avenir. Restez à l'écoute.

Comment implémenter des cartes Twitter dans Blogger: Résumé

Nous devons ajouter quelques méta-tags à la section tête du modèle Blogger.

Accédez au modèle, puis sélectionnez Modifier HTML (#)
Cliquez sur la fenêtre contextuelle apparue (#)
Trouver </head> par Recherche (Utiliser Ctrl + F)
Ajoutez le code suivant juste au-dessus de </head>

<!-- twitter cards -->
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@AUTHOR_TWITTER_HANDLE"/>
<meta name="twitter:creator" content="@WEBSITE_TWITTER_HANDLE"/> 
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta name="twitter:url" expr:content='data:blog.url' />
<meta name="twitter:title"  expr:content='data:blog.pageName' />
<meta name="twitter:description" expr:content='data:blog.metaDescription'/>
 <b:else/>
<meta name="twitter:url" expr:content='data:blog.homepageUrl'  />
<meta name="twitter:description" expr:content='data:blog.metaDescription'/>
 </b:if>
 <b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name="twitter:image"/>
<meta name="twitter:title"  expr:content='data:blog.title' /> 
 <b:else/>
<meta content='WEBSITE_FAVICON_IMAGE_URL' name="twitter:image"/> 
<meta expr:content='data:blog.title' name='twitter:title'/>
 </b:if>

Mais les anciens blogs ne montrent pas les balises de méta-description car elles ont été introduites récemment. Vous pouvez introduire ce support en ajoutant le code suivant au lieu de la ligne de couleur verte. Mais vous devriez placer le bloc de code entier après . La balise ci-dessous n'est pas prise en charge dans la section tête. Normalement, les méta-tags sont utilisées dans la section de la tête, de sorte qu'il peut s'agir d'avertissements avec les moteurs de recherche.

'twitter:description' expr:content='data:post.snippet'/>

Si vous avez déjà implémenté Open Graph Protocol, vous n'avez besoin que des trois premières balises. N'oubliez pas de changer les cordes de couleur rouge à votre valeur.

<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@AUTHOR_TWITTER_HANDLE"/>
<meta name="twitter:creator" content="@WEBSITE_TWITTER_HANDLE"/>

Après avoir ajouté des méta-tags à votre modèle, vous devez valider en utilisant le validateur de carte Twitter-Lien

1. Comment implémenter le protocole open graph dans les bloggers / blogspot blogs
2. Comment utiliser la nouvelle balise de méta-description de Blogger pour ajouter des descriptions individuelles
3. Supprime le lire plus à partir du résumé ou de la page d'accueil du blog
4. Supprimez les liens des publications individuelles du Blogger ou des titres de page
5. Éviter les problèmes liés à la redirection spécifique au pays dans Blogger