Utilisation du service @Anywhere de Twitter en 6 étapes

La semaine dernière, Twitter a publié @Anywhere, qui, avec seulement quelques lignes ajoutées dans votre code, peut intégrer toutes les fonctionnalités de la plateforme Twitter sur votre site Web. @Anywhere peut tout permettre, allant de la conversion d'un simple @ nom d'utilisateur en un lien cliquable à la création de nouveaux tweets directement à partir de votre site personnel. Je vais vous montrer exactement comment faire dans ce tutoriel!

Avant de commencer, créez une application

Pour pouvoir utiliser @Anywhere, vous devez disposer d'une clé API. Quoi? Vous ne l'avez pas? Aucun problème. Allez simplement ici et enregistrez une nouvelle application (ne l'enregistrez pas d'ici).

Si vous avez un serveur local installé, définissez-le sur un domaine (developertutorial.com, par exemple), car cela ne fonctionnera pas avec votre hôte local (si vous ne savez pas comment, consultez ce tutoriel, la partie du fichier hosts est particulièrement important).
Si vous n'avez pas de serveur local, laissez cette section vide. Rappelez-vous simplement que pour la production, vous devrez le définir sur le domaine sur lequel vous travaillez..

Et enfin, définissez le type d'accès par défaut sur Lecture et écriture. C'est très important!

Vous allez maintenant être redirigé vers la page des paramètres de l'application. Copiez la clé de consommateur (clé API) et commençons à utiliser @Anywhere..

Incluant le code Javascript de @ Anywhere

Ouvrez votre nouveau fichier HTML et, à l'intérieur du tag, inclure:

Votre code devrait ressembler à:

    @Nulle part     …

Remplacer Clé API avec la clé API de l'application que vous avez obtenue à l'étape précédente. Le paramètre v = 1 est la version. Peut-être qu'à l'avenir, Twitter ajoutera de nouvelles fonctionnalités et peut-être de nouvelles syntaxes. Pour éviter de casser le code @Anywhere existant, ils conserveront l'ancien code, le cas échéant. La version 1 prend en charge tous les principaux navigateurs, y compris IE6..

Après avoir inclus ce fichier JavaScript, nous pouvons accéder à la twttr objet, qui invoquera le nulle part() fonctionne avec un paramètre lorsque @Anywhere est prêt:

 twttr.anywhere (function (twitter) // Actions lorsque @Anywhere est prêt);

Le paramètre (dans ce cas gazouillement) est l'objet que nous allons utiliser, semblable à celui de jQuery $.

Ensuite, nous devons créer une base HTML. Copiez et collez le code suivant et placez-le dans la balise "body".

   Mon blog
  Ceci est un article de blog test test @Anywhere de @twitter.
 Si vous avez apprécié ce tutoriel, suivez-moi et restez en contact avec @NETTUTS pour plus de fantaisie.
 
 
  commentaires
  @corcholat dit: Un si bon tutoriel! 
 
 @faelazo dit: Vous devriez également suivre @smashingmag

Maintenant, creusons.

1. linkifyUsers: Convertissez @ quelque chose en liens

@Anywhere nous permet de convertir @mentions en liens. Cette fonctionnalité s'appelle linkifyUsers, et est assez simple: il définit l'élément HTML que vous souhaitez convertir en lien.

Puisque nous voulons que toutes les @mentions du document soient converties en liens, nous appelons simplement le linkifyUsers () fonction dans l'élément body:

 twttr.anywhere (function (twitter) twitter ("body"). linkifyUsers (););

Comme mentionné précédemment, le paramètre "twitter", à l'intérieur de la fonction de rappel, ressemble beaucoup à l'alias "$" de jQuery; Si nous voulons convertir des @mentions en liens, mais uniquement pour ceux d’une certaine section, nous pouvons utiliser un sélecteur CSS, comme indiqué ci-dessous..

 twttr.anywhere (function (twitter) twitter (". post"). linkifyUsers (););

linkifyUsers () accepte un objet en tant que paramètre, avec deux propriétés: nom du cours et Succès. Avec nom du cours, vous pouvez spécifier une classe à appliquer lorsque les @mentions sont trouvées; Ainsi, par exemple, vous pouvez ajouter une classe 'rouge' non sémantique et spécifier dans votre CSS:

 .rouge color: # f00;

Voici le code.

 twttr.anywhere (function (twitter) twitter ("body"). linkifyUsers (className: 'red'););

2. hovercards: Affiche des informations supplémentaires sur le survol

hovercards () convertit @mentions en liens, mais charge également une petite info-bulle contextuelle au passage de la souris. Voici un exemple de base de son utilisation.

 twttr.anywhere (fonction (twitter) twitter.hovercards (););

toutefois, hovercards () est suffisamment souple pour inclure certains éléments même s’ils n’ont pas de @mention. Dans le code HTML, je lie "suivez-moi" à http://twitter.com/faelazo; mais @anywhere est assez intelligent pour convertir ce lien en hovercard. En ajoutant une classe de "hovercard" à la balise anchor, Twitter se chargera du reste!

 twttr.anywhere (function (twitter) // Trouver les @mentions et les lier comme d'habitude twitter ("body"). hovercards (); // Trouvons les éléments qui ont une classe hovercard twitter (". hovercard"). hovercards (nom d'utilisateur: fonction (noeud) var twitter_regexp = /twitter\.com\/([a-z0-9_]*)\/?(.*)?/gi; if (node.href.match (twitter_regexp) && (twitter_match = twitter_regexp.exec (node.href))) return twitter_match [1]; return ";);

le Nom d'utilisateur paramètre prend une fonction avec un paramètre qui sera l'objet trouvé (dans ce cas, nœud). Voici ce qui se passe à l'intérieur de la fonction, ligne par ligne.

var twitter_regexp = /twitter\.com\/([a-z0-9_]*)/gi;

Ceci est une expression régulière. Il correspondra à twitter.com/ chaîne avec des valeurs alphanumériques et un trait de soulignement.

if (node.href.match (twitter_regexp) && (twitter_match = twitter_regexp.exec (node.href)))

Si l'expression rationnelle correspond à la propriété href de l'élément node, définissez la variable twitter_match pour capturer les valeurs dans un tableau..

renvoyer twitter_match [1];

Il va retourner le match trouvé.

Nous ajoutons un "retour" au cas où l'élément aurait une classe, mais ne fait pas référence à twitter.com; donc il n'y aura pas de match. Si cela revient faux ou NUL, le script génère une erreur. Avec une chaîne vide, il montre une carte survolée mais aucun utilisateur n'a été trouvé..

Maintenant, si cela est un peu trop compliqué, vous pouvez toujours simplifier le processus et ajouter le nom d'utilisateur comme attribut title de la balise anchor.

 suis moi

Et retournez le nœudde Titre attribut. Beaucoup plus facile, à droite?

 twitter (". hovercard"). hovercards (username: function (node) return node.title;);

"hovercards" peut être appliqué à n'importe quel élément (même un div), tant qu'il spécifie un nom d'utilisateur.

 twitter ("# main"). hovercards (nom d'utilisateur: function () return 'therrorcom';);

3. FollowButton: Inviter à suivre en un seul clic

followButton () ajoutera un bouton pour suivre le paramètre username dans l'élément spécifié précédemment.

Le code suivant ajoutera un bouton pour suivre Nettuts + dans la liste #principale div.

 twttr.anywhere (function (twitter) twitter ("# main"). followButton ("nettuts"););

followButton () attend un paramètre: le nom d'utilisateur à suivre. Assez simple, hein?

4. tweetBox: Tweets à partir de votre site

tweetBox () ajoutera une case dans laquelle les utilisateurs peuvent saisir leurs commentaires et les tweeter via votre site.
tweetBox peut recevoir un objet en tant que paramètre, avec les propriétés suivantes:

compteur (booléen, true par défaut)
S'il faut ou non afficher le compteur des caractères restants.
la taille (entier, défaut 65)
La hauteur de la boîte, en pixels.
largeur (entier, valeur par défaut 515)
La largeur de la boîte, en pixels.
étiquette (chaîne, valeur par défaut "Que se passe-t-il?")
Le texte au dessus de la boite.
defaultContent (chaîne, aucune par défaut)
Vous pouvez entrer par défaut l'URL, un @mention, un #hashtag, etc..
onTweet (une fonction)
Il est appelé après avoir appuyé sur le bouton tweet. Il reçoit deux arguments: tweet en texte brut et tweet HTML.

Un défaut tweetBox peut être appelé après l'élément avec la classe de commentaires avec l'extrait suivant.

 twttr.anywhere (function (twitter) twitter (". comments"). tweetBox (););

Donc, si vous voulez une étiquette personnalisée, du contenu et un rappel lorsque le tweet a été envoyé, utilisez ce code.

 twitter (". comments"). tweetBox (label: 'Que pensez-vous de cet article?', defaultContent: '#nettuts', onTweet: function (plain, html) // Actions lors de l'envoi du tweet) ;

onTweet Cela peut être utile si vous envisagez de remplacer la zone de commentaire par défaut par le CMS que vous utilisez. Vous auriez encore besoin d'une base de données et d'un tableau pour afficher les commentaires, non? Donc, vous pouvez pirater un peu le CMS et faire une requête AJAX avec le onTweet événement pour insérer le tweet dans votre base de données.

5. connectez-vous: connectez un utilisateur à votre application

Comme vous l'avez probablement vu, les deux dernières méthodes nécessitent une confirmation pour accorder la permission à l'application. @Anywhere dispose d'une méthode pour vérifier si l'utilisateur est connecté à l'application (pas sur Twitter). Vous pouvez utiliser des conditions pour montrer ou non certains éléments.

Cet extrait ajoutera le bouton de connexion à l'élément avec une classe de commentaires..

 twttr.anywhere (function (twitter) twitter (". comments"). connectButton (););

Si vous avez besoin d'un bouton de taille différente, vous pouvez transmettre un littéral d'objet avec la taille de la propriété et la valeur small, medium, large ou xlarge. Notez que "moyen" est la valeur par défaut.

 twttr.anywhere (function (twitter) twitter (". comments"). connectButton (size: 'large'););

L'objet Twitter inclut des bonus supplémentaires. l'un est utilisateur actuel, qui est un objet; l'autre est est connecté(), qui est une fonction qui retourne un booléen. De là, nous pouvons créer des instructions conditionnelles.

 twttr.anywhere (function (twitter) if (twitter.isConnected ()) alert ('Bienvenue, vous êtes connecté'); else twitter (". comments"). connectButton (););

Si est connecté() résultats vrai, nous pouvons afficher certaines informations sur l'utilisateur, telles que le nom d'utilisateur (nom_écran), la photo du profil (profile_image_url), les abonnés ou les suivants. Voici une liste des informations auxquelles l'application peut accéder. Voyons le utilisateur actuel objet dans la dernière rafle.

6. Final Roundup: Mélanger le tout

Je modifierai la div avec la classe comments.

  commentaires
  @corcholat dit: Un si bon tutoriel! 
 
 @faelazo dit: Vous devriez également suivre @smashingmag
 
 
  Ajouter un commentaire

Ajoutons maintenant jQuery pour rendre les choses un peu plus faciles. Insérer, entre et , le code suivant:

Nous avons maintenant un espace pour ajouter des commentaires. Tout d'abord, utilisons le est connecté() conditionnel pour afficher un bouton si l'utilisateur n'est pas connecté à notre application; ce bouton sera ajouté à l'élément avec un "ajouter" classe.

 if (twitter.isConnected ()) twitter (". comments"). connectButton ();

Maintenant, utilisons l'objet currentUser de Twitter. Cet objet peut récupérer des informations avec la méthode data (). L'extrait suivant récupérera donc le nom d'écran de l'utilisateur.

 twitter.currentUser.data ('nom_écran');

@Anywhere nous permet de spécifier des fonctions de rappel pour le connectButton fonctionnalité. En argument, il accepte un objet avec deux propriétés: authComplete et Déconnexion; les deux sont des fonctions, alors quand Déconnexion est appelé, nous pourrions actualiser la page. La même chose vaut pour authComplete. Remplaçons le connectButton () aligner avec cet extrait:

 twitter (". comments> .add"). connectButton (authComplete: function (utilisateur) location.reload ();, signOut: function () location.reload (););

C'est assez simple: nous passons un objet comme argument, puis définissons à la fois Déconnexion et authComplete fonctions pour recharger la page. Notez que j'ai laissé tomber le autre clause pour la est connecté() conditionnel afin de définir la Déconnexion un événement.

Ensuite, ajoutons un tweetBox à l'intérieur du conditionnel.

 if (twitter.isConnected ()) $ (". comments> .add> .author"). html (' '+ twitter.currentUser.data (' nom_écran ') +' | Déconnexion'); twitter (". comments> .add"). tweetBox (label: 'Que pensez-vous de cet article?', defaultContent: '#nettuts');

Si l'utilisateur est connecté, un bouton Suivre devrait être là. Encore une fois, à l'intérieur du conditionnel:

 twitter (". comments> .add"). followButton ("nettuts");

Voici l'ensemble des conditions, en arrondissant toutes les fonctionnalités de @Anywhere.

 if (twitter.isConnected ()) $ (". comments> .add> .author"). html (' '+ twitter.currentUser.data (' nom_écran ') +' | Déconnexion'); twitter (". comments> .add"). tweetBox (label: 'Que pensez-vous de cet article?', defaultContent: '#nettuts'); twitter (". comments> .add"). followButton ("nettuts");

Conclusion

@Anywhere est évidemment la réponse de Twitter à Facebook Connect. Ils espèrent pouvoir proposer cette plateforme à autant de sites Web que possible. et bien que le service soit encore jeune et que la documentation puisse certainement être améliorée, elle est définitivement prometteuse! Veuillez nous montrer ce que vous avez fait avec @Anywhere sur vos propres sites Web.!

Code