Twitter sur mon site !? [Résolu/Fermé]

Signaler
-
 jobNash -
Bonjour,


Je viens chercher votre aide car je souhaite intégrer mes derniers Tweets sur mon site Internet d'une façon assez particulière.
J'ai cherché sur pas mal de forums mais aucune solution à su me satisfaire.

Mon site se trouve à l'adresse suivante :

http://www.aurelienhamel.fr


L'intégration est à faire sur la page d'accueil dans l'espace bleuté prévu à cette effet.
A la base, il été question de rendre les Tweets visibles de cette manière !

http://www.aurelienhamel.fr/images/003.png/img

Mais je suis parvenu à ce résultat qu'avec un seul développeur qui m'a lâché par la suite... donc deux solutions sont possibles.
Soit un gentil développeur m'aide à mettre en place ce même système Tweets + phrase en bas à droite (temps + retweet), soit je me résous à proposer mes Tweets sous forme de phrases simples mais là encore j'ai aucune idée de la procédure à employer pour y parvenir.

C'est pourquoi j'ai besoin de vos connaissances en programmation (ce qui n'est pas mon cas) pour parvenir à un des deux résultats ci-dessus.

Merci à vous ! :)

8 réponses

Messages postés
5434
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
29 octobre 2020
911
Bravo DKProject !

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
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

Le truc c'est que j'ai essayé en le mettant soit en lien vers mon serveur (fichier dans le dossier /js) ou soit en collant le texte directement sur le fichier HTML mais du coup une fois que j'actualise, plus rien.
http://integrate-tweets.fr/
Messages postés
5434
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
29 octobre 2020
911
Salut,

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
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

Messages postés
5434
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
29 octobre 2020
911
Aussi, tu peux mettre :

<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
Ok,

Je viens de remplacer le lien et le "\" mais toujours pas de Twitter en vue ! ^^
Messages postés
5434
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
29 octobre 2020
911
il y a toujours une erreur :

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
Oui, c'est bon ça marche ! ;)

Merci !
Personne ?
Messages postés
5434
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
29 octobre 2020
911
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
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.
Messages postés
5434
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
29 octobre 2020
911
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
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... ^^
Messages postés
5434
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
29 octobre 2020
911
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
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.
http://www.integrate-tweets.fr/