[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 901
    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
[astuce] l'url Rewriting et .htaccess pour FREE.FR URL Rewriting et .htaccess 3 Octobre 2006
[Astuce] Virtual Hosts et Développement Développement d'un site Web ou d'une appli mobile 18 Octobre 2005
[Astuce] Connaître rapidement le nombre de pages indexées Référencement Google 19 Mai 2005
WordPress rajouter le nom de domaine dans le permalien Débuter en référencement 4 Septembre 2022
WordPress ajouter des mots clé avec YOAST SEO Débuter en référencement 28 Août 2022
Ajouter sur la search console un blog créé sur like-blogs.com Crawl et indexation Google, sitemaps 23 Août 2022
Ajouter des liens sortants externes pour améliorer le référencement Netlinking, backlinks, liens et redirections 2 Mai 2022
Comment ajouter le tag GA4 sur 7000 fichiers ? Google Analytics 10 Avril 2022
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
WordPress Comment ajouter le CDN Cloudflare sur son site WP ? Administration d'un site Web 6 Février 2020