[astuce] ajouter un bouton Suivre au widget Twitter

Bonjour à tous,

Voici une petite astuce pour ceux qui utilisent le widget Twitter qui affiche les derniers tweets d'un profil par exemple (disponible ici https://twitter.com/about/resources/widgets). En effet il affiche dans le footer un lien vers votre profil avec comme ancre "Join the conversation". Il suffit de pas grand chose pour le transformer en un bouton follow incitant à vous suivre.

La JS documenté du widget (http://twitter.com/javascripts/widgets/widget.js) indique en effet un paramètre "footer" avec comme exemple :

Code:

footer: "Follow me",

On a donc un lien vers le profil et une ancre de ce lien personnalisable. Pour le transformer en bouton follow il suffit qu'il ait comme class "twitter-follow-button" plus d'autre attributs comme indiqué ici -https://twitter.com/about/resources/buttons#follow.

Voici le code correspondant (jQuery) :

Code:

// à vous d'adapter les paramètres en fonction de votre besoin
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 250,
  height: 300,
  'footer': 'Suivre @votre_compte_twitter',
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('votre_compte_twitter').start();

// transforme le lien vers page twitter en bouton follow
// avec un délai (200ms) et plusieurs essais (limité à 10) car le lien n'est pas ajouté tout de suite après l'instruction ci-dessus
setTimeout(function(){AddFollowButton(10)}, 200);

function AddFollowButton(repetitions) {
	if ($('.twtr-join-conv').length == 0) { // le widget n'est pas encore terminé d'initialiser
		if (repetitions) {
			setTimeout(function(){AddFollowButton(repetitions - 1)}, 100);
		}
	} else { // le lien est bien présent
		$('.twtr-join-conv').attr('data-show-count', 'true'); // ajoute le paramètre pour avoir le nombre de followers
		$('.twtr-join-conv').attr('data-align', 'right'); // aligne le bouton à droite
		$('.twtr-join-conv').attr('data-lang', 'fr'); // en français
		$('.twtr-join-conv').addClass("twitter-follow-button"); // ajoute la class indiquant que c'est un bouton follow
		if (typeof twttr == UNDEFINED) {
			!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); // code JS donné ici -https://twitter.com/about/resources/buttons#follow
		} else { // le fichier widgets.js est déjà chargé, il suffit de relancé la fonction de transformation
			twttr.widgets.load();
		}
	}
}

Il ne faut pas oublier de remplacer "votre_compte_twitter" pour votre compte twitter.

Pour ceux qui veulent voir ce que ca donne il suffit de survoler l'icone Twitter sur mon www en haut après le bouton Contact.

En complément, il y a aussi un paramètre "id" qui permet de charger ce widget en asynchrone (voir http://od-eon.com/blogs/stefan/asynchronous-loading-twitter-widgets/). Visiblement ca ne marche pas très bien sur IE car une partie du CSS n'est pas chargée.