Share
Twitter Anywhere est une solution «à script unique» de Twitter pour apporter la puissance de leur plate-forme de communication à votre site Web. Nous allons créer un petit script jQuery utilisant Twitter Anywhere pour vos utilisateurs..
La première étape du processus Twitter Anywhere consiste à créer une application. L'inscription peut être trouvée ici. L'URL de rappel est le seul champ susceptible de créer un niveau de confusion. Ceci doit être utilisé lorsque Twitter authentifie l'utilisateur. il spécifie où sur votre site vous souhaitez renvoyer l'utilisateur authentifié. Pour la plupart des applications plus petites, la page d'accueil de votre site Web sera probablement suffisante. Toutefois, pour les applications plus grandes, vous pouvez rediriger l'utilisateur vers une zone proposant un contenu approprié aux utilisateurs authentifiés..
Un type de paramètre important à noter est le type d'application. Désormais, cela n'apparaîtra pas dans le processus de création d'application, mais sera disponible en accédant à vos applications, en recherchant votre nouvelle application, en cliquant sur l'onglet Paramètres en regard de Détails et en remplaçant le bouton radio "Lecture seule" par "Lecture et écriture". "dans les sections Type d'application.
Pour être honnête, il est gênant pour moi d’avouer combien de temps a passé pendant le débogage, avant que je décide de regarder ici!
Avec Twitter Anywhere, nous allons nous concentrer aujourd'hui sur la fonctionnalité Tweet Box. La Tweet Box offre une excellente transparence entre votre site Web et Twitter, permettant aux utilisateurs de tweeter directement sur leur compte sans quitter votre site Web et, plus important encore, de continuer à interagir avec votre contenu..
Le script jQuery que nous allons écrire aujourd'hui pourrait facilement être adapté à un plugin jQuery ou WordPress. Le script détectera l'utilisateur en soulignant un morceau de texte dans, par exemple, votre blog, et affichera un bouton "Tweet this". Une fois que l'utilisateur a cliqué sur ce bouton, le script prend le texte en surbrillance et appelle la fonction Tweet Box de Twitter Anywhere en insérant le texte en surbrillance dans le corps du tweet..
L'utilisateur peut alors laisser le tweet tel quel - avec un lien vers la page sur laquelle il se trouve - ou éditer n'importe quelle partie de celui-ci avant de tweeter..
La sécurité est vitale ici. la moindre utilisation abusive, et l'utilisateur va révoquer l'accès dans leurs paramètres - et ne reviendra probablement pas pour donner une seconde chance à votre application. Donc, donnez toujours à l'utilisateur un aperçu de ce qui sera posté sur son compte; c'est généralement une bonne pratique de les faire appuyer sur le bouton avant de traiter le tweet.
Le script permettra également à l'utilisateur de cliquer sur n'importe laquelle de vos images et d'obtenir le même effet de Tweet Box. Dans ce cas particulier, le tweet fera référence à l'URL directe de l'image..
Comme vous pouvez le voir ci-dessus, nous devons inclure quelques fichiers JavaScript pour que notre plugin fonctionne correctement.
$ (document) .ready (fonction () );
Nous commencerons dans notre fichier JavaScript par tout ce qui est contenu dans la méthode de préparation de documents de jQuery. Tout ici se déclenchera une fois le DOM chargé, nous évitant ainsi des erreurs potentielles..
function getSelectionText () var text = ""; if (window.getSelection) text = window.getSelection (). toString (); else if (document.selection && document.selection.type! = "Control") text = document.selection.createRange (). text; retourne le texte;
Le code ci-dessus vous permettra de récupérer le texte mis en surbrillance de l’utilisateur une fois qu’il l’a sélectionné. Ce code est une fonction assez standard, et peut être trouvé (et documenté) partout sur Internet.
Accentsconagua
$ ('. post'). mouseup (function () $ ('# tweetThis'). show ();); Nous pouvons alors commencer à interagir avec l'utilisateur avec un événement de souris en haut. Dans cette page particulière de HTML, j'ai créé un div avec une classe de 'poster'. Pour le tutoriel, nous visons simplement ceci div afin que le code ne s'exécute pas à chaque fois que l'utilisateur pointe la souris sur la page. Une fois que l'utilisateur a misé dans cette div, nous allons afficher un bouton à l'utilisateur qui lui permet de tweeter le texte en surbrillance.
$ ("# n'importe où"). draggable (); Cette méthode utilise l’interface utilisateur jQuery pour permettre à l’utilisateur de déplacer la zone de Tweet à sa guise. Nous ne lui passons aucune option car la fonctionnalité par défaut suffira pour ce que nous faisons..
$ ('# tweetThis'). click (function () $ ('# tbox'). empty (); var text = getSelectionText (); if (text! = ") twttr.anywhere (function (T) T ("# tbox"). TweetBox (height: 100, width: 400, defaultContent: '"' + $ .trim (text) + '" - "+ document.title +' - '+ window.location.href );); $ ('# partout'). show ();); C'est ici que la fonctionnalité de notre plugin va avoir lieu. En cliquant sur le bouton "Tweet This", nous commencerons par vider le contenu de la zone de Tweet. Cela permet à l'utilisateur de surligner un texte différent et de tweeter au lieu de.
La ligne suivante déclarera une variable pour contenir le texte sélectionné par l'utilisateur à partir de notre appel de fonction. Nous effectuons ensuite une vérification rapide pour déterminer si l'utilisateur a effectivement sélectionné du texte, puis procédons à l'initialisation de la boîte de dialogue Tweet..
De la documentation officielle:
"Le fichier JavaScript @Anywhere établit un seul objet global (
twttr). Pour utiliser @Anywhere, appelez lenulle partméthode, et transmettez un rappel. Le rappel recevra une instance du client API Twitter (nommée "T"par convention) comme seul argument. Toutes les fonctionnalités de @Anywhere sont disponibles en tant que membres du client API Twitter."
Cela signifie que vous pouvez appeler l’une de ces méthodes sur le client API Twitter ("T"): liaison automatique des noms d’utilisateur Twitter, cartes Hover, boutons Suivre, zone de Tweet, connexion et inscription de l’utilisateur. Votre application peut faire plusieurs appels à la 'nulle part'méthode, alors n'ayez pas peur de limiter les fonctionnalités de votre site!
Comme vous pouvez le constater, nous ciblons ensuite "#tbox", à remplir avec la fonctionnalité Tweet Box de Twitter. Comme vous l'avez peut-être remarqué, si vous travaillez avec jQuery, il utilise des sélecteurs CSS similaires lors de l'interrogation du DOM.
Si nous devions appeler .tweetBox (); sans aucune option, alors la zone de tweet prendrait ses propriétés à partir des valeurs par défaut décrites dans la documentation. Nous utilisons le defaultContent propriété pour insérer le texte sélectionné par l'utilisateur dans un Tweet, ainsi que le titre et l'emplacement de la page actuelle. Nous utilisons jQuery $ .trim fonction pour se débarrasser de tout espace non désiré de la sélection de l'utilisateur, ce qui lui coûterait des caractères dans son Tweet.
Nous pouvons ensuite afficher la zone de Tweet créée à l'utilisateur, prête à être approuvée et tweetée.!
$ ('img'). click (function () var url = $ (this) .attr ('src'); twttr.anywhere (function (T) T ("# tbox"). tweetBox (height: 100, width: 400, defaultContent: 'Découvrez cette image:' + url);); $ ('# n'importe où'). Show ();); Le code ci-dessus offre à l'utilisateur la possibilité de tweeter une URL d'image directe vers son compte. Nous configurons la Tweet Box exactement comme avant, mais nous utilisons le 'src' du 'img'élément cette fois comme variable dynamique au lieu du texte surligné.
Cela pourrait facilement être adapté pour les vidéos HTML5, si vous souhaitez les cibler au lieu d'images.
$ ('# hide'). click (function () $ ('# tbox'). empty (); $ ('# n'importe où'). hide (); $ ('# tweetThis'). hide (); ); Le code ci-dessus permet simplement à l'utilisateur de se débarrasser de la boîte de dialogue Tweet après avoir tweeté ou s'il change d'avis à propos du tweet. On vide le div élément prêt pour l'URL de texte ou d'image sélectionné suivant.
Ce type de fonctionnalité se prêterait parfaitement à un blog.
Avoir ce code adapté dans un plugin WordPress permettrait aux utilisateurs de tweeter des citations de vos articles, augmentant ainsi l'exposition et la diffusion de votre contenu sur Internet..
Le tweeting d'URL d'image conviendrait parfaitement à un site de portfolio de photographie ou de conception Web où l'utilisateur peut tweeter vos travaux. Ou, ce script pourrait être transformé en un plugin jQuery correctement formé pour une utilisation sur n’importe quel site Web; statique; CMS ou Tumblr - les possibilités sont infinies.
La plate-forme Twitter Anywhere est un moyen fantastique de superposer les fonctionnalités de Twitter sur votre site..
La plate-forme Twitter Anywhere est un moyen fantastique de superposer les fonctionnalités de Twitter sur votre site. D'après mon expérience personnelle, je pense que ce n'est que cela: une couche. Je ne me sentirais pas à l'aise de construire une application complète avec elle. La documentation est plutôt mince, et la première chose que vous remarquerez peut-être en l'utilisant vous-même est son potentiel, ses fonctionnalités, et son manque partiel en ce moment..
Par exemple, vous pouvez actuellement extraire le nombre de favoris d'un utilisateur - uniquement le nombre, pas de contenu. Cette fonctionnalité supplémentaire permettrait à Twitter Anywhere d’être au même niveau que l’API REST côté serveur existante, alimentant de très vastes applications très complexes..
Bonne chance avec cette plate-forme et essayez de trouver un cas d'utilisation intéressant pour certaines de ses fonctionnalités faciles à mettre en œuvre! En attendant, jetez un œil à la démo Copybot. Merci d'avoir lu!
