[astuce] ajouter un bouton Suivre au widget Twitter

Discussion dans 'Twitter' créé par forty, 7 Juillet 2012.

  1. forty
    forty WRInaute passionné
    Inscrit:
    30 Octobre 2008
    Messages:
    1 928
    J'aime reçus:
    0
    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.
     
Chargement...
Similar Threads - [astuce] ajouter bouton Forum Date
[astuce] pour afficher les numéros dans les résultats de Google Référencement Google 27 Juin 2017
[Astuce]Comment gagner des liens? Débuter en référencement 28 Janvier 2012
Comment ajouter une URL en japonais dans Blogger ? Gmail, Google Talk, Blogger et Orkut 28 Novembre 2021
Quelle solutions pour ajouter un annuaire de membre Développement d'un site Web ou d'une appli mobile 21 Septembre 2021
Linkedin : comment ajouter une URL sur une image ? Autres réseaux sociaux 1 Juin 2021
Ajouter des liens externes : bonne pratique SEO ? Rédaction web et référencement 27 Avril 2021
Protection de site web : quel code ajouter dans htaccess ? URL Rewriting et .htaccess 5 Mars 2021
Comment ajouter un blog pour le SEO sur un site statique ? Demandes d'avis et de conseils sur vos sites 20 Janvier 2021
Ajouter des liens internes sitewide en cloaking Netlinking, backlinks, liens et redirections 2 Décembre 2020
Ajouter des lignes de rich snippet - KK Star Référencement Google 31 Mars 2020