JumpTop

[TUTO] Mettre en place un widget Twitter avec vos derniers Tweets

Vous êtes beaucoup à avoir un compte Twitter, ce qui est normal car de nos jours il est difficile de passer à côté de ce réseau social qui prend de l’ampleur tous les jours. Je vais vous expliquer comment mettre en place un widget avec vos derniers tweets. Vous pourrez le modifier comme vous voulez par la suite, car la source de mon fichier est en téléchargement à la fin de l’article. Dans la source de téléchargement, il y a deux exemples à télécharger, une version en 250px et une autre en 150px.

Le code

Le code qui suit est à mettre à l’endroit ou vous souhaitez voir apparaître le widget en question, et une autre partie de ce code est destinée à aller dans le « head ».
Que devez-vous modifier dans ce code ?
1 – Dans la partie Twitter, il faut modifier « monpseudotwitter » et mettre votre pseudo.
2 –  » &count=2  » vous pouvez modifier le chiffre, qui correspond au nombre de tweets.
3 – Dans la « div bottom », il faut également mettre votre pseudo Twitter.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Widget pour timeline twitter</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
 
<body>
    <!-- DEBUT CONTENU -->
    <div id="container">
 
        <ul id="twitter_update_list"></ul>
 
        <div id="bottom">
            <a href="http://www.twitter.com/johnsgraphisme">
                <img src="images/follow.png" alt="follow me" class="follow-me" />
            </a>
        </div>
 
        <!-- TWITTER -->
        <script src="twitter.js" type="text/javascript"></script>
        <script src="http://twitter.com/statuses/user_timeline/monpseudotwitter.json?callback=twitterCallback&amp;count=2" type="text/javascript"></script>
        <!-- FIN TWITTER -->
    </div>
    <!-- FIN CONTENU -->
</body>

Le CSS

Le CSS en dessous correspond à la version 150px.

body {margin:0px;font-family:georgia;line-height:18px;font-size:10px;}
#container {width:150px;margin:0 auto;}
a img {border:none;}
a { outline:none;}
 
ul#twitter_update_list {width:150px;background:url('images/haut.png') no-repeat top left;margin:0 auto;padding:139px 32px 0 0;}
ul#twitter_update_list li {list-style-type:none;background:#3399CC;padding:7px 10px;color:#104663;}
ul#twitter_update_list .divisor {height:1px;background:#35A3DB;border-bottom:1px solid #2B8CBD;margin:0.75em 0.75em 0 0.75em;}
ul#twitter_update_list .data {color:#ADD47A;}
ul#twitter_update_list .data:before {content:">>";}
ul#twitter_update_list .data:after {content:"";}
ul#twitter_update_list a:link, ul#twitter_update_list a:visited {color:#FFF;text-decoration:none;}
ul#twitter_update_list a:hover, ul#twitter_update_list a:active {color:#FFF;text-decoration:underline;}
#bottom {width:150px;height:44px;background:url('images/bas.png') no-repeat top left;margin:0 auto;padding:0px 32px 0 0;}
img.follow-me {
	margin:0 0 0px 0px;
}

Il faut enregistrer ce fichier sous « style.css » et mettre en place les différents fichiers (y compris le twitter.js présent dans la source) et images sur votre serveur. Le CSS n’est pas bien compliqué à comprendre, mais si vous avez la moindre questions, n’hésitez pas.

DEMO 150px: Widget-Twitter
DEMO 250px: Widget-Twitter
TELECHARGER LA SOURCE : Widget-twitter.zip






L'auteur de l'article
, Directeur Artistique, Webdesigner. Vous pouvez voir mes travaux sur mon folio, ou me suivre sur mon Twitter.



39 commentaires

  1. 1 whatsmynameNo Gravatar dit :
    10 mai 2010 à 16:08

    Thanks mister john’s ^^v

  2. 2 whatsmynameNo Gravatar dit :
    10 mai 2010 à 16:40

    petit probleme j’ai beau changé le pseudo twitter + celui du bottom
    ça fait rien tu peux me dire ou est mon erreur
    http://whatsmyname.org/250px/index.html

  3. 3 John's GraphismeNo Gravatar dit :
    10 mai 2010 à 16:45

    @ whatsmyname : Et le fichier twitter.js, tu l’as mis ou ?

  4. 4 whatsmynameNo Gravatar dit :
    10 mai 2010 à 16:47

    j’ai pas touché le twitter.js il est dans le dossier

  5. 5 John's GraphismeNo Gravatar dit :
    10 mai 2010 à 17:02

    @whatsmyname : je ne comprend pas, j’ai fait des tests avec pleins de compte différents, et le seul qui ne fonctionne pas c’est le tien. Tout est ok pour toi du côté de twitter, genre validation de ton adresse mail et tout ?

  6. 6 whatsmynameNo Gravatar dit :
    10 mai 2010 à 17:16

    je suis étonné , je sais pas ! je regarderais sa en details merci quand meme
    john’s

  7. 7 Specialty ChemicalsNo Gravatar dit :
    11 mai 2010 à 9:40

    Ca bug sous IE8, il y a un décalage entre le corps et le bottom…

  8. 8 John's GraphismeNo Gravatar dit :
    11 mai 2010 à 10:50

    @Specialy Chemicals :tu peux me faire un print écran du bug ?

  9. 9 John's GraphismeNo Gravatar dit :
    11 mai 2010 à 11:18

    @Specialy Chemicals : je viens de faire des tests sous IE7 et IE8 et je ne vois pas de bugs .

  10. 10 gregNo Gravatar dit :
    11 mai 2010 à 22:48

    Je fais une petite allergie au widget et javascript quandça bouffe du temps de charge.
    C’est pas bon pour le référencement

  11. 11 John's GraphismeNo Gravatar dit :
    12 mai 2010 à 7:47

    @greg :c’est vrai que le temps de chargement est super important avec google maintenant, et qu’il faut faire attention. Le JS met du temps, mais bcp de monde aime bien ce genre de petite chose ;-)

  12. 12 NicolasNo Gravatar dit :
    22 novembre 2010 à 11:30

    Je suis ton tuto et je me retrouve avec une fenêtre d’authentification à renseigner…

  13. 13 John's GraphismeNo Gravatar dit :
    22 novembre 2010 à 11:48

    @Nicolas : est-ce que tu as essayé de télécharger la source et de tester avec mon code ?

  14. 14 NicolasNo Gravatar dit :
    22 novembre 2010 à 12:14

    oui j’ai testé ton code et il fonctionne, en effectuant les remplacements indiqués dans ton tuto je me retrouve avec cette popup :
    http://img4.hostingpics.net/pics/249371popupjpg.jpg

  15. 15 John's GraphismeNo Gravatar dit :
    22 novembre 2010 à 13:16

    @Nicolas : il faut t’enregistrer ici si mes souvenirs sont bons : http://dev.twitter.com/login?redirect_after_login=%2Fapps%2Fnew ;-)

  16. 16 NicolasNo Gravatar dit :
    22 novembre 2010 à 13:18

    Ok merci pour l’info ainsi que pour la source :-D
    Bonne continuation.

  17. 17 John's GraphismeNo Gravatar dit :
    22 novembre 2010 à 15:01

    @Nicolas : mais de rien, en espérant que ça fonctionne ;-)

  18. 18 ThomasNo Gravatar dit :
    7 décembre 2010 à 16:19

    Salut,
    Je suis sur le site que tu as donné ( dev.twitter), j’ai enregistré mon application (Browser..) mais je sais pas quoi mettre en callback URL pour que sa marche.. Ou il y d’autre paramètre à rentrer sur le site ?

    Merci

  19. 19 John's GraphismeNo Gravatar dit :
    22 décembre 2010 à 11:02

    @Thomas : pour être très honnête ça fait pas mal de temps que j’ai rempli ce formulaire, et je ne me rappel plus exactement tout ce que j’ai mis en terme de contenu :’(

  20. 20 oussama bougnouchNo Gravatar dit :
    19 mars 2011 à 14:19

    bjr mr john g un prob sur mon blog wordpress quand j ajoute widgets text html ca ne marche pas

  21. 21 GallyNo Gravatar dit :
    24 juin 2011 à 18:15

    Ah super ! Je cherchais une façon jolie de présenter mes tweet ! Merci beaucoup c’est 20x mieux que ce que propose twitter ^^

  22. 22 John's GraphismeNo Gravatar dit :
    24 juin 2011 à 18:46

    @oussama : je ne sais pas pourquoi, il faudrait que j’en sache plus afin de répondre à ton soucis.
    @gally : cool, content que ça te fasse plaisir, et que tu es pu mettre en place tes tweets comme tu le voulais.

  23. 23 LecolaNo Gravatar dit :
    23 août 2011 à 14:33

    Chez moi on plus ça ne marche pas! Je suis chez ovh.

  24. 24 John's GraphismeNo Gravatar dit :
    23 août 2011 à 15:06

    @Lecola : qu’est ce qui se passe exactement, a quel moment ça ne fonctionne pas ?

  25. 25 LecolaNo Gravatar dit :
    24 août 2011 à 10:42

    Je n’ai pas d’erreur visible. Cependant rien ne s’affiche! Et ce en essayant plusieurs méthodes (parsing xml, json…). Il n’y a que le widget officiel qui marche chez moi visiblement. Or j’aurais aimé ne récupérer que le texte et non mon avatar ni le fameux « join the conversation ». Voilà plusieurs jours que j’essai, sans succès.

  26. 26 John's GraphismeNo Gravatar dit :
    24 août 2011 à 12:05

    @Lecola : en faisant un copier collé de mon code, juste en modifiant les infos te concernant, il ne se passe rien ? Peut être que ça vient de ton serveur, je ne sais pas, je ne suis pas assez technique pour te dire si c’est le cas.

  27. 27 LecolaNo Gravatar dit :
    24 août 2011 à 12:24

    @John’s Graphisme : si je copie-colle ton code en changeant les infos j’ai seulement le bouton follow-me qui apparait. Je ne comprends pas je suis sûr que ça vient de mon serveur. J’ai un hébergement mutualisé chez ovh or je ne suis pas expert en php/seveur.

  28. 28 LecolaNo Gravatar dit :
    24 août 2011 à 13:31

    En bidouillant le widget de base j’y suis enfin arrivé. Merci en tout cas de ta disponibilité john :)

  29. 29 John's GraphismeNo Gravatar dit :
    24 août 2011 à 14:15

    @Lecola : content que tu y sois arrivé. Et de rien pour la disponibilité quand je peux aider, ça fait plaisir.

  30. 30 ChafNo Gravatar dit :
    19 octobre 2011 à 17:25

    Bonjour et merci pour ton tuto. J’ai beau tester et retester dans tous les sens, en modifiant, ou non, rien n’y fait, cela ne fonctionne qu’avec ton pseudo Twitter. J’en ai tester une bonne quinzaine et aucun ne veut montrer un petit bout de tweet. Tu aurait une solution ?
    Merci :)

  31. 31 ChafNo Gravatar dit :
    19 octobre 2011 à 17:29

    Avec l’adresse c’est toujours mieux :

    http://www.sofreshagency.com/twitter/

  32. 32 AnthonyNo Gravatar dit :
    26 octobre 2011 à 20:27

    Bjr, j’essaye de mettre ce widget sur mon blog. Je n’y connais pas grand chose… Je suis sur typepad et je ne vois pas comment ajouter le bout de code destiné a la balise Head …

  33. 33 John's GraphismeNo Gravatar dit :
    26 octobre 2011 à 22:53

    @Chaf : il faut que tu t’enregistre ici dans un premier temps : https://dev.twitter.com/apps/new
    @Anthony : la balise ‘head’ existe déjà dans ton typepad, il suffit juste d’insérer la ligne de code te permettant de pointer vers ton CSS, c’est tout. C’est du code basique.

  34. 34 Chaf'No Gravatar dit :
    26 octobre 2011 à 22:59

    Merci pour ta réponse, je testerai demain (:

  35. 35 AnthonyNo Gravatar dit :
    2 novembre 2011 à 23:28

    Je suis desolé, je ne comprend pas … Je n’y connais vraiment pas grand chose, je débute. Que dois entrée comme code et ou ?

  36. 36 AnthonyNo Gravatar dit :
    2 novembre 2011 à 23:40

    J’ai mis l’intégralité du code que vous avez mis la haut, j’ai même essayer avec votre pseudo twitter et quoi que je fasse sa m’affiche invariablement FOLLOW ME …

  37. 37 John's GraphismeNo Gravatar dit :
    3 novembre 2011 à 12:37

    @Anthony : tu doit mettre ce code dans le de ton site.

  38. 38 AnthonyNo Gravatar dit :
    5 novembre 2011 à 18:17

    je le met dans un module pour mettre du code html mais rien a faire sa m’affiche obstinément follow me …

  39. 39 John's GraphismeNo Gravatar dit :
    7 novembre 2011 à 12:29

    @Anthony : tu utilises quel CMS ? Car il ne faut pas tout mettre dans le code, il y a une partie de CSS à mettre en place également. Après il faut avoir un minimum de connaissance en dev pour le mettre.

2 trackbacks

  1. Johnsgraphisme sur Blogasty
  2. Mettre en place un widget Twitter, comment ça se passe?