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.

Intégrer Twitter sur votre blog WordPress

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.

Branding twitter 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 :

25 thoughts on “Intégrer Twitter sur votre blog WordPress : guide complet

    • Comment ça “par twitter” ? Si vous avez un lien n’hésitez pas, je suis preneur, je pourrai éditer mon article si une meilleure solution existe !

      Mais la solution actuelle pour intégrer le bouton correspond au bouton officiel de Twitter; l’intégration est simplement un peu plus propre que d’intégrer le bouton directement dans tous vos fichiers thème.

  1. Bonjour! Et merci pour l’intégration de l’API!

    J’ai juste un problème lorsque j’ajoute le code au fichier wp-inculde/functions.php, la ligne “add_action(‘wp_footer’, ‘werewp_tweetbox_anywhere’);” par exemple ne passe pas!

    • Alors juste une remarque : ces lignes de code sont à ajouter au fichier functions.php de ton thème, pas des fichiers core de WordPress.
      Il faut donc que tu recherches dans le dossier de ton thème ce fichier là, ou bien que tu le créés.
      Normalement cela devrait ensuite fonctionner correctement.

  2. Super boulot, mais une question auquel je ne trouve pas la réponse :

    [quote]Pour l’integrer, ajoutez le hook do_action(‘hook_tw_share’); n’importe ou dans votre theme.[/quote]
    Désolé mais je ne comprends pas ce qu’il faut rajouter, et dans quel partie du thème devrais je le rajouter. Sinon super article bien complet et expliqué, tout le reste j’ai compris. Encore un grand merci et bravo.

    • Tu dois en fait ajouter le bout de code suivant :

      Dans ton fichier single.php, à l’endroit précis où tu veux que ton bouton apparaisse sur ta page (par exemple si tu veux qu’il apparaisse après le contenu de tes articles, recherche la fonction the_content, et ajoute ce bout de code juste après)

      J’espère que c’est plus clair !

  3. Merci, maintenant c’est bon j’ai complètement tout compris. Par contre mon thème n’aime pas trop toutes les fonctions j’ai des messages d’erreur. Je fais 1 bout par un bout pour le moment et je verrais ou ca coince ^^
    Mais encore une fois super “tuto” si l’on peut l’appeler ainsi, un vrai “How To”.

  4. Bonjour Jérémy, merci pour ce tutorial. J’ai inséré le code dans l’endroit prévu à cet effet (functions) dans mon thème (Mystique thème).

    J’essaye de mettre le bout de code dans single.php mais je ne vois pas le bouton apparaître… Cela donne :


    <div id="post-” class=””>

    ID, ‘hide_title’, true)): ?>

    Merci Jérémy !

  5. Merci Jeremy, en fait, ma question porte sur la tweetbox, j’ai pris le bouton Twitter du site Twitter directement finalement. Comment puis-je mettre sur la même ligne le boutton Twitter et J’aime (Facebook). Ici, les boutons sont désaxés (pas sur la même ligne) : http://www.seyth.com/?p=1181

    Voici le code pour la Tweetbox que j’ai mis dans function de mon thème : http://pastebin.com/JKb6ZHvD Cela me met : Sorry, something went wrong. The client identifier was missing or unknown

    • 1. Dans ton code, tu dis que tu as essayé avec les numéros oauth_token et oauth_token_secret. Ce n’est ni l’un ni l’autre, mais API Key qu’il faut rentrer. C’est une première piste.

      2. Pour le positionnement de tes boutons twitter et Facebook, j’ai personnellement mis mes deux boutons dans deux div différentes, positionnées en absolute, avec le positionnement exact que je voulais avoir. Essaie de faire la même chose de ton côté.

  6. Bonjour et bravo pour ce tutorial indispensable.
    J’ai cependant besoin d’aide… Pour le bouton tweet à placer dans single.php permettant de twitter les articles, je n’arrive pas à avoir simplement le bouton “tout seul et propre” mais j’ai une vilaine URL apparente à gauche du bouton… j’ai recopié et recommencé plein de fois sans succès….
    Une idée de mon erreur ?
    Merci de votre aide
    Anne

    • Etrange. Je n’ai pas vraiment d’idée sur ce qui pourrait poser le problème, mais vous pourriez essayer d’ajouter le bouton manuellement.

      – Ajoutez le code dans votre fichier functions.php comme je le précise
      – Dans votre fichier single.php, ajoutez le code suivant seulement: http://pastebin.com/CYjqRttx

      Dites-moi si cela fonctionne !

  7. D’abord merci pour votre réactivité. Je cherche depuis des heures et vous me libérez de l’un de mes problèmes. Donc c’est formidable car le bouton est nickel et marche très bien. En revanche le petit drapeau avec les numéros affiche zéro alors qu’avant il me semble qu’il affichait le nombre de tweets de mon compte ? Merci encore

    • Dans ce cas, peut être avez-vous un problème avec votre bouton. Pour le vérifier, allez sur la page http://twitter.com/goodies/tweetbutton, dans l’onglet URL, remplissez avec l’URL d’une de vos pages. L’aperçu du bouton se mettra a jour avec le nombre de tweets pour cette URL. Si le nombre est différent de celui affiché par le bouton sur votre site, il y a un problème avec le bouton sur votre site.
      Si c’est le cas, je ne pourrai vous aider qu’en connaissant un URL pour tester et debugguer.

  8. Ok so I am thinking about removing my website from Tumbler and get it to a WordPress site. I believe this is a WordPress blog right? If it is, may I ask where you got the theme? Thanks a bunch!

  9. Bonjour,

    J’ai inséré le code dans la page functions.php mais ça a tout fait planté.
    Pouvez vous m’indiquer comment faire pour revenir en arrière?
    Merci beaucoup!

    • Vous devriez pouvoir revenir en arrière en effacant le code que vous avez rajouté.

      Si ce code cree des erreurs sur votre site, c’est surement parce qu’il est insere au mauvais endroit dans votre fichier functions.php. Essayez une nouvelle fois, ou bien inserez ce code dans un petit plugin.

Comments are closed.