I would also like to include the tweeted service messages on all pages on our site, not just the homepage. But if we do that, then every page hit for one of our users would hit the Twitter API to get the tweets from the public status Twitter account...with possible privacy and capacity overloading concerns. So there would need to be a way to cache messages from Twitter for a period of time.
In bulleted-point form, what I was looking for was:
tag that contains the text of tweets.
- The script would not display tweets that contain a set phrase (e.g. "returned to normal") or were older than a pre-defined period.
- The script would cache messages as cookies and only read new messages from Twitter after a pre-defined period of time.
To make this work on your pages, you'd need to follow these steps:
- Download the twitter.js file from GitHub. At the end of this file, add the configuration to match your needs. At a minimum, change
cookieDomainto match the domain of your website, or this won't work. You probably also want to change the
idunless you want to monitor OhioLINK services. ((Note that at the time this is being posted, OhioLINK is not using this in production so don't rely on this Twitter ID for actual outage messages.))
- Download the CSS file for twitterjs and modify to your tastes.
- Add these lines to the section of any page you want to use this:
- Add this line to the section of the document where you want the tweets to appear:
Be sure the
idattribute value matches the first parameter of the
getTwitters()function call in the first step.
getTwitters()will run the main body of code after the page is finished loading. If it finds a twitterjs cookie for the current domain, it replaces whatever is inside thewith that information. If it doesn't find a twitterjs cookie or the cookie has expired, it pulls the feed of tweets, parses them, stashes the value into a domain cookie (even if the value is the empty string), and replaces whatever is inside the.
For extra credit, note that you can do a lot of styling with the CSS file. For instance, the version of this I'm demoing at OhioLINK has an GIF encoded as Base64 data in the background of the unordered list of tweets. (We do the Base64 encoding like this to avoid the overhead of another round-trip back to the webserver to get the small graphic.) You can create your own graphic, translate it using a Base64 encoder, and replace that value.
If you end up using this, please let me know in the comments.
Share onTwitter Facebook Google+ LinkedIn