On m'a demandé plusieurs fois quel plugin WordPress j'utilisais pour générer la liste "Flux Twitter" dans le pied de page de mon site. En fait, je n'utilise aucun plugin, c'est un extrait de Javascript de Twitter qui affiche une liste de mes tweets récents que j'ai stylisé avec du CSS. Dans ce tutoriel, je vais vous montrer :
- Le code HTML et Javascript nécessaire pour récupérer les derniers tweets
- Un aperçu du balisage HTML et des sélecteurs CSS associés
- Deux exemples de widgets Twitter personnalisés que j'ai moi-même utilisés
Lisez la suite pour voir le reste du tutoriel...
Le HTML et le Javascript
Twitter fournissait autrefois ce code sur son site, mais pour une raison quelconque, il l'a supprimé au profit de ces widgets beaucoup moins flexibles. Vous aurez besoin de deux morceaux de code.
Tout d'abord, placez le code suivant là où vous souhaitez que la liste apparaisse :
<ul id="twitter_update_list"><li>Twitter feed loading</li></ul>Remarque : Le <li>Flux Twitter en cours de chargement</li> ne fait pas partie du code original fourni par Twitter, mais il est requis pour que le HTML soit valide. Il peut également fournir un message utile pendant le chargement du flux, car cela peut prendre quelques secondes par une journée lente.
Deuxièmement, vous devrez placer les lignes de Javascript suivantes aussi près que possible de la balise </body>.
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>J'ai actuellement ce code juste au-dessus de mon code Google Analytics. Vous devriez garder ces lignes de Javascript aussi bas que possible sur la page, car si Twitter ne se charge pas, tout ce qui se trouve en dessous de ce code sera bloqué (ce qui n'est pas très grave s'il est déjà en bas).
Aperçu du balisage HTML et des sélecteurs CSS
Maintenant, vous ne pouvez pas voir le balisage HTML que le widget Twitter génère sans utiliser quelque chose comme la barre d'outils de développement Web. Heureusement pour vous, je l'ai fait pour vous. Voici un exemple de liste avec un seul tweet.
<ul id="twitter_update_list">
<li><span>RT @<a href="http://twitter.com/Screenr">Screenr</a>: Cool Screenr update: Now your screencasts publish twice as fast. <a href="http://screenr.com/aDp">http://screenr.com/aDp</a></span> <a style="font-size: 85%;" href="http://twitter.com/themelab/statuses/14229492866">46 minutes ago</a></li>
</ul>#twitter_update_list– Sélectionne la liste entière#twitter_update_list li– Sélectionne les éléments de liste individuels#twitter_update_list li span– Sélectionne la partie « tweet » de l’élément de liste, pas le lien « il y a X temps ».#twitter_update_list li span a– Sélectionne le lien dans la partie « tweet » de l’élément de liste.#twitter_update_list a[style="font-size: 85%;"]– Sélectionne le lien « il y a X temps », d’une manière un peu astucieuse (voir la note ci-dessous).
Note : Comme il y a un style en ligne dans le lien « il y a X temps » qui définit la taille de la police à 85 %, il est quelque peu difficile de le remplacer sans un code astucieux. Je l’ai déjà utilisé pour réinitialiser la taille de la police à celle du reste de la liste :
#twitter_update_list a[style="font-size: 85%;"] { font-size: 1em !important; }Cela ne fonctionne probablement pas dans les premières versions d’IE à cause de la partie « !important ». Vous pouvez également utiliser display: block; pour déplacer ce lien à la ligne suivante.
Exemple en direct
Pour un exemple en direct, consultez le pied de page de Theme Lab. Ou si vous lisez ceci dans votre lecteur de flux ou un site de scraping non autorisé, consultez la capture d'écran ci-dessous.
Voici le code que j’utilise pour la liste :
#twitter_update_list {
font-size: 13px;
line-height: 21px;
list-style: none;
}
#twitter_update_list li {
background: url('images/twitter-divider.gif') bottom left repeat-x;
padding-bottom: 7px;
margin-bottom: 9px;
}
#twitter_update_list span, #twitter_update_list span a {
color: #ababab;
text-decoration: none;
}
#twitter_update_list a {
color: #6f7276;
}- La première ligne sélectionne la liste entière. Elle définit la taille de la police, la hauteur de ligne et s’assure qu’aucun point de puce n’apparaît.
- La deuxième ligne fait répéter une petite image de 2×1 sous chaque élément de liste comme une sorte de séparateur. Le rembourrage définit l’espace entre le tweet et le bord supérieur du séparateur. La marge définit l’espace entre le bord inférieur du séparateur et le tweet suivant.
- La troisième ligne définit la couleur du tweet, y compris les liens, et s’assure qu’aucune ligne n’apparaît sous les liens.
- La dernière ligne définit la couleur du lien « il y a X temps ».
Et voilà ! Si je devais changer une chose, je différencierais d’une manière ou d’une autre les liens dans le tweet, et j’ajouterais peut-être des effets de survol sur les liens également.
Ceci peut être utilisé sur n'importe quel site
Contrairement à tous les autres articles comment faire XYZ sans plugin, aucun code WordPress réel n'est utilisé dans ce tutoriel.
Comme cela n'utilise aucun code WordPress, il n'est pas classé dans la collection Tutoriels WordPress. Il peut être utilisé sur à peu près n'importe quel type de site, en supposant que vous puissiez modifier le code source HTML et CSS.
Si vous souhaitez l'utiliser dans WordPress, je vous suggère de modifier manuellement les fichiers de votre thème pour insérer les deux lignes de Javascript dans le pied de page de votre site, ou même de l'accrocher à votre hook wp_footer().
Quant au widget lui-même, vous pouvez soit coller le code dans un widget texte, soit le coder manuellement dans votre barre latérale (ou ailleurs).
Conclusion
J'espère que vous avez tous aimé le tutoriel, j'adorerais connaître vos réflexions dans les commentaires. Si vous avez des demandes de conseils rapides sur WordPress ou CSS, n'hésitez pas à me le faire savoir. Cela pourrait être présenté dans un futur article Tutorial Tuesday sur Theme Lab !
Tutoriel génial. Merci.
Pouvez-vous me dire comment faire en sorte que le lien « il y a » soit en bas à droite, loin du texte, comme vous l'avez sur votre site web.
Merci beaucoup
S'il y a quelqu'un d'intéressé par la traduction du lien « il y a » dans d'autres langues, je vous dis que je viens de télécharger blogger.js, je l'ai modifié et ça marche.
Vous devez juste traduire les légendes, ne touchez pas au code, voici un exemple.
if (delta < 60) { return 'il y a moins d'une minute'; } else if(delta < 120) { return 'il y a environ une minute'; } else if(delta < (60*60)) { return 'il y a ' + (parseInt(delta / 60)).toString() + ' minutes'; } else if(delta < (120*60)) { return 'il y a environ une heure'; } else if(delta < (24*60*60)) { return 'il y a ' + (parseInt(delta / 3600)).toString() + ' heures'; } else if(delta < (48*60*60)) { return 'il y a un jour'; } else { return 'il y a ' + (parseInt(delta / 86400)).toString() + ' jours'; }
Au fait, merci beaucoup pour le tutoriel, il m'a beaucoup aidé.
Bonjour Leland,
Merci pour votre script ! Je l'ai presque fait fonctionner comme je le voulais… Y a-t-il une chance de corriger la taille de la liste ? Je veux générer la liste dans une cellule, mais quand les tweets dépassent la cellule, la cellule explose !
Fantastique, mais je n'obtiens pas de résultat (.js newbie). Mon site (callumflack.com) affiche simplement "twitter feed loading" sans réellement récupérer le flux Twitter. J'ai tout revérifié dans ce post, mais sans succès. Qu'ai-je manqué ? Votre aide est grandement appréciée.
merci pour ça 🙂 vous pouvez changer les liens dans les tweets en utilisant '#twitter_update list span', puis l'heure des tweets en utilisant '#twitter_update list span a'. de plus, l'utilisation de last-child supprime la ligne horizontale sous le dernier tweet. voir ci-dessous pour mon code.
#twitter_update_list { font-size: 10px; line-height: 15px; list-style: none; }
#twitter_update_list li { background: url(‘images/1px-grey.gif’) bottom left repeat-x; padding-bottom: 10px; margin-bottom: 10px; }
#twitter_update_list li:last-child { background: none; }
#twitter_update_list span { color: #856f6a; text-decoration: none; display: inline; }
#twitter_update_list span a { color: #fb3898; display: inline; }
#twitter_update_list a { color: #b3a39f; display: block; }
Ne t'inquiète pas, j'ai trouvé. C'est ça :
http://api.twitter.com/1/favorites.json?screen_name=USERNAME&callback=twitterCallback2&count=5
Merci pour ça. Pour ceux qui ont demandé...
Vous pouvez changer cela en une liste en changeant la première partie de l'URL dans le deuxième script à partir de :
http://twitter.com/statuses/user_timeline/USERNAME.json?
en
http://api.twitter.com/1/USERNAME/lists/LISTNAME/statuses.json?
Salut,
Bon tutoriel. Cependant, mon site a commencé à afficher 3 tweets, maintenant c'est très sporadique et parfois il décide d'en afficher 2 ou 1.
Suis-je en train de faire l'idiot ici ?
Rob
C'est une bonne question. J'ai remarqué que lorsque vous retweetez (dans le style officiel de Twitter), cela ne s'affiche pas, et au lieu de cela, il affiche simplement un tweet de moins.
Je déteste vraiment l'apparence des flux Twitter officiels, j'étais donc ravi de trouver votre site. Le tutoriel était très instructif et facile à suivre, et j'ai hâte de l'intégrer à la refonte de mon site web.
Excellent article.
J'ai juste dû modifier le & top & pour que le HTML soit validé.
Beau travail !
Je sais que cela a été publié il y a un moment, mais y a-t-il un moyen de séparer le tweet le plus récent des tweets précédents afin de pouvoir y mettre une étiquette comme "Dernier Tweet" et "Tweets plus anciens" ?
J'adore ça ! Y a-t-il un moyen de forcer les liens dans chaque tweet à s'ouvrir dans une nouvelle fenêtre ?
Je ne suis pas sûr de l'endroit où chaque morceau de code va dans mon site wp – pouvez-vous confirmer...
1ère partie – où je veux le flux (par exemple, widget de texte) ?
2ème partie – feuille de style ?
3ème partie – ?
4ème partie – ?
5ème partie – ?
Merci d'avance
Je me sens stupide… Mais… Où écrit-on le nom d'utilisateur ??? Je ne comprends pas… Si je copie/colle, ça ne marche pas…
C'est un chouette petit widget. Une remarque – si vous ajoutiez un « position: relative; » à l'élément HTML qui a le « overflow: auto; » dessus, vous corrigerez un bug qui se produisait dans IE7 (en gros, la boîte de défilement ne fonctionnait pas).
Très bon tutoriel, le seul problème avec ceci est (sauf si j'ai mal fait quelque chose), il n'affiche que vos tweets personnels, pas par exemple si vous retweetez quelque chose. Ce qui est dommage :/
Changez simplement
count=3encount=6dans l'extrait de Javascript.Salut,
Je pense que si vous modifiez votre Javascript pour inclure "&include_rts=1" juste après votre nom d'utilisateur, par exemple : http://api.twitter.com/1/statuses/user_timeline.json?screen_name=thelibzter&include_rts=1&callback=twitterCallback2&count=6.
Voici un article que j'ai écrit sur la façon d'inclure les retweets dans le flux Twitter personnalisé – http://icode4you.net/including-retweets-in-your-custom-twitter-feeds.
Salut,
Merci pour votre excellent partage et travail. J'utilise votre méthode Twitter sur ma page d'accueil et j'adore ça.
Pour l'instant, il affiche 3 tweets. Puis-je doubler cela à 6 ?
Merci d'avance !
Cordialement
Xavier
Merci pour cela, c'est EXACTEMENT ce dont j'ai besoin pour mon site web — a fonctionné à merveille !
y a-t-il un moyen d'utiliser ce code avec plusieurs flux Twitter ? disons que je voulais mettre le flux de quelqu'un d'autre juste en dessous du premier sur la même page, comment ferais-je ?
merci.
C'est une très bonne question, mais je ne suis pas sûr que ce soit possible avec cette méthode car le flux est directement lié à un seul nom d'utilisateur.
J'ai l'impression que si vous ajoutiez plusieurs lignes de
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>avec différents noms d'utilisateur, cela le confondrait d'une manière ou d'une autre.Excellent tutoriel. Je cherchais exactement quelque chose comme ça.
Une question, est-il possible avec ce code de changer le flux d'un utilisateur spécifique vers une liste Twitter spécifique ?
Bonne question, bien que, pour autant que je sache, ce code ne fonctionne qu'avec des utilisateurs spécifiques.
Tutoriel vraiment excellent, surtout le hack "il y a de cela". Merci beaucoup de l'avoir posté !
juste ce dont j'ai besoin pour ma refonte. merci pour ça.
Merci beaucoup pour ce conseil simple ! Cela a fonctionné sur un site qui a désactivé Javascript pour une raison quelconque. Il n'affiche pas les graphiques, mais ça marche ! Et les liens (comme twitpic & bit.ly) fonctionnent aussi !
Excellent travail, mon pote !
Fantastiquement utile, merci. Il est intéressant que http://twitter.com/javascripts/blogger.js et autres soient toujours là, sans aucun lien évident depuis twitter.com.
Eh bien, j'espère qu'ils continueront à le supporter pour des raisons de compatibilité pendant un certain temps, beaucoup de gens l'utilisent encore.
Je ne sais pas pourquoi Twitter a supprimé ces widgets de son site Web, mais avant, quand je l'utilisais sur mon site Web Blogger, cela fonctionnait très bien.
Je pense qu'ils l'ont supprimé au profit de leurs widgets plus "marqués", bien que le code qu'ils avaient auparavant (le même code que j'utilise) fonctionne toujours.