Personnalisation des tweets d’article


Posté le 9 Août 2013 dans la catégorie wordpress.

Vous écrivez des articles sous WordPress et pour chacun d’entre eux vous avez des boutons de partage sur les réseaux sociaux dont le fameux bouton Twitter.
Vous êtes-vous déjà demandé s’il était possible de personnaliser vos tweets pour chaque
article ? Cela est possible, voila un petit tutoriel.

1. Le bouton Twitter

Pour commencer il est conseillé de faire les manipulations suivantes sur un bouton Twitter
placé « manuellement » dans votre site, c’est à dire sans l’aide d’un plugin.

Vous aurez besoins du code du bouton Twitter. Pour cela il faut aller sur le site de Twitter.

twitter

Page pour créer des boutons Twitter.

Une fois sur ce site vous pouvez configurer votre bouton de la manière suivante :

aremplir

Création d’un bouton de partage Twitter.

Vous allez choisir le bouton « partager un lien ». C’est le principe quand on souhaite partager un article.

Ensuite dans les options du bouton vous allez choisir :

– Partager l’url  : « Utiliser l’url de la page ». Lors du tweet l’url de la page sera présente pour que vous puissiez partager votre article.
– Le texte du tweet : Vous allez personnaliser votre texte. Notez un texte de test pour pouvoir
repérer où votre code personnalisé s’affichera.

Enfin pour les options concernant le compte vous êtes libre de choisir.

Lorsque votre configuration est finie vous allez récupérer le code dans la partie « aperçu et code ». Vous devriez obtenir un code se présentant de cette façon :

<a href="https://twitter.com/share" data-text="TEST" data-via="webtitrucs" data-lang="fr">Tweeter</a> <script type="text/javascript">// <![CDATA[!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js' fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); // ]]></script>

Dans ce code c’est la partie « data-text=’TEST' » qui nous intéresse principalement. Coté
Wordpress vous devrez vous pencher sur les champs personnalisés ou « custom fields ».

 

2. Les champs personnalisés

Lorsque vous écrivez un article sous WordPress vous avez la possibilité d’afficher et d’utiliser les champs personnalisés.

champs personalisés

Champs personnalisés dans l’édition d’un article sous WordPress.

Dans votre article vous allez en ajouter un, nommé par exemple « Twitter » et ayant pour valeur ce que vous voulez. La valeur correspond au texte qui sera twitté.

Puis nous allons revenir au code que vous devrez modifier et placer sur le site.

 

3. Le code final

Reprenons le code que vous avez obtenu précédemment :

<a href="https://twitter.com/share" data-text="TEST" data-via="webtitrucs" data-lang="fr">Tweeter</a> <script type="text/javascript">// <![CDATA[!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js' fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); // ]]></script>

Vous allez vous concentrer sur le champs « data-text=’TEST' ».

A la place du mot « TEST » vous allez mettre la condition suivante : Si le champ personnalisé existe alors ce qu’il y a d’inscrit à l’intérieur de celui-ci s’affichera. Dans le cas contraire c’est le titre de l’article qui s’affichera par défaut.

Ce qui en langage code se présente de cette façon :

if (get_post_meta($post->ID,’twitter’,true)) : echo get_post_meta($post->ID,’twitter’,true);  /*Si le champs personnalisé existe on affiche ce qu’il y a de noté */
else : echo the_title(); /*S’il n’existe pas de champ personnalisé on affiche le titre de l’article*/
endif;

L’idée est d’insérer ce code dans le champ « data-text », ce qui donne :

<a href="https://twitter.com/share" data-text="<?php if (get_post_meta($post->ID,'twitter',true)) : echo get_post_meta($post->ID,'twitter',true); else : echo the_title(); endif; ?>" data-via="webtitrucs" data-lang="fr">Tweeter</a> <script type="text/javascript">// <![CDATA[!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js' fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); // ]]></script>

Dans ce code vous pouvez également rajouter un paramètre qui est : data-url="<?php the_permalink() ?>" . Il fera en sorte que le lien de l’article s’affiche automatiquement dans le tweet.

<a href="https://twitter.com/share" data-text="<?php if (get_post_meta($post->ID,'twitter',true)) : echo get_post_meta($post->ID,'twitter',true); else : echo the_title(); endif; ?>" data-url="<?php the_permalink() ?>" data-via="webtitrucs" data-lang="fr">Tweeter</a> <script type="text/javascript">// <![CDATA[!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js' fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); // ]]></script>

Si nous analysons de nouveau ce code nous avons :

– Un paramètre « data-text » : Il correspond au texte qui s’affichera dans le tweet. Il y aura soit votre texte personnalisé soit le titre de l’article.
– Un paramètre « data-url » : Il correspond à l’url de l’article qui se trouvera automatiquement dans le tweet.
– Un paramètre « data-via » : Le compte à l’origine du tweet. Il s’ajoutera automatiquement comme pour l’url de l’article.

Pour résumer votre tweet ressemblera à cela :

TEXTE PERSONNALISÉ (ou TITRE DE L’ARTICLE) + URL DE L’ARTICLE + @COMPTE EMETTEUR DU TWEET.

 

4. Le tweet personnalisÉ

Souvenez-vous qu’un tweet ne doit pas dépasser 140 caractères. Avant de publier votre article faites un test pour vérifier si tout est bon.

Exemple de tweet personnalisé.

Exemple de tweet personnalisé.

Vous pouvez personnalisé vos tweets avec des hashtags ou même avec le compte d’un
followers. Faites attention car si vous notez le compte d’une personne, sachez qu’il recevra une notification à chaque fois que votre article sera twitté.

Maintenant c’est à vous d’essayer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *