Accueil > > > AFFICHE SOBREMENT LES TWEET (SELON RECHERCHE)
AFFICHE SOBREMENT LES TWEET (SELON RECHERCHE)
Information sur la source
Description
Organisant une soirée entre geek il m'est venu l'idée de projeter en grand sur un mur les tweet concernant la soirée (et ainsi avoir une conversation parallèle online/IRL). Se script JavaScript fait tous les x secondes (ici 5sec) une recherche sur search.twitter.com (uniquement les profils twitter publique) selon une requête souhaitée (ici 'AndroidParty+OR+from:AndroidPartyBe&rpp=4' signifie les 4 derniers tweet contant 'androidparty'; ou ayant été envoyés depuis le compte '@AndroidPartyBe') 2 petites subtilités : - Nous avions des sponsors et affichions environs une fois sur dix un printscreen de leur site - Si le tweet contient une photo hébergée sur twitpic, celle-ci est affichée en grand.
Source
- <!DOCTYPE html>
- <html>
- <head>
- <title>On Air!</title>
- </head>
- <body bgcolor='black'>
-
- <center>
- <DIV id='tweet' style='color:white;font-family: arial, helvetica, sans-serif ; font-size: 34pt ;'></DIV>
- </center>
-
- <script>
- function twitterSearch(obj) {
- var tDiv = document.getElementById("tweet"); //quel Div est le conteneur
- var pub=false; //affiche aussi des images de 'pub' a l'occasion
- var frequencePub=0.9; //0.9 signifie qu'un fois sur 10 cela affichera une pub
- var nbrImg=27; //le nombre d'images dans le répertoire 'img/' (affiche de 0.jpg à 9999.jpg si nbrImg=9999)
-
- var x = Math.random();
- if (pub && x>frequencePub) {
- tDiv.innerHTML="<center><font size=15>They help us</font><br><img src='img/"+Math.floor(Math.random()*nbrImg)+".jpg' /></center>";
- } else {
- var varstr= "";
- var user, tweet, postedAt, icon, userURL;
- for (i=0;i<obj.results.length;i++) {
- icon = obj.results[i].profile_image_url;
- user = obj.results[i].from_user;
- userURL = "http://twitter.com/"+user;
- tweet = obj.results[i].text;
- postedAt = obj.results[i].created_at;
- varstr +="<tr><td><img height='144px' width='144px' src="+icon+" /></td>";
- varstr +="<td><b>@"+user+"</b>: "+tweet+"</td></tr>";
-
- //Si on detecte un twitpic, on l'affiche
- var lemot = "http://twitpic.com/[a-zA-Z0-9]+";
- var exp=new RegExp(lemot,"g");
- if ( ar = exp.exec(tweet) ) {
- var reg=new RegExp("http://twitpic.com/", "g");
- var chaine = ar[0].replace(reg,"http://twitpic.com/show/full/")
- varstr +="<tr><td colspan=2><center><img src="+chaine+" /></center></td></tr>";
- }
- }
- tDiv.innerHTML="<center><table>"+varstr+"</table></center>";
- }
- }
- function twitter() {
- var request='AndroidParty+OR+from:AndroidPartyBe&rpp=4'; //faire sa requete sur http://search.twitter.com/advanced et copier l'URL
- //Pour un affichage en 1024x768 (plein écran), mettre '&rpp=4' ce qui affiche 4 tweet à la fois
- var twitterJSON = document.createElement("script");
- twitterJSON.type="text/javascript"
- twitterJSON.src="http://search.twitter.com/search.json?callback=twitterSearch&q="+request;
- document.getElementsByTagName("head")[0].appendChild(twitterJSON);
- return false;
- }
-
- var interval=5000; //5000 = update tt les 6sec
- //Lance le script tt les 'interval',
- setInterval('twitter()',interval);
- //et le lance une 1er fois pour ne pas devoir attendre 'interval' une première fois
- twitter();
- </script>
-
- </body>
- </html>
<!DOCTYPE html>
<html>
<head>
<title>On Air!</title>
</head>
<body bgcolor='black'>
<center>
<DIV id='tweet' style='color:white;font-family: arial, helvetica, sans-serif ; font-size: 34pt ;'></DIV>
</center>
<script>
function twitterSearch(obj) {
var tDiv = document.getElementById("tweet"); //quel Div est le conteneur
var pub=false; //affiche aussi des images de 'pub' a l'occasion
var frequencePub=0.9; //0.9 signifie qu'un fois sur 10 cela affichera une pub
var nbrImg=27; //le nombre d'images dans le répertoire 'img/' (affiche de 0.jpg à 9999.jpg si nbrImg=9999)
var x = Math.random();
if (pub && x>frequencePub) {
tDiv.innerHTML="<center><font size=15>They help us</font><br><img src='img/"+Math.floor(Math.random()*nbrImg)+".jpg' /></center>";
} else {
var varstr= "";
var user, tweet, postedAt, icon, userURL;
for (i=0;i<obj.results.length;i++) {
icon = obj.results[i].profile_image_url;
user = obj.results[i].from_user;
userURL = "http://twitter.com/"+user;
tweet = obj.results[i].text;
postedAt = obj.results[i].created_at;
varstr +="<tr><td><img height='144px' width='144px' src="+icon+" /></td>";
varstr +="<td><b>@"+user+"</b>: "+tweet+"</td></tr>";
//Si on detecte un twitpic, on l'affiche
var lemot = "http://twitpic.com/[a-zA-Z0-9]+";
var exp=new RegExp(lemot,"g");
if ( ar = exp.exec(tweet) ) {
var reg=new RegExp("http://twitpic.com/", "g");
var chaine = ar[0].replace(reg,"http://twitpic.com/show/full/")
varstr +="<tr><td colspan=2><center><img src="+chaine+" /></center></td></tr>";
}
}
tDiv.innerHTML="<center><table>"+varstr+"</table></center>";
}
}
function twitter() {
var request='AndroidParty+OR+from:AndroidPartyBe&rpp=4'; //faire sa requete sur http://search.twitter.com/advanced et copier l'URL
//Pour un affichage en 1024x768 (plein écran), mettre '&rpp=4' ce qui affiche 4 tweet à la fois
var twitterJSON = document.createElement("script");
twitterJSON.type="text/javascript"
twitterJSON.src="http://search.twitter.com/search.json?callback=twitterSearch&q="+request;
document.getElementsByTagName("head")[0].appendChild(twitterJSON);
return false;
}
var interval=5000; //5000 = update tt les 6sec
//Lance le script tt les 'interval',
setInterval('twitter()',interval);
//et le lance une 1er fois pour ne pas devoir attendre 'interval' une première fois
twitter();
</script>
</body>
</html>
Conclusion
Ce n'est pas très fancy et c'est codé en 10minutes, mais cela pourrait être une base pour vos développements futurs.
Historique
- 25 juin 2009 12:15:32 :
- correction
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
cadre connexion comme twitter ? [ par dodwan ]
Bonjour à tous J'aurai besoin d'aide pour faire quelque chose de similaire à http://twitter.com/ en haut à droite, pouvoir cliquer sur connexion puis
api anywhere de twitter [ par coach872 ]
bonjour, dans le cadre de mon pfe J'utilisé Twitter Anywhere pour la réalisation d'un portail web sous twitter, j'ai débuté par comprendre l'API anyw
|
Derniers Blogs
[WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|