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

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

Article du même thême : ..

  • Konia_lover

    Comment je fais pour supprimer le logo Twitter et mon pseudo ?

    • http://41mag.fr kikukaya

      As-tu accès au feuille de style ? fichier CSS

      • Konia_lover

        non

        • http://41mag.fr 41Mag

          Cela ne sera pas possible sans avoir accès au fichier CSS.

  • Earls18

    Est e que l’on peux changer la taille du texte??

    • http://41mag.fr 41Mag

      oui sans problème, grâce au CSS

  • Pingback: Twitter : Comment envoyer automatiquement une réponse de bienvenue en DM à vos followers

  • georges

    Bonjour, j’essaye d’intégrer le widget dans mon code html… ça fonctionne et le widget s’affiche, mais lorsque je veux modifier la position du widget dans le css, rien ne se fait (je modifie la balise script à la quelle j’ai donné un id)… Est-ce que quelque chose m’a échappé?

    • http://41mag.fr 41Mag

      Dur de te répondre comme ça cher Georges,

      Peut tu indiquer les modifications que tu as apportées ?

    • http://41mag.fr 41Mag

      Dur de te répondre comme ça cher Georges,

      Peut tu indiquer les modifications que tu as apportées ?

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.