Comment ajouter Twitter @anywhere dans WordPress

Twitter a lancé sa plate-forme @anywhere il n'y a pas si longtemps. Cette nouvelle plate-forme intègre Twitter sur votre site avec quelques lignes de JavaScript. Il permet plus de tweets, plus de trafic, plus de suivis, plus d’engagement, plus d’utilisateurs et plus de perspicacité. Vous pouvez maintenant intégrer une zone de tweet sur votre site où les utilisateurs peuvent directement tweeter à partir de votre site. Il convertit également tous les noms d'utilisateurs Twitter en un lien (@wpbeginner). Si vous activez l'option hovercard, les utilisateurs verront une zone de survol avec un bouton de suivi et des informations sur l'utilisateur. Vous pouvez également créer une connexion avec des boutons Twitter, suivre @wpbeginner sur des boutons Twitter et bien plus encore. Nous pensons que cette nouvelle plate-forme jouera un rôle important dans l’avenir du Web, à mesure que Twitter grandira. Dans cet article, nous expliquerons comment ajouter des éléments de la plateforme de n'importe où de Twitter sur votre blog WordPress..

Mise à jour: Twitter désactive l'API @anywhere le 6 décembre 2012. Voici plus de détails..

Étape 1: enregistrement d'une API

Avant de pouvoir ajouter la plateforme n’importe où sur votre site, vous devez enregistrer une API. Vous serez invité à une page qui ressemblerait à ceci:

Une fois que vous vous êtes inscrit, vous devriez recevoir une clé API. La prochaine chose que vous voulez vous assurer est que le niveau d'autorisation est défini sur Lecture et écriture, sinon les utilisateurs ne pourraient pas cliquer sur le bouton Suivre. C'est un problème avec Twitter, mais ils y travaillent pour résoudre ce problème. Mais pour rester du côté de la sécurité, nous vous indiquerons comment procéder..

Cliquez d'abord sur le lien http://twitter.com/oauth. Sur cette page, vous verrez l'application que vous avez enregistrée. Cliquez sur le nom de votre application. La page de détails de l'application devrait vous mener. Il existe un bouton appelé «Modifier les paramètres de l'application». Cliquez sur ce bouton pour aller à la page d'édition où vous devrez faire défiler jusqu'à l'élément intitulé «Type d'accès par défaut». Changez ceci en "Lecture et écriture".

Étape 2: Implémentation sur votre site

Comme il existe de nombreuses fonctionnalités sur la plateforme n’importe où, nous allons expliquer chacune d’elles une par une. La première chose à faire est d'appeler le code JavaScript principal. Twitter vous recommande de placer ce script dans votre header.php file (Entre ces deux codes).

N'oubliez pas d'ajouter votre clé API là où YourAPIKey apparaît dans le lien..

Voyons maintenant les fonctionnalités individuelles que cette plate-forme peut vous apporter..

Lien automatique avec tous les noms d'utilisateur Twitter

Cette fonction liera automatiquement tous les noms d'utilisateurs Twitter sur vos publications et vos commentaires. Si vous mentionnez un nom d'utilisateur Twitter au format suivant: @wpbeginner << It will automatically be linked to the appropriate twitter account. This can save you a lot of time if you write posts with mentions to twitter users. To add this feature, you simply paste the following code in your site's header, after the main script. [php] twttr.anywhere(onAnywhereLoad); function onAnywhereLoad(twitter) twitter.linkifyUsers(); ; [/php] This will link all twitter usernames mentioned in your body tag excluding the links, scripts, iframes, text area, title tags, and other buttons.

Liez automatiquement tous les noms d'utilisateur Twitter avec une carte Hovercard

Cette fonctionnalité relie automatiquement tous les noms d'utilisateurs Twitter trouvés sur la page et fournit également une carte survolée sur un effet de survol. Ainsi, lorsque l'utilisateur de votre site amène le pointeur de la souris sur un nom d'utilisateur tel que @wpbeginner, il voit apparaître un hoverbox comme illustré dans l'exemple ci-dessus. S'ils cliquent sur le bouton Suivre, ils peuvent directement suivre l'utilisateur depuis votre site Web. Pour activer cette fonction, collez simplement le code suivant dans l'en-tête de votre site sous le script principal..

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

Boutons Smart Follow pour Twitter

Le bouton de suivi intelligent permet à votre utilisateur de suivre votre compte directement depuis votre site. Vous pouvez créer des boutons pour votre site et les utiliser dans votre publication ou ailleurs. Voir l'exemple live ci-dessous:

Pour ajouter ce type de bouton à votre site, commencez par coller le code suivant dans l'en-tête de votre site sous le script principal:

  twttr.anywhere (onAnywhereLoad); fonction onAnywhereLoad (twitter) twitter ('# follow-wpbeginner'). followButton ("wpbeginner"); ;  

Deuxièmement, vous devez ajouter la balise div suivante à l'endroit où vous souhaitez afficher ce bouton:

N'oubliez pas de changer wpbeginner en votre nom d'utilisateur, sinon un lien suivra vers notre compte twitter.

Live Tweet Box sur votre site

Vous pouvez créer une zone de tweet sur votre site qui permettra aux utilisateurs de tweeter directement à partir de votre site sans jamais aller sur Twitter. Un exemple de cette boîte peut être vu ci-dessous: (N'oubliez pas que si vous cliquez sur tweet, il tweetera).

Essayez de tweeter à partir de la boîte en direct ci-dessus pour voir à quel point il fait frais. Nous apprécierions vraiment si vous tweetiez le contenu par défaut, cela nous aide donc

Comme vous pouvez le constater, cette boîte de tweet en direct est très puissante. Vous pouvez même y ajouter du texte Retweet si vous le souhaitez, avec une légère personnalisation. Pour ajouter une zone de tweet en direct sur votre site, commencez par coller le code suivant dans l'en-tête de votre site après le script principal:

  twttr.anywhere (onAnywhereLoad); function onAnywhereLoad (twitter) twitter ("# custom-tweetbox"). tweetBox (label: "Live Tweet Box:", defaultContent: "Tout le monde devrait suivre @wpbeginner pour des conseils #WordPress géniaux", hauteur: 50, largeur: 480 ,); ;  

Ajoutez ensuite le code suivant pour lequel vous souhaitez afficher la zone de tweet en direct:

Nous voyons qu'il y a déjà quelques plugins dans le répertoire de plugins WordPress qui vous permettent d'utiliser les fonctionnalités de base telles que la carte de survol ou la liaison automatique. Vous pouvez utiliser ces plugins si vous voulez, mais c'est tellement simple qu'il vaut mieux placer les codes manuellement.

Si vous avez aimé cet article, merci de le retweeter. Si nous avons oublié quelque chose, merci de nous le faire savoir dans les commentaires..

Ressource additionnelle:

Documentation Twitter Anywhere
Simple Twitter Connect Plugin (Grand plugin d'un auteur généreux - Merci Otto)