Twitter sur mon site !?
Résolu/Fermé
A voir également:
- Twitter sur mon site !?
- Site de telechargement - Guide
- Twitter inscription - Guide
- Site inaccessible - Guide
- Site de vente entre particulier - Guide
- Changer nom twitter - Guide
8 réponses
[Dal]
Messages postés
6174
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
2 février 2024
1 083
Modifié par [Dal] le 3/02/2012 à 11:25
Modifié par [Dal] le 3/02/2012 à 11:25
Bravo DKProject !
1.
Donc, tu as fait :
Tu peux mettre les appels aux javascript Twitter en dehors du div, c'est mieux. Là ils sont écrasés par l'injection (même si ce n'est pas grave dans ton cas, a priori).
2.
Cet exemple utilise la fonction twitterCallback2 prévue dans blogger.js pour traiter le résultat de l'appel à l'API et l'afficher. Alors si tu veux formater l'affichage, il faut ruser, comme proposé par l'auteur de cette astuce, en créant des styles CSS.
Pour la couleur et l'emplacement, tu dois observer le code html injecté par le blogger.js de Twitter et utiliser des styles CSS adaptés en fonction de ce que tu veux.
blogger.js ajoute quelque chose comme ceci dans le <div id="twitter_update_list"> après lancement de l'API GET statuses/user_timeline de Tweeter :
<div id="twitter_update_list">
<li>
<span>
Un nouveau logo est disponible dans le portfolio et sur mon profil XYZ ! Rendez-vous sur ce lien :
<a href="http://xyz">http://xyz</a>
</span>
<a href="https://twitter.com/MonCOMPTE/statuses/123456789012345678" style="font-size:85%">about 14 hours ago</a>
</li>
</div>
Tu peux par exemple définir dans ton CSS que le bullet point twitter_update_list est aligné à droite, mais que le span dans twitter_update_list doit être considéré comme un bloc séparé et doit être aligné à gauche, et leur affecter des couleurs différentes.
Tu peux faire quelque chose comme cela :
Vois https://www.w3schools.com/cssref/ si tu as un doute sur une propriété CSS ou son usage.
3.
Si tu veux plus de contrôle, tu peux programmer ton propre Callback, en remplacement de celui de blogger.js (vois comment il est fait, et fait le tiens), et tu pourras agencer les éléments retournés par l'appel à l'API comme tu l'entends. Tu devras alors remplacer <script type="text/javascript" src="https://twitter.com/javascripts/blogger.js"> par l'appel à ton propre javascript sur ton serveur (ou mettre le code javascript dans ton source html entre deux balises <script "text/javascript"> et </script>
https://www.w3schools.com/ est aussi une bonne ressource pour le javascript.
Tu vois que tu y arrives :-)
Dal
1.
Donc, tu as fait :
<div id="twitter_update_list"> <script type="text/javascript" src="https://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="https://twitter.com/statuses/user_timeline/MonNomTWITTER.json?callback=twitterCallback2&count=1"></script> </div>
Tu peux mettre les appels aux javascript Twitter en dehors du div, c'est mieux. Là ils sont écrasés par l'injection (même si ce n'est pas grave dans ton cas, a priori).
2.
Cet exemple utilise la fonction twitterCallback2 prévue dans blogger.js pour traiter le résultat de l'appel à l'API et l'afficher. Alors si tu veux formater l'affichage, il faut ruser, comme proposé par l'auteur de cette astuce, en créant des styles CSS.
Pour la couleur et l'emplacement, tu dois observer le code html injecté par le blogger.js de Twitter et utiliser des styles CSS adaptés en fonction de ce que tu veux.
blogger.js ajoute quelque chose comme ceci dans le <div id="twitter_update_list"> après lancement de l'API GET statuses/user_timeline de Tweeter :
<div id="twitter_update_list">
<li>
<span>
Un nouveau logo est disponible dans le portfolio et sur mon profil XYZ ! Rendez-vous sur ce lien :
<a href="http://xyz">http://xyz</a>
</span>
<a href="https://twitter.com/MonCOMPTE/statuses/123456789012345678" style="font-size:85%">about 14 hours ago</a>
</li>
</div>
Tu peux par exemple définir dans ton CSS que le bullet point twitter_update_list est aligné à droite, mais que le span dans twitter_update_list doit être considéré comme un bloc séparé et doit être aligné à gauche, et leur affecter des couleurs différentes.
Tu peux faire quelque chose comme cela :
<style type="text/css">
#twitter_update_list li {
text-align:right;
color:#999;
}
#twitter_update_list span {
display:block;
text-align:left;
color:#CB86A2;
}
</style>
Vois https://www.w3schools.com/cssref/ si tu as un doute sur une propriété CSS ou son usage.
3.
Si tu veux plus de contrôle, tu peux programmer ton propre Callback, en remplacement de celui de blogger.js (vois comment il est fait, et fait le tiens), et tu pourras agencer les éléments retournés par l'appel à l'API comme tu l'entends. Tu devras alors remplacer <script type="text/javascript" src="https://twitter.com/javascripts/blogger.js"> par l'appel à ton propre javascript sur ton serveur (ou mettre le code javascript dans ton source html entre deux balises <script "text/javascript"> et </script>
https://www.w3schools.com/ est aussi une bonne ressource pour le javascript.
Tu vois que tu y arrives :-)
Dal
[Dal]
Messages postés
6174
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
2 février 2024
1 083
Modifié par [Dal] le 3/02/2012 à 14:43
Modifié par [Dal] le 3/02/2012 à 14:43
Salut,
La console javascript donne :
corrige cela en :
Tu as un ' dans la chaine, et comme c'est ton délimiteur de chaîne, tu as créé une erreur de syntaxe. Alternativement tu peux aussi utiliser " pour délimiter les chaînes.
Dal
La console javascript donne :
Erreur : missing ; before statement
Fichier Source : http://www.aurelienhamel.fr/js/Twitter.js
Ligne : 24, Colonne : 27
Code Source :
return 'Il y a moins d'une minute';
corrige cela en :
return 'Il y a moins d\'une minute';
Tu as un ' dans la chaine, et comme c'est ton délimiteur de chaîne, tu as créé une erreur de syntaxe. Alternativement tu peux aussi utiliser " pour délimiter les chaînes.
Dal
[Dal]
Messages postés
6174
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
2 février 2024
1 083
3 févr. 2012 à 16:06
3 févr. 2012 à 16:06
Aussi, tu peux mettre :
au lieu de
Car ton fichier javascript est accessible localement pour ton serveur.
Dal
<script type="text/javascript" src="js/Twitter.js"></script>
au lieu de
<script type="text/javascript" src="http://www.aurelienhamel.fr/js/Twitter.js"></script>
Car ton fichier javascript est accessible localement pour ton serveur.
Dal
[Dal]
Messages postés
6174
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
2 février 2024
1 083
Modifié par [Dal] le 3/02/2012 à 20:01
Modifié par [Dal] le 3/02/2012 à 20:01
il y a toujours une erreur :
tu dois écrire : antislash apostrophe
Cela s'appelle échapper un caractère. Tu veux une apostrophe pour écrire "d'une" dans ta chaîne, mais comme elle est elle-même délimitée par des apostrophes, tu dois indiquer à javascript que cette apostrophe là ne termine pas ta chaîne, mais en fait partie. Donc tu dois écrire "d\'une".
Est-ce clair ?
Dal
Erreur : malformed Unicode character escape sequence
Fichier Source : http://www.aurelienhamel.fr/js/Twitter.js
Ligne : 24, Colonne : 11
Code Source :
return 'Il y a moins d\une minute';
tu dois écrire : antislash apostrophe
Cela s'appelle échapper un caractère. Tu veux une apostrophe pour écrire "d'une" dans ta chaîne, mais comme elle est elle-même délimitée par des apostrophes, tu dois indiquer à javascript que cette apostrophe là ne termine pas ta chaîne, mais en fait partie. Donc tu dois écrire "d\'une".
Est-ce clair ?
Dal
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
[Dal]
Messages postés
6174
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
2 février 2024
1 083
31 janv. 2012 à 16:04
31 janv. 2012 à 16:04
Salut DKProject,
Est-ce que cela :
http://designgala.com/how-to-insert-twitter-updates-in-your-webpage/
... t'aide ?
Twitter fait des widgets tout prêts, utilisables avec les comptes Twitter publics.
Dal
Est-ce que cela :
http://designgala.com/how-to-insert-twitter-updates-in-your-webpage/
... t'aide ?
Twitter fait des widgets tout prêts, utilisables avec les comptes Twitter publics.
Dal
Salut Dal,
Justement je souhait quelque chose de personnalisé comme sur l'image que j'ai mis en ligne :
http://www.aurelienhamel.fr/images/003.png/img
Avec en tout trois éléments, le Twit, la date du Twit et la possibilité de répondre. Enfaite il faudrait trouver le moyen de publier uniquement le Tweet (la phrase) sur le site a chaque mise à jour.
Justement je souhait quelque chose de personnalisé comme sur l'image que j'ai mis en ligne :
http://www.aurelienhamel.fr/images/003.png/img
Avec en tout trois éléments, le Twit, la date du Twit et la possibilité de répondre. Enfaite il faudrait trouver le moyen de publier uniquement le Tweet (la phrase) sur le site a chaque mise à jour.
[Dal]
Messages postés
6174
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
2 février 2024
1 083
1 févr. 2012 à 16:29
1 févr. 2012 à 16:29
Salut DKProject,
Bien sûr, on peut aussi faire cela avec l'API Twitter, Javascript, CSS et faire exactement ce que tu souhaites :-)
La fonction de l'API à utiliser est décrite là :
https://dev.twitter.com/docs/api/1/get/statuses/user_timeline
Dal
Bien sûr, on peut aussi faire cela avec l'API Twitter, Javascript, CSS et faire exactement ce que tu souhaites :-)
La fonction de l'API à utiliser est décrite là :
https://dev.twitter.com/docs/api/1/get/statuses/user_timeline
Dal
J'ai regardé la page mais je dois avouer que je galère à mettre ça où je le souhaite sur mon site... surtout que je ne suis pas programmeur d'origine... ^^
[Dal]
Messages postés
6174
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
2 février 2024
1 083
2 févr. 2012 à 12:35
2 févr. 2012 à 12:35
Salut DKProject,
Ma conception de mes interventions sur CCM est d'aider les gens à s'aider eux-mêmes. C'est comme cela que l'on apprend. La programmation, cela s'apprend :-), que l'on soit "programmeur d'origine" ou pas.
Avec les informations que je t'ai données, tu pourrais rechercher et adapter des codes existants (qui sont disponibles à profusion sur Internet montrant comment utiliser l'API GET statuses/user_timeline de Tweeter).
Comme, par exemple : https://www.webdesigndev.com/how-to-display-your-last-tweet-using-javascript-and-the-twitter-api/ et voir comment est fait l'encart "Twitter Updates" sur la page d'accueil https://www.webdesigndev.com/
Dal
Ma conception de mes interventions sur CCM est d'aider les gens à s'aider eux-mêmes. C'est comme cela que l'on apprend. La programmation, cela s'apprend :-), que l'on soit "programmeur d'origine" ou pas.
Avec les informations que je t'ai données, tu pourrais rechercher et adapter des codes existants (qui sont disponibles à profusion sur Internet montrant comment utiliser l'API GET statuses/user_timeline de Tweeter).
Comme, par exemple : https://www.webdesigndev.com/how-to-display-your-last-tweet-using-javascript-and-the-twitter-api/ et voir comment est fait l'encart "Twitter Updates" sur la page d'accueil https://www.webdesigndev.com/
Dal
Oui, j'ai réussi à mettre ça en place.
Par contre, en ce qui concerne la date de publication du Tweet, je ne vois pas comment changer l'emplacement et la couleur.
De plus, j'ai essayé de reprendre le fichier javascript sur le site Twitter pour le changer et mettre les textes en Français mais une fois tous mis en place, rien.
Par contre, en ce qui concerne la date de publication du Tweet, je ne vois pas comment changer l'emplacement et la couleur.
De plus, j'ai essayé de reprendre le fichier javascript sur le site Twitter pour le changer et mettre les textes en Français mais une fois tous mis en place, rien.
3 févr. 2012 à 14:03
7 juil. 2012 à 23:13