Share
En mars 2011, le nombre moyen actuel de «Tweets» que le monde envoie chaque jour est de 140 millions. Ce didacticiel explique comment créer un widget Twitter personnalisé à partir de zéro, à l'aide de l'API Twitter, de Web Intents et de @Anywhere. Utiliser la plate-forme Twitter pour créer un outil amusant et interactif pour votre site Web peut être bénéfique à la fois pour les départements de l'apprentissage et de la promotion.!
Maintenant, commençons!
Ce didacticiel suppose que vous possédez des connaissances CSS et HTML et commence par le balisage de base et le style du widget. Notez que le contenu du widget est situé dans et est créé avec jQuery, Twitter API et PHP.
Suivez Nettuts + et Tuts + sur Twitter
#content .twitterfeed float: left; couleur d'arrière-plan: #fff; largeur: 385px; marge: 10px 0px 30px 10px; bordure: 1px solide # d8d8d8; remplissage: 5px 5px 15px 5px; #content img margin: 5px 0px 0px 10px; #content h3 float: right; couleur: # 000; couleur de fond: # f2f2f2; taille de police: 18px; poids de police: gras; largeur: 235px; remplissage: 10px 5px 10px 10px; marge: 10px 10px 25px 0px; text-shadow: 0 1px 0 #fff; bordure: 1px solide # d8d8d8; #content h3 a text-decoration: none; #content hr width: 90%; hauteur: 1px; arrière-plan: #dfdfdf; bloc de visualisation; bordure: aucune; marge: 20px 0px 20px 18px; #tweet float: none; clarifier les deux; #tweet p margin: 15px 15px 10px 15px; #web_intent margin: 0px 0px 0px 15px; #web_intent a: lien, #web_intent a: visité, #web_intent a: actif margin: 0px 10px 0px 0px #web_intent img margin: 0px 3px 0px 0px; position: relative; en haut: 2px; #web_intent .time margin: 0px 10px 0px 0px; # follow-envatowebdev margin: 0px 10px 0px 75px; .log-button margin: 10px 10px 0px 115px;
Il peut être nécessaire de modifier l'ID #content en fonction de votre thème et de l'emplacement du widget (par exemple, #content, #sidebar, #footer).
Au moment d'écrire ces lignes, la limite Twitter pour les appels d'API non authentifiés est de 150 demandes par heure. Les appels OAuth sont autorisés à 350 demandes par heure et sont mesurés par rapport au oauth_token utilisé dans la demande.
Pour garantir que notre widget Twitter personnalisé ne rencontre pas de problème de limitation du débit de l'API de Twitter, un script PHP "fichier de cache" doit être créé. Ce script récupère les informations de l'API Twitter "GET statuses / user_timeline" et les stocke dans un fichier "TXT" situé dans le répertoire de cache de votre serveur..
Si vous ne disposez pas déjà d'un répertoire de cache, vous devrez en créer un. Vous devrez également créer un répertoire sur votre serveur pour le script de fichier de cache PHP..
Créez un fichier PHP contenant le code suivant.
La partie "compte = 3" du code contrôle le nombre de "tweets" qui seront affichés dans votre widget Twitter. Si vous souhaitez afficher un seul tweet, changez le code en "count = 1".
Notez que le "& include_rts = true" doit être inclus si vous souhaitez que votre widget Twitter affiche des "retweets". Visitez la page de l'API Twitter "GET statuses / user_timeline" pour plus d'informations et les options disponibles..
Ensuite, un travail Cron doit être créé pour exécuter le script PHP à un nombre de fois défini par heure. La manière dont le travail Cron est configuré dépend de votre panneau de configuration d'hébergement Web. Veuillez vous reporter à "Planification de tâches avec des tâches Cron" pour un didacticiel approfondi..
Vous trouverez ci-dessous un exemple de paramètres de l'onglet Cron pour un panneau de contrôle Plesk qui exécute un travail Cron (4) fois par heure (toutes les quinze minutes), chaque jour..
Nous devons nous assurer que notre page Web fait référence à la bibliothèque jQuery. Pour ce tutoriel, la bibliothèque jQuery est incluse via l’utilisation du CDN jQuery..
Entre les balises de tête de votre page Web, ajoutez
En plus d'utiliser l'API Twitter, le widget Twitter utilise Twitter Web Intents pour ajouter les fonctionnalités "Retweet", "Répondre" et "Favoris"..
Juste en dessous de la balise de script jQuery, ajoutez
Un fichier JavaScript externe, "twitter-widget.js", doit être créé. Ce fichier JavaScript contient le code jQuery qui génère le "contenu" du widget Twitter. Le code jQuery récupère les informations de l'API Twitter à partir du fichier cache créé par le script PHP à l'étape deux..
Dans le fichier JS, ajoutez le code jQuery suivant.
Accentsconagua
// Affiche le dernier tweet $ (document) .ready (fonction () $ .getJSON ('cache / twitter-json.txt', fonction (données) . .Each (données, fonction (index, élément)) $ ( '#tweet'). append (''+ item.text.linkify () +'
'+''+''+ heure relative (item.created_at) +''+''+' '+' Retweet '+''+' '+' Répondre '+''+' '+' Favorite '+''+'
'); ); ); jQuery .getJSON () est utilisé pour charger les données codées JSON à partir du fichier TXT en cache. En utilisant jQuery .append (), le contenu est affiché à travers le
du balisage XHTML. Chaque élément de l'API Twitter est préfixé par "élément". Les éléments de l'API Twitter utilisés dans le code jQuery sont les suivants:Note de l'éditeur: Si vous préférez extraire ce code HTML boueux de votre JavaScript, envisagez d’utiliser le plugin jQuery templating..
Les données récupérées à l'aide de l'API Twitter sont des données "brutes" et doivent être corrigées pour le widget Twitter..
Dans le fichier twitter-widget.js, sous le code jQuery, ajoutez le code JavaScript suivant..
// Conversion de l'horodatage de l'API Twitter en "Time Ago" function relative_time (time_value) var values = time_value.split (""); time_value = valeurs [1] + "" + valeurs [2] + "," + valeurs [5] + "" + valeurs [3]; var parsed_date = Date.parse (time_value); var relative_to = (arguments.length> 1)? arguments [1]: new Date (); var delta = parseInt ((relative_to.getTime () - parsed_date) / 1000); delta = delta + (relative_to.getTimezoneOffset () * 60); var r = "; if (delta < 60) r = 'a minute ago'; else if(delta < 120) r = 'couple of minutes ago'; else if(delta < (45*60)) r = (parseInt(delta / 60)).toString() + ' minutes ago'; else if(delta < (90*60)) r = 'an hour ago'; else if(delta < (24*60*60)) r ="+ (parseInt(delta / 3600)).toString() + ' hours ago'; else if(delta < (48*60*60)) r = '1 day ago'; else r = (parseInt(delta / 86400)).toString() + ' days ago'; return r; ); Ce code convertit l'horodatage Twitter en heure relative, telle que "3 heures auparavant".
Dans le fichier twitter-widget.js, sous le code de conversion d'horodatage, ajoutez le code JavaScript suivant..
// Créer des liens utilisables String.prototype.linkify = function () return this.replace (/ [A-Za-z] +: \ / \ / [A-Za-z0-9 -_] + \. [A -Za-z0-9 -_:% & \? \ /.=] + /, fonction (m) retourne m.link (m);); ;
Lors de l'utilisation de l'API Twitter, les liens contenus dans les publications Twitter sont uniquement affichés au format texte, pas de liens d'ancrage exploitables. Le code ci-dessus convertit les liens URL texte standard uniquement en liens d'ancrage exploitables..
Nous avons maintenant créé un widget Twitter personnalisé, plutôt soigné, qui inclut une interactivité de base pour les utilisateurs. Mais que se passe-t-il si nous voulons ajouter des fonctionnalités avancées vraiment cool à notre widget Twitter? Grâce au service Twitter @Anywhere, nous pouvons y arriver assez facilement.
Inscrivez-vous au service Twitter @Anywhere à l'adresse https://dev.twitter.com/apps/new..
Créez une nouvelle "application" et suivez les étapes du processus d'inscription en ligne. Visitez cet article pour obtenir de l'aide détaillée sur la procédure d'inscription..
"La propriété URL de rappel (définie dans votre compte @Anywhere) de votre application doit correspondre à la fois au sous-domaine et au domaine de l'application Web utilisant @Anywhere."
Les prochaines étapes de ce didacticiel expliquent comment ajouter des fonctionnalités avancées de Twitter @Anywhere..
Aussi près que possible du haut de la page Web, ajoutez le script @Anywhere Tag:
Notez que votre clé de consommateur Twitter oAuth doit être ajoutée à la balise de script..
Certaines fonctionnalités du service Twitter @Anywhere n'exigent pas que l'utilisateur soit connecté à Twitter. Cartes de survol et auto-linkification des noms d'utilisateur Twitter à titre d'exemples. Cependant, la plupart des fonctionnalités de @Anywhere FAIRE demander à l'utilisateur de se connecter et d'autoriser votre site à accéder. Le bouton "Connect with Twitter" permet aux utilisateurs de s'authentifier en toute sécurité avec Twitter.
Au dessous de
, ajouter le code suivant.Maintenant, créez un fichier JavaScript externe "twitter-login.js" contenant le code suivant.
@Anywhere offre plusieurs moyens de déterminer si un utilisateur est déjà connecté à Twitter et s'il a déjà accordé une autorisation d'accès à votre application. Pour ce tutoriel, nous allons utiliser les événements authComplete et signOut.
Juste en dessous de la page web
tag, ajoutez ce qui suit:En ajoutant le code ci-dessus, les événements authComplete et signOut sont maintenant déclenchés par TOUT Fonctionnalité @Anywhere.
Une Hovercard affiche des données sur un utilisateur de Twitter dans une info-bulle et comprend également un bouton Suivre / Ne plus suivre..
Pour ajouter une carte survolée "développée" par défaut, ajoutez le code suivant sous les codes authComplete et signOut, juste en dessous de la page Web.
étiquette: Notez que si vous ajoutez la fonctionnalité Hovercard, la liaison automatique des noms d'utilisateurs Twitter est également ajoutée par défaut. Cela rend l'ajout de la "T.linkifyUsers ()" fonctionner à votre page Web inutile.
Pour ajouter un bouton Twitter, suivez le widget ci-dessous , ajouter le code suivant.
Notez que vous devez ajoutez votre pseudo Twitter au code ci-dessus.
Si vous souhaitez ajouter une zone de Tweet au lieu d'un bouton Suivre, ci-dessous
ajouter le code suivant.Voir la démo terminée. Créer un widget entièrement basé sur Twitter et utilisant l'API Twitter, Web Intents et @Anywhere demande un peu de travail. Cependant, vous pouvez créer quelque chose d'interactif et de amusant pour les visiteurs de votre site Web.!
Veuillez noter que les codes JavaScript pour le temps relatif et la création de liens d'ancrage réalistes sont obtenus grâce à cet article..
Pour ceux d'entre vous qui préfèrent créer un widget de base piloté par Twitter sans utiliser Twitter oAuth et @Anywhere, des démos de base sont incluses dans le fichier zip. Deux démos affichent également des images de profil Twitter à côté de chaque tweet..
Si vous avez des questions sur ce didacticiel, adressez-vous à l'aide de la rubrique "Ajouter une boîte de commentaires" ci-dessous..
