Aggiungi un plug-in dell'app

SDK dell'App Directory

Aggiungi un plug-in dell'app

1. Prerequisiti

Per completare questa sezione, hai bisogno di aggiungere un account di Twitter o Facebook al tuo profilo Hootsuite.

2. Impostazione dei file

Il tuo plug-in dell'app di esempio necessita che i seguenti nuovi file siano ospitati all'interno della root directory del tuo dominio:

  • my_plugin.html - Questo file viene chiamato quando gli utenti di Hootsuite interagiscono con il tuo plug-in
  • my_handler.html - Questo file rappresenta la pagina esterna con la quale interagisce il tuo plug-in

3. Crea un plug-in dell'app

Per creare un plug-in per la tua app in Le mie app:

  • Fai clic sul nome della tua app
  • Fai clic su Nuovo plug-in
  • Inserisci 'Il mio plug-in Hootsuite' come titolo per il tuo plug-in nel campo 'Titolo'
  • Inserisci 'Apri pop-up' come elemento del menu del tuo plug-in nel campo 'Testo elemento menu'
  • Se lo desideri, fornisci un'icona che diventerà l'immagine del plug-in:
    • Conserva questa immagine nella root directory del dominio.
    • Punta all'URL assoluto dell'immagine nel campo 'Icona' in 'Immagine del plug-in dell'app'
  • Per specificare l'URL utilizzato per caricare il plug-in della tua app, digitalo nel campo <iframe> URL (ad esempio, https://localhost/app.html)
  • Fai clic su Salva

Hai creato un plug-in per la tua app.

4. Installazione del plug-in dell'app

All'interno della tua dashboard di Hootsuite:

  • Nella Barra di avvio, passa a Strumenti > App Directory
  • Fai clic su Le mie app - la tua app dovrebbe essere visualizzata nel menu
  • Fai clic su Installa (accanto al nome della tua app) 
  • All'interno della scheda 'Plug-in dell'app', cerca il plug-in che hai creato nel Passaggio 3 e fai clic su Installa

Ora il tuo plug-in è stato installato correttamente.

5. Impostazione della libreria JS

Ora dovrai modificare il tuo file my_plugin.html per consentire al plug-in di comunicare con la dashboard di Hootsuite. Analogamente a quanto fatto nella sezione Aggiungi uno stream dell'App, devi aggiungere un riferimento alla sezione dell'SDK dell'App Directory ospitata da Hootsuite. Il file si trova qui:

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

Aggiungi tag <html> di apertura e chiusura al livello più alto di my_plugin.html, in modo da contenere i tag di apertura e chiusura dell'<head> e del <body>. Nei tag del <body> aggiungi un riferimento allo script hsp.js. Quanto detto è visualizzato nel seguente snippet HTML:

<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. Impostazione di jQuery

Al fine di utilizzare il livello di comunicazione che abbiamo costruito, utilizziamo jQuery. Subito dopo il riferimento hsp.js nella sezione <body> di my_plugin.html aggiunta nel Passaggio 3, aggiungi la seguente linea:

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

7. Impostazione eventi nella dashboard dell'app

In my_plugin.html, esegui l'inizializzazione di JS API utilizzando la funzione hsp.init e imposta i parametri hsp.

Inserisci questo codice tra tag HTML al livello più basso della sezione <body> del file:

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

    hsp.init(hsp_params);
  });
</script>

8. Implementazione della funzione elemento menu del plug-in

Come detto nel Passaggio 3, abbiamo inserito 'Apri pop-up' come testo dell'elemento del menu del nostro plug-in. In questo avvio rapido, vogliamo che il nostro plug-in apra una pop-up contenente informazioni circa specifici messaggi selezionati nella dashboard.

In primo luogo, dobbiamo creare una funzione in grado di recuperare le informazioni del messaggio per la finestra pop-up e inviarle utilizzando URL-encoding a my_handler.html Inserisci il seguente codice all'interno di my_plugin.html subito dopo l'evento .ready inserito nel Passaggio 8 ricordando che <YOUR DOMAIN> corrisponde al tuo dominio locale:

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. Impostazione dell'handler dell'app

In my_handler.html vogliamo visualizzare le informazioni relative al messaggio che abbiamo ricevuto. A tale scopo, scriviamo una funzione che legga i parametri che vengono passati nell'URL e poi li stampi. Quindi, my_handler.html dovrebbe apparire come segue:

<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. Connessione tra plug-in e handler

Per chiamare la funzione sendToAppHandler creata nel Passaggio 8, inserisci il seguente codice in my_plugin.html nell'evento .ready di jQuery subito dopo la chiamata hsp.init inserita con il Passaggio 7:

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

11. Utilizzare il plug-in dell'app

Come detto nel Passaggio 1, è necessario un account Twitter o Facebook per utilizzare il plug-in dell'app. Se hai aggiunto un account Twitter, dovresti vedere l'elemento menu del plug-in un menu di tweet dello stream del feed della pagina iniziale, per esempio. Se hai aggiunto un account Facebook, dovresti poterlo vedere in uno stream di news feed. Nel Passaggio 3, abbiamo inserito 'Apri pop-up' come testo dell'elemento del menu del plug-in, che vediamo visualizzato nella seguente immagine:

myFirstPlugin.4229c522

Fai clic su Apri pop-up per visualizzare una finestra pop-up come la seguente:

pluginPopup.1696c35a

12. Ultimi ritocchi

Per creare un'app più efficiente e dall'aspetto migliore, dai un'occhiata alla sezione Procedure consigliate. Se si verificano degli errori, leggi le FAQ o inviaci un'e-mail all'indirizzo app.review@hootsuite.com.