Hinzufügen eines App-Plug-ins

App-Verzeichnis-SDK

Hinzufügen eines App-Plug-ins

1. Voraussetzungen

Um die Verfahren in diesem Abschnitt durchführen zu können, müssen Sie Ihrem Hootsuite Profil ein Twitter- oder Facebook-Konto hinzufügen.

2. Dateieinrichtung

Für das Beispiel-App-Plug-in müssen die folgenden neuen Dateien im Stammverzeichnis Ihrer Domain gehostet werden:

  • my_plugin.html: Diese Datei wird aufgerufen, wenn Hootsuite Benutzer mit Ihrem Plug-in interagieren.
  • my_handler.html: Diese Datei steht für die externe Seite, mit der Ihr Plug-in interagiert.

3. Erstellen eines App-Plug-ins

So erstellen Sie ein Plug-in für Ihre App unter Meine Apps:

  • Klicken Sie auf den Namen Ihrer App.
  • Klicken Sie auf Neues Plug-in.
  • Geben Sie "Mein Hootsuite Plug-in" als Titel für das Plug-in im Feld Titel ein.
  • Geben Sie "Popup öffnen" als Menüelement des Plug-ins im Feld Menüelementtext ein.
  • Sie können optional ein Symbol als Bild für das Plug-in angeben:
    • Speichern Sie dieses Bild im Stammverzeichnis der Domain.
    • Verweisen Sie auf die absolute URL des Bildes im Feld Symbol unter App-Plug-in-Bild.
  • Um die zum Laden des App-Plug-ins verwendete URL anzugeben, geben Sie diese in das Feld <iframe> URL ein (z. B. https://localhost/app.html).
  • Klicken Sie auf Speichern.

Sie haben nun ein Plug-in für Ihre App erstellt.

4. Installation des App-Plug-ins

In Ihrem Hootsuite Dashboard:

  • Rufen Sie in der Startleiste die Option Tools > App-Verzeichnis auf.
  • Klicken Sie auf Meine Apps. Ihre App sollte im Menü angezeigt werden.
  • Klicken Sie neben dem Namen Ihrer App auf Installieren
  • Suchen Sie im Tab App-Plug-ins nach dem in Schritt 3 erstellten Plug-in, und klicken Sie auf Installieren.

Ihr Plug-in wurde nun erfolgreich installiert.

5. Einrichtung der JS-Bibliothek

Nun bearbeiten Sie die Datei my_plugin.html, damit das Plug-in mit dem Hootsuite Dashboard kommunizieren kann. Wie im Abschnitt Hinzufügen eines App-Streams müssen Sie dem von Hootsuite gehosteten Teil des App-Verzeichnis-SDKs eine Referenz hinzufügen. Die Datei befindet sich hier:

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

Fügen Sie <html> oben in my_plugin.html öffnende und schließende Tags hinzu, und zwar öffnende Tags um <head> und öffnende und schließende Tags um <body>. Fügen Sie in den Tags <body> eine Referenz zum Skript hsp.js ein. Dies wird im folgenden HTML-Ausschnitt veranschaulicht:

<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. jQuery-Einrichtung

Um die erstellte Kommunikationsebene nutzen zu können, verwenden wir jQuery. Fügen Sie direkt hinter der Referenz hsp.js im Abschnitt <body> von my_plugin.html, die in Schritt 3 eingefügt wurde, die folgende Zeile ein:

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

7. Einrichten des App-Dashboard-Events

Initialisieren Sie die JS-API in my_plugin.html mit der Funktion hsp.init, und stellen Sie die hsp-Parameter ein:

  • Verwenden Sie Ihren API-Schlüssel als apiKey-String. 

Fügen Sie diesen Code zwischen HTML-Skript-Tags unten im Abschnitt <body> der Datei ein:

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

8. Implementierung der Plug-in-Menüelementfunktion

Wie in Schritt 3 erwähnt haben wir "Popup öffnen" als Menüelementtext des Plug-ins eingegeben. Bei diesem Schnellstart soll unser Plug-in ein Popup öffnen, das Informationen zu der im Dashboard ausgewählten spezifischen Nachricht enthält.

Wir müssen zuerst eine Funktion erstellen, die die Nachrichteninformationen für das Popup erfasst, und sie verschlüsselt in der URL an my_handler.html senden. Geben Sie den folgenden Code in my_plugin.html direkt vor dem in Schritt 8 eingefügten .ready-Event ein, und beachten Sie dabei, dass <YOUR DOMAIN> Ihre lokale Domain ist:

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. Einrichtung des App-Handler

In my_handler.html sollen die empfangenen Nachrichteninformationen angezeigt werden. Dafür schreiben wir eine Funktion, die die in die URL eingefügten Parameter liest, und drucken sie anschließend. my_handler.html sollte folgendermaßen aussehen:

<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. Plug-in-Handler-Verbindung

Um die in Schritt 8 erstellte Funktion sendToAppHandler aufzurufen, geben Sie folgenden Code in my_plugin.html im jQuery-.ready-Event und direkt nach dem in Schritt 7 eingefügten hsp.init-Aufruf ein:

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

11. Verwenden des App-Plug-ins

Wie in Schritt 1 erwähnt wird für die Verwendung des App-Plug-ins ein Twitter- oder Facebook-Konto benötigt. Falls Sie ein Twitter-Konto hinzugefügt haben sollten, sollte das Plug-in-Menüelement beispielsweise im Menü eines Home-Feed-Stream-Tweets angezeigt werden. Wenn Sie ein Facebook-Konto hinzugefügt haben, wird es in einem News-Feed-Stream angezeigt. In Schritt 3 haben wir "Popup öffnen" (Open popup) als Menüelementtext des Plug-ins eingefügt. Dies wird im folgenden Bild veranschaulicht:

myFirstPlugin.4229c522

Klicken Sie auf Popup öffnen, und ein Popup folgender Art wird angezeigt:

pluginPopup.1696c35a

12. Endbearbeitung

Tipps, um die App effizienter und ansprechender zu gestalten, finden Sie im Abschnitt Best Practices. Sollten Sie auf Probleme stoßen, lesen Sie die FAQ oder schreiben Sie uns eine E-Mail an app.review@hootsuite.com.