1. ⭐⭐⭐ Grosse PROMO en cours sur ma plateforme SEO My Ranking Metrics
    Rejeter la notice

[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 931
    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
[Astuce] Bannir les escrocs: interdire les visiteurs de certains pays Administration d'un site Web 27 Juin 2009
Ajouter un if après un premier if très différent Développement d'un site Web ou d'une appli mobile 13 Juin 2019
Comment ajouter un lien canonique ? Débuter en référencement 31 Janvier 2019
Gestion SEA, quelles clauses de CGV ajouter ? Droit du web (juridique, fiscalité...) 5 Juin 2018
Ajouter "Toutes les campagnes" à un rapport rapport personnalisé Google Analytics 21 Mai 2018
Faut il ajouter toutes les variantes a la GG search console Débuter en référencement 23 Mars 2018
Ajouter un url au sitemap Débuter en référencement 14 Décembre 2017
Comment ajouter un établissement aux centres d'intérêts des gps ? Noms de domaine et référencement 7 Décembre 2017
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice