Web managers: here are a few approaches to implementing jQuery plugins to access the Twitter API. Possible uses:
- Display your station’s Twitter feed on your homepage
- Display a Twitter feed that aggregates tweets from local and national health agencies
- Devote a page on your site to tweets using specific keywords that localize H1N1 discussions
But first, a word of warning: Twitter is growing fast, and a big story like the influenza pandemic is going to generate a lot of chatter on the social network. With a story like H1N1, you should be cautious in how you use Twitter. While the service can be a great tool in gathering sources and communicating reliable information, you can also expect a lot of white noise and poor attempts at humor around the topic swine flu. FluPortal recommends you feature Twitter feeds only from reliable sources or to distribute accurate H1N1 information to your followers.
Like NPR, Twitter has an API that allows you to display filtered tweets directly on your site (Twitter also has an easy to use search widget you can embed on your site). The advantages of using the API is that it presents you with a seamless integration of Twitter content on your website. Using the API, you can display your station’s tweets directly on your site or create custom searches based on terms and/or specific users.
One approach to accessing the API is to install a jQuery plugin to parse the API call into content form ready for display on your website. A quick Google search brought up three options. Let us know if you know of others. They are:
To give you a sense of what’s involved, let’s walk through implementing the Juitter jQuery plugin.
To start with, you’ll need to be able to upload files to your web hosting server and make edits to the code of your website’s header. If you don’t have access to these files, we suggest you use the embedable Twitter search widget.
Note: Juitter is unaffiliated with Twitter and FluPortal.org, and we are not responsible for its correct operation and cannot provide support for the plugin.
1. At Juitter.com, download the plugin and extract the files on your local machine. There should be three files, named “jquery-1.3.1.min.js”, “jquery.juitter.js”, and ”system.js”.
2. Now we need to edit the controls for the script. Using a text editor, open the “system.js” file you just downloaded. The top of the file should look like this:
The highlighted section is where you can change the search terms Juitter will call on to the Twitter API. In this case, the API will return tweets with those terms from EVERYONE on using Twitter. As you see, you can search mulitple terms, seperated by comma (but use no spaces). You can use also this space to search for specific users as well, “flugov”, “cdcflu” or “fluportal” for example.
The system.js file also contains instructions for using more advanced operators and further adjustments to how Juitter behaves on the display end (these instructions come from Juitter, not from FluPortal.org). You can learn more about making api calls on the Twitter API wiki.
3. On your web server, create a folder to store the three Juitter files at: “http://www.yourstation.org/app/js/”
4. Place the three .js files in the /app/js/ folder on your webserver.
5. In the <head> section of your website’s template, insert these three lines of script just above the </head> tag:
<script language=”javascript” src=”/app/js/jquery-1.3.1.min.js” type=”text/javascript”></script>
<script language=”javascript” src=”/app/js/jquery.juitter.js” type=”text/javascript”></script>
<script language=”javascript” src=”/app/js/system.js” type=”text/javascript”></script>
This code points to the files you placed on your web folder. If you choose to place the jQuery files in a different folder, you need to adjust this code to reflect their location.
7. On the page you would like to display the Twitter search, place the following code
<div id=”juitterContainer”></div>
8. The page should now display results based on the Juitter operators and search terms you entered as they do on the Juitter homepage.
