Intégrer Twitter sur votre blog WordPress : guide complet

Twitter est désormais devenu un outil quasiment indispensable pour nous blogueurs : il nous permet de partager vos articles, engager la discussion avec d’autres blogueurs, découvrir des articles intéressants, …

Mais afin d’en tirer encore plus d’avantages, il est aussi intéressant d’intégrer Twitter sur vos blogs, afin qu’il soit facile pour vos lecteurs de vous retrouver, d’engager la conversation, ou de partager vos articles. Voyons donc dans cet article comment intégrer Twitter à WordPress d’une façon simple et efficace.

Bien sûr, il existe de nombreux plugins qui vous proposent quelques-unes de ces fonctionnalités, mais dans cet article nous allons voir toutes les possibilités une par une : libre à vous par la suite de choisir les options qui vous intéressent et de les activer sur votre propre blog.

Intégrer le bouton officiel de twitter

La première possibilité que je vais vous présenter est sûrement une des plus demandées : comment intégrer ce fameux bouton, correctement et là où vous le souhaitez sur votre blog. Car même si la solution est simple, il arrive souvent que ces plugins ne vous donnent pas vraiment le choix sur l’endroit où apparaitra le bouton.

Il va donc vous falloir éditer deux fichiers dans votre thème. Voyons tout d’abord votre functions.php (s’il n’existe pas, créez-le) :

<?php
/*
 * Bouton twitter officiel
 * Pour l'integrer, ajoutez le hook do_action('hook_tw_share'); n'importe ou dans votre theme,
 * apres le contenu dans votre fichier single.php par exemple
 */
// Appeler le fichier js de twitter
function werewp_twitter_official() {
	wp_register_script( 'twitter', 'http://platform.twitter.com/widgets.js' );
	wp_enqueue_script( 'twitter' );
}
add_action( 'init', 'werewp_twitter_official' );

// Créer le hook a integrer a votre theme
function werewp_tw_share() {

	$url = the_permalink();
	$title = the_title();
	$via = 'jeherve'; // Remplacez par votre propre compte twitter
	$text = 'Tweetez'; // Le texte de votre bouton

	echo '<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-url="'.$url.'" data-text="'.$title.'" data-via="'.$via.'">'.$text.'</a>';
}
add_action( 'hook_tw_share', 'werewp_tw_share' );
?>

Comme vous pouvez le voir, nous venons tout d’abord charger le javascript de Twitter dans le head de notre thème, grâce à la fonction wp_enqueue_script de WordPress. Il ne nous reste ensuite qu’à créer le hook qui contiendra notre bouton. Il est possible de définir plusieurs options, que j’ai commentées dans mon code.

Il ne nous reste ensuite qu’à insérer ce hook à l’endroit précis de notre thème où nous voulons que notre bouton apparaisse. Vous pouvez par exemple l’insérer à côté du titre de votre article, dans votre fichier single.php, comme je l’ai fait sur ce blog. Pour ça, insérez simplement la ligne suivante :

<?php do_action( 'hook_tw_share' ); >

Afficher vos derniers tweets

De nombreux plugins et applications vous proposent d’intégrer des widgets sur votre site pour pouvoir afficher vos derniers tweets. Malheureusement, nombreuses sont celles qui le font rapidement et sans ralentir l’affichage de twitter. Voici donc une solution pour éviter ce problème, twitterjs.

Ajoutez le code suivant dans votre fichier functions.php :

<?php
/*
 * Afficher le dernier tweet publié de votre compte twitter
 * Changez le compte pour le votre
 * Pour afficher le tweet dans votre theme, insérez le code <div id="tweet"></div>
 */
function werewp_recent_tweets() { ?>
	<script type="text/javascript" src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"></script>
	<script type="text/javascript" charset="utf-8">
		getTwitters('tweet', {
  		id: 'jeherve', // Votre compte twitter
  		count: 1,  // Le nombre de tweets que vous souhaitez montrer
  		enableLinks: true, // Modifiez cette ligne pour false si vous ne souhaitez pas vos liens soient cliquables
  		ignoreReplies: true, // Modifiez cette ligne pour false si vous souhaitez que vos reponses soient aussi affichees
  		clearContents: true,
  		template: '"%text%" <a href="http://twitter.com/%user_screen_name%/statuses/%id_str%/" rel="nofollow">%time%</a>'
		});
	</script>
<?php }
add_action( 'wp_footer', 'werewp_recent_tweets' );
?>

Remplacez les paramètres que j’ai précisé par ceux de votre choix, et il vous suffira ensuite d’ajouter le code suivant dans votre thème, à l’endroit précis où vous souhaitez voir votre ou vos tweets apparaître :

<div id="tweet"></div>

Créer une application Twitter dédiée à votre site

Mise à jour : Twitter a maintenant coupé l’accès aux services de Twitter Anywhere, cette méthode n’est donc valable. Jetez un coup d’oeil à leur annonce pour trouver des alternatives.

Twitter propose un moyen très simple de créer votre propre application, afin d’intégrer des fonctionnalités avancées sur votre site : Twitter Anywhere. Je ne peux que vous conseiller d’essayer, pour plusieurs raisons :

• Vous allez pouvoir proposer un accès simple à vos informations Twitter, directement sur votre site,
• Plus besoin de vous soucier des liens vers votre compte Twitter : il vous suffira d’écrire @jeherve pour voir votre texte être transformé en un lien vers votre compte,
• Les utilisateurs qui vont tweeter depuis votre site feront la promotion de votre blog, en utilisant votre application. En effet, leurs tweets seront postés via votre application.

Alors, vous êtes tentés ? Voici les étapes à suivre pour y arriver :

Connectez-vous avec votre compte Twitter sur Twitter anywhere, et créez votre propre application.

Attention à deux détails : votre application doit être créée avec des droits Read & Write, et le callback URL doit rediriger vers votre domaine.

Une fois que c’est fait, notez votre clé API, et revenons à notre code.

Nous allons tout d’abord appeler le javascript de twitter anywhere en en-tête du blog. Pour cela, rien de plus simple, ajoutez ces quelques lignes à votre fichier functions.php :

<?php
/**
 * Ajout de twitter anywhere sur votre site
 */
// Appeler le js dans le head (voir recommendations sur http://dev.twitter.com/anywhere/begin)
function werewp_twitter_anywhere() {

	$api = 'votre-cle-api'; // Le numéro API de votre application

	echo '<script src="http://platform.twitter.com/anywhere.js?id='.$api.'&amp;v=1" type="text/javascript"></script>';
}
add_action ( 'wp_head', 'werewp_twitter_anywhere' );
?>

Comme vous pouvez le voir, il vous faut insérer votre clé API. Mais c’est tout !  Nous allons maintenant pouvoir profiter des fonctionnalités que propose cette librairie !

Ajouter les liens automatiques et fenêtres Twitter sur tous les usernames Twitter

Mise à jour : Twitter a maintenant coupé l’accès aux services de Twitter Anywhere, cette méthode n’est donc valable. Jetez un coup d’oeil à leur annonce pour trouver des alternatives.

En ajoutant les lignes suivantes dans notre fichier functions.php, nous allons activer deux fonctions intéressantes : l’ajout d’un lien vers Twitter à chaque fois que vous mentionnez un utilisateur Twitter, et une fenêtre d’infos à propos de cet utilisateur :

<?php
// Ajouter les fonctionnalités de twitter anywhere sur votre site (liens automatiques et fenetre de dialogues avec infos sur le twittos
function werewp_twitter_links() { ?>
	<script type="text/javascript">
		twttr.anywhere(function (T) {
    	T.linkifyUsers();
    	T.hovercards({ expanded: true });
  		});
	</script>
<?php }
add_action( 'wp_footer', 'werewp_twitter_links' );
?>

Ajouter une fenêtre pour twitter directement depuis un article

Mise à jour : Twitter a maintenant coupé l’accès aux services de Twitter Anywhere, cette méthode n’est donc valable. Jetez un coup d’oeil à leur annonce pour trouver des alternatives.

En combinant Anywhere et l’API shortcode de WordPress, nous pouvons créer un shortcode qui vous permettra d’insérer des fenêtres de tweet dans vos articles.

Ajoutez donc le code suivant dans functions.php, en modifiant les options que j’ai préremplies :

<?php
/**
 * Creation d'un shortcode à inserer dans vos articles pour afficher une boite de dialogue message Twitter
 * Shortoode: tweetbox
 */
// Appeler le js dans le footer
function werewp_tweetbox_anywhere() {

	$title = 'Contactez moi sur twitter !'; // Le titre de la fenêtre de dialogue twitter
	$default = '@jeherve'; // Le texte qui s'affiche par défaut dans la fenêtre de dialogue
	$height = '50'; // La hauteur de la fenêtre
	$width = '600'; // Largeur de la fenêtre

	// N'appeler les fichiers pour la boite de dialogue que sur les pages single de WordPress.
	if ( is_singular() ) {
		echo '
		<script type="text/javascript">
		twttr.anywhere(onAnywhereLoad);
		function onAnywhereLoad(twitter) {twitter("#custom-tweetbox").tweetBox({ label: "'.$title. '", defaultContent: "'.$default. '", height: '.$height.', width: '.$width.', });
		};
		</script>
		';
	}
}
add_action( 'wp_footer', 'werewp_tweetbox_anywhere' );

// Construire le shortcode
function werewp_tweetbox() {
	return '<div id="custom-tweetbox"></div>';
}
add_shortcode( 'tweetbox', 'werewp_tweetbox' );
?>

Afin de profiter de cette option, il vous suffit d’insérer le shortcode suivant n’importe où dans votre article :

[tweetbox]

Simple, non  ?

J’espère que cet article vous a plu, si c’est le cas, cela vaut bien un petit tweet je pense ! ;)

Ressources :

• Twitter Anywhere
• twitterjs Google project