Adición de un complemento de aplicaciones

SDK del directorio de aplicaciones

Adición de un complemento de aplicaciones

1. Requisitos previos

Para completar esta sección, tendrá que agregar una cuenta de Twitter o Facebook en su perfil de Hootsuite.

2. Configuración de archivos

El complemento de aplicaciones de muestra precisará que los siguientes nuevos archivos se encuentren alojados en el directorio raíz de su dominio:

  • my_plugin.html: puede realizarse una llamada a este archivo cuando los usuarios de Hootsuite interactúen con el complemento.
  • my_handler.html: este archivo representa la página externa con la que interactuará el complemento.

3. Creación de un complemento de aplicaciones

Si desea crear un complemento para su aplicación en My Apps (Mis aplicaciones), siga estos pasos:

  • Haga clic en el nombre de su aplicación.
  • Haga clic en New Plugin (Nuevo complemento).
  • Inserte "Mi complemento de Hootsuite" como título para el complemento en el campo correspondiente.
  • Inserte "Abrir ventana emergente" como elemento de menú del complemento en el campo "Menu item text" (Texto del elemento de menú).
  • También puede asignarle al complemento un icono como imagen representativa:
    • Almacene esta imagen en el directorio raíz del dominio.
    • Escriba la URL absoluta de la imagen en el campo de icono que se encuentra en "App Plugin Image" (Imagen del complemento de aplicaciones).
  • Para especificar la URL utilizada para cargar su complemento de aplicaciones, escríbala en el campo de <iframe> URL (por ejemplo, https://localhost/app.html)
  • Haga clic en Save (Guardar).

Ya ha creado un complemento para su aplicación.

4. Instalación de complementos de aplicaciones

Siga estos pasos en el panel de control de Hootsuite:

  • En la barra de inicio, vaya a Tools (Herramientas) > App Directory (Directorio de aplicaciones).
  • Haga clic en My Apps (Mis aplicaciones); la aplicación debería mostrarse en el menú.
  • Haga clic en Install (Instalar); esta opción se encuentra junto al nombre de la aplicación. 
  • En la pestaña "App Plugins" (Complementos de aplicaciones), busque el complemento que creó en el paso 3 y haga clic en Install (Instalar).

Tras este paso, se instalará correctamente el complemento.

5. Configuración de la biblioteca JavaScript

Ahora, editará el archivo my_plugin.html para permitir que el complemento se comunique en el panel de control de Hootsuite. Al igual que en la sección Adición de una columna de aplicaciones, tendrá que agregar una referencia a la parte del SDK del directorio de aplicaciones que se encuentra alojada en Hootsuite. Aquí se encuentra el archivo:

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

Agregue etiquetas <html> de apertura y cierre en la parte superior del archivo my_plugin.html de forma que contenga las etiquetas <head> (encabezado) de apertura y las etiquetas <body> (cuerpo) de apertura y cierre. Dentro de las etiquetas <body> (cuerpo), agregue una referencia al script de hsp.js. Esto se muestra en el siguiente fragmento 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. Configuración de jQuery

Para utilizar la capa de comunicación que hemos creado, emplearemos la herramienta jQuery. Justo después de la referencia de hsp.js dentro de la sección <body> (cuerpo) del archivo my_plugin.html que se agregó en el paso 3, agregue la siguiente línea:

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

7. Configuración de eventos entre el panel de control y la aplicación

En my_plugin.html, inicie la API de JavaScript utilizando la función hsp.init y establezca los parámetros de hsp.

Inserte este código entre las etiquetas HTML de script, que se encuentran en la parte inferior de la sección <body> (cuerpo) del archivo:

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

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

8. Implementación de la función de elementos de menú de complementos

Tal y como se mencionó en el paso 3, insertamos "Abrir ventana emergente" como texto del elemento de menú del complemento. En esta guía de inicio rápido, queremos que nuestro complemento abra una ventana emergente con información sobre el mensaje concreto que se seleccionó en el panel de control.

Primero, debemos crear una función que extraiga la información del mensaje para la ventana emergente y enviarlo codificado en la URL al archivo my_handler.html. Inserte el siguiente código en el archivo my_plugin.html justo antes del evento .ready que se insertó en el paso 8; hay que tener en cuenta que <YOUR DOMAIN> (SU DOMINIO) representa el dominio 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. Configuración del administrador de aplicaciones

En my_handler.html, queremos mostrar la información del mensaje recibida. Para ello, creamos una función que lea los parámetros transmitidos a la URL e imprimimos cada uno de ellos. Por tanto, el aspecto de my_handler.html debe ser similar a esto:

<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. Conexión entre el complemento y el administrador

Para llamar a la función sendToAppHandler que se creó en el paso 8, inserte el siguiente código en el archivo my_plugin.html (dentro del evento .ready de jQuery y justo después de la llamada a hsp.init que se insertó en el paso 7):

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

11. Uso del complemento de aplicaciones

Tal y como se mencionó en el paso 1, hay que utilizar una cuenta de Twitter o Facebook para utilizar el complemento de aplicaciones. Si agregó una cuenta de Twitter, debería ver, por ejemplo, el elemento de menú del complemento en el tweet de una columna "Inicio". Si agregó una cuenta de Facebook, podría ver dicho elemento de menú en una columna "Últimas noticias". En el paso 3, insertamos "Abrir ventana emergente" como texto del elemento de menú del complemento y esto es lo que se muestra en la siguiente imagen:

myFirstPlugin.4229c522

Haga clic en Abrir ventana emergente. Se mostrará una ventana emergente como la siguiente:

pluginPopup.1696c35a

12. Últimos retoques

Para lograr que la aplicación sea más eficaz y tenga un mejor diseño, consulte la sección Prácticas recomendadas. Si se encuentra con algún problema, lea atentamente las preguntas frecuentes o envíenos un correo electrónico a app.review@hootsuite.com.