[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 929
    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
Ajouter des lignes de rich snippet - KK Star Référencement Google 31 Mars 2020
WordPress Comment ajouter le CDN Cloudflare sur son site WP ? Administration d'un site Web 6 Février 2020
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020
Ajouter un texte sur une carte Google Maps (JS) Développement d'un site Web ou d'une appli mobile 15 Janvier 2020
Ajouter style="display: block;" dans une div Développement d'un site Web ou d'une appli mobile 8 Janvier 2020
Ajouter les Rich Snippets sur Prestashop Débuter en référencement 28 Novembre 2019
Comment ajouter une page Facebook en tant que co-organisateur ? Facebook 22 Octobre 2019
Ajouter compte GA + ID de suivi existants Google Analytics 21 Octobre 2019
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice