In order to complete this section, you will need to add a Twitter or Facebook account to your HootSuite profile.
On your web server
Your sample app plugin will require the following new file hosted within your domain's root directory:
Your plugin will also require the following app specific files. If you have already completed the Add an App Stream section, you will have already created these files and they can be re-used as is:
To create a plugin for your app in My Apps:
You have now created a plugin for your app.
Inside your HootSuite dashboard:
Your plugin has now been successfully installed.
On your web server
Now you will edit your my_plugin.html file to enable the plugin to communicate with the HootSuite dashboard. Just as in the Add an App Stream section, you will need to add a reference to the HootSuite hosted portion of the App Directory SDK. The file is located here:
Add <html> opening and closing tags to the top of my_plugin.html, wrapping opening <head> and <body> opening and closing tags. Inside the <body> tags add a reference to the hsp.js script. This is shown in the following HTML snippet:
In order to receive events from the HootSuite dashboard, your my_receiver.html will need to reference your locally downloaded copy of app_receiver.js. If you didn't complete the Add an App Stream section first, add the following HTML snippet to the top of the <body> section of your my_receiver.html file:
Where <YOUR DOMAIN> is your local domain (ex. localhost).
In order to use the communication layer we have built, we will use JQuery. Right after the hsp.js reference inside the <body> section of my_plugin.html added in Step 3 , add the following line:
In my_plugin.html, initialize the JS API using the
hsp.init function and set the hsp parameters:
apiKeystring use the API Key retrieved in the Create an App section, Step 4.
receiverPathstring use the absolute URL of my_receiver.html (ex. https://localhost/my_receiver.html).
Insert this code in between HTML script tags, in the bottom of the <body> section of the file:
Where <MY API KEY> is the retrieved API Key and <YOUR DOMAIN> is your local domain.
As mentioned in Step 3 , we inserted 'Open popup' as our plugin's Menu Item Text. In this quickstart, we wish our plugin to open a popup that will have information about the specific message selected in the dashboard.
First, we must create a function that will grab the message information that we wish to display in the popup and send it encoded in the URL to my_handler.html. Insert the following code inside my_plugin.html right before the
.ready event inserted in
and taking into account that <YOUR DOMAIN> is your local domain:
In my_handler.html, we wish to display the message information received. To achieve this, we write a function to read the parameters being passed in the URL and then we print each. Thus, my_handler.html should look like this:
As mentioned in Step 1 , a Twitter or Facebook account will be needed to use the app plugin. If you added a Twitter account then you should see the plugin menu item on a Home Feed stream tweet's menu, for example. If you added a Facebook account, a News Feed stream is one where you could see it. In Step 3 , we inserted 'Open popup' as the plugin's menu item text and this is what is shown in the following image:
Click Open popup and a popup like the following will open:
To make a more efficient and better-looking app, take into account what is provided in the Best Practices section.