41Mag - Comment inserer son flux Twitter dans un site internet ou blog ?

Dans le but d’être toujours plus visible et donc potentiellement plus lus, je vais vous expliquer comment intégrer un flux Twitter sur votre site internet. Nous allons générer puis inserer un script – morceau de code – dans les pages de votre site. Rassurer-vous, il n’y a rien de compliqué. Ainsi, vos visiteurs pourront jeter un œil sur vos tweets directement depuis votre site internet. Bien qu’il existe des plug-in prêt à l’emploi pour certain CMS (Tel WordPress), le but ici sera de généré le code brut à inserer et ainsi a pouvoir être modifier.

Pour commencer nous allons avoir besoin de deux choses essentiels. Un site internet et un compte Twitter … Tout le monde à ca sous la main ? Personne n’est encore perdu ? Alors continuons. La première tâche sera de se rendre sur le site de Twitter.

Une fois la page Twitter chargé, cliquez sur « goodies », en bas de celle-ci puis sur « widgets » dans la suivante. Selectionnez « Mon site web » dans le menu de gauche (Photo ci-dessous).

Cliquez sur « Widget de profil » afin de générer un script qui listera vos derniers tweets.

Nous voici dans la partie paramétrage de votre affichage. Commencer par renseigner le nom de votre compte Twitter (photo ci-dessous). Continuez sur votre lancé en renseignant ou modifiant les champs des onglets « Préférences », « Apparence » et « Dimension » sans oublier de tester regulierement vos réglages grace au bouton « tester ce reglage » qui vous permetta de visualiser le tout.

Une fois vos réglages effectués, cliquez sur le bouton « Terminer et récupérer le code » afin de générer le script a insérer dans vos pages. Il vous suffit juste de copier / coller le script – ou code – dans les pages de votre site web à l’endroit ou vous souhaitez que la liste de vos tweets apparaissent.

Pour voir un exemple en situation, consultez la page de Mes Tweets. Cela permet à vos visiteurs de se faire une première impression et de peut-être s’abonner. A noter qu’une adresse Twitter est prrécédé d’un arobase afin d’être identifiable facilement. Le 41Mag à comme adresse twitter @creatroyes. N’hésitez pas à nous suivre …

Petite astuce. J’ai décider de faire disparaitre le badge ou logo de mon compte ainsi que le logo twitter et leur lien « rejoignez moi » pour une integration au design du 41Mag plus poussé. Pour ce faire, rien de très compliqué, il vous suffis juste d’appliquer aux deux calques  – symboliser par leur balisage <div> – du header et du footer du widget un attribut supplémentaire permettant de les cacher a leur class CSS.

Le calque du header du widget a pour class twtr-hd. Le calque du footer a quant à lui pour class twtr-ft.

il vous suffit donc de rajouter la ligne de code suivant à votre fichier CSS :

1

.twtr-hd, .twtr-ft { display:none; }

Télécharger l'article au format PDF

Un problème, une suggestion ou une remarque : Poser votre question ou venez en discuter sur notre forum.

Tweeter

Dans le même registre 1 :

1. Twitter : Comment citer et afficher des tweets sur son site ou...
   Grâce à Twitter, il est très simple de citer et afficher un tweet sur son... 
2. Synchroniser ses comptes Twitter et Facebook avec le Flux RSS de...
   Lorsque vous publiez du contenue sur votre site internet, c’est pour être... 
3. Customiser votre Page Facebook : Liste de vos derniers Tweets,...
   Facebook est LE réseau social le plus utilisé en France. Retrouvez vos amis... 
4. Twitter : Comment envoyer automatiquement une réponse de...
   Que ce soit pour des fins commerciales ou tout simplement remercier les personnes... 
5. Google Currents : Comment publier votre blog ou site web
   Google Currents – ou Google Flux – est une alternative à des applications...