Ajouter un plug-in d'application

SDK du Répertoire des applis

Ajouter un plug-in d'application

1. Conditions préalables

Afin de mener à bien cette procédure, vous devez ajouter un compte Twitter ou Facebook à votre profil Hootsuite.

2. Configurer les fichiers

Votre exemple de plug-in d'application nécessitera l'hébergement des nouveaux fichiers suivants dans le répertoire racine de votre domaine :

  • my_plugin.html : ce fichier est appelé lorsque les utilisateurs Hootsuite interagissent avec votre plug-in
  • my_handler.html : ce fichier représente la page externe avec laquelle votre plug-in va interagir

3. Créer un plug-in d'application

Pour créer un plug-in pour votre application dans My Apps :

  • Cliquez sur le nom de votre application
  • Cliquez sur New Plugin
  • Saisissez « My Hootsuite Plugin » dans le champ « Title » pour donner un titre à votre plug-in
  • Saisissez « Open popup » dans le champ « Menu item text » pour définir l'item du menu de votre plug-in
  • Spécifiez une icône comme image du plug-in (facultatif) :
    • Enregistrez l'image dans le répertoire racine du domaine.
    • Pointez vers l'URL absolue de l'image dans le champ « Icon » sous « App Plugin Image »
  • Pour spécifier l'URL utilisée pour charger votre plug-in d'application, entrez-la dans le champ de l'URL <iframe> (ex. https://localhost/app.html)
  • Cliquez sur Save

Vous avez désormais créé un plug-in pour votre application.

4. Installer un plug-in d'application

Dans votre tableau de bord Hootsuite :

  • Dans la barre de lancement, sélectionnez Tools > App Directory
  • Cliquez sur My Apps : votre application doit apparaître dans le menu
  • Cliquez sur Install (au regard du nom de votre application) 
  • Dans l'onglet « App Plugins », recherchez le plug-in que vous avez créé à l'Étape 3 et cliquez sur Install

Vote plug-in a été installé avec succès.

5. Configurer la bibliothèque JS

À présent, vous allez modifier votre fichier my_plugin.html pour permettre au plug-in de communiquer avec le tableau de bord Hootsuite. Tout comme à l'étape Ajouter un flux d'application, vous devez ajouter une référence à la partie du SDK du répertoire des applis qui est hébergée sur Hootsuite. Le fichier se trouve ici :

https://d2l6uygi1pgnys.cloudfront.net/jsapi/2-0/hsp.js

Ajoutez des balises <html> d'ouverture et de fermeture en haut du fichier my_plugin.html, englobant des balises d'ouverture <head> et des balises d'ouverture et de fermeture <body>. À l'intérieur des balises <body>, ajoutez une référence au script hsp.js. Le snippet HTML suivant reflète cet ajout :

<html> <head> </head> <body> <script src="<span id="docs-internal-guid-f48918a6-56a1-3cef-4945-6e24793fa005"><span>https://d2l6uygi1pgnys.cloudfront.net/jsapi/2-0/hsp.js</span></span>"></script> </body> </html>

6. Configurer jQuery

Afin d'utiliser la couche de communication que nous avons créée, nous allons utiliser jQuery. Juste après la référence hsp.js dans de la section <body> du fichier my_plugin.html ajoutée à l'Étape 3, ajoutez la ligne suivante :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

7. Configurer les événements du tableau de bord de l'application

Dans le fichier my_plugin.html, initialisez l’API JS au moyen de la fonction hsp.init et définissez les paramètres hsp :

  • Comme chaîne apiKey, utilisez votre clé API 

Insérez ce code entre les balises de script HTML, en bas de la section <body> du fichier :

<script> $(document).ready(function() { var hsp_params = { }; hsp.init(hsp_params); }); </script>

8. Implémenter la fonction d'item de menu du plug-in

Lors de l'Étape 3, nous avons inséré « Open popup » comme texte de l'item de menu de votre plug-in. Dans ce Guide de démarrage rapide, nous voulons que notre plug-in ouvre un pop-up qui contiendra des informations sur un message donné sélectionné dans le tableau de bord.

Vous devez d'abord créer une fonction qui saisira les informations du message pour le pop-up et les enverra sous forme codée dans l'URL vers my_handler.html. Insérez le code suivant dans le fichier my_plugin.html juste avant l'événement .ready inséré à l'Étape 8, en prenant en compte que <YOUR DOMAIN> correspond à votre domaine local :

function sendToAppHandler(message) { var messageId = "messageId=" + encodeURIComponent(message.post.id); var datetime = "&datetime=" + encodeURIComponent(message.post.datetime); var message = "&message=" + encodeURIComponent(message.post.content.body); var handler = 'https://<YOUR DOMAIN>/my_handler.html?' + messageId + datetime + message; hsp.showCustomPopup(handler, 'App Plugin popup'); }

9. Configurer le gestionnaire d'appli

Dans le fichier my_handler.html, nous voulons afficher les information reçues concernant le message. Pour cela, nous devons écrire une fonction permettant de lire les paramètres transmis dans l'URL, puis imprimer chacun d'eux. Le fichier my_handler.html doit donc ressembler à ceci :

<html> <head> </head> <body> <script> function getQuerystring (key) { key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regex = new RegExp("[\\?&]"+key+"=([^]*)"); var qs = regex.exec(location.search); return qs[1]; } document.write('Message ID: ' + decodeURIComponent(getQuerystring('messageId')) + '<br />'); document.write('Date & Time: ' + decodeURIComponent(getQuerystring('datetime')) + '<br /><br />'); document.write('Message: ' + decodeURIComponent(getQuerystring('message'))); </script> </body> </html>

10. Connecter le gestionnaire de plug-in

Pour appeler la fonction sendToAppHandler créée à l'Étape 8, insérez le code suivant dans le fichier my_plugin.html à l'intérieur de l'événement jQuery .ready et juste après l'appel du hsp.init inséré à l'Étape 7 :

hsp.bind('sendtoapp', function(message){ sendToAppHandler(message); });

11. Utiliser le plug-in d'application

Comme indiqué à l'Étape 1, vous avez besoin d'un compte Twitter ou Facebook pour utiliser le plug-in d'application. Si vous avez ajouté un compte Twitter, vous devez voir apparaître l'item de menu du plug-in dans un menu du Flux d'accueil, par exemple. Si vous avez ajouté un compte Facebook, vous devez le voir apparaître dans un Flux d'infos. À l'Étape 3, nous avons inséré « Open popup » comme texte de l'item de menu du plug-in, comme le montre l'image ci-dessous :

myFirstPlugin.4229c522

Cliquez sur Open popup pour faire apparaître un pop-up tel que celui-ci :

pluginPopup.1696c35a

12. Touches finales

Pour rendre votre application plus efficace et plus attrayante, jetez un œil à la section Bonnes pratiques. Si vous rencontrez des problèmes, consultez la F.A.Q. ou contactez-nous à l'adresse app.review@Hootsuite.com.