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; }

Dans le même registre :

1. Synchroniser ses comptes Twitter et Facebook avec le Flux RSS de son site internet
2. Le petit dictionnaire du vocabulaire de Twitter
3. Présenter votre profil Twitter de façon différente
4. Classement et Statistique Novembre 2010 – Site web, Utilisateur, Facebook, Twitter …
5. Script Php – Mise à jour automatique du Flux RSS depuis votre Base de données