Making a Google Apps Script powered Twitterwall with schedule and announcements – Part 1

Photo credit : Chris Bull CC-BY-NC-SA ALT https://flic.kr/p/xx86UaLast week was #altc, once of the largest annual edtech events in the UK calendar. Each year we’ve seen a growth in the use of Twitter at the event and it makes sense for us to have the live Twitter stream displayed throughout the venue. In previous years we’ve relied on 3rd party services but this year I wanted to bring this in-house.  Having looked around I came across a nice example by Remy Sharp for a ‘A conference twitter wall with built in schedule & announcements’. This looked ideal as the schedule and announcements was a nice additional feature, plus it was coded in HTML/Javascript making it easier for me to modify.

Iteration 1 – Happy days…

If you are familiar with the nuances of the Twitter Search API you’ll know everything needs authenticated access. In Remy’s example he got around this by proxying the calls via a local NodeJS server. I don’t have a Node server so my initial thought was to use the TwtrService Apps Script library to make the calls and host the files on Google Drive (if you are unfamiliar with Google Drive Hosting you can publish a folder with HTML/JS and it’ll render as a webpage … but see the ‘but’ below).  This is basically the same recipe for the solution for keeping your official Twitter archive fresh on Google Drive. For this solution I could have created a Google Apps Script Web App (Ref: read more) to expose the data but as we were planning on multiple walls and with Apps Script quotas to bear in mind it looked better to use Remy’s debug option which reads copies of the data. Actually getting Remy’s code to work hosted on Google Drive takes very little modification (I’m claiming 4 lines), to write the data to Drive takes a bit more.
The result of this iteration can be seen at:

https://googledrive.com/host/0B6GkLMU9sHmLZUMyaWVWUnM3V0U/

… and all the files for this are in this Google Drive folder:

https://drive.google.com/open?id=0B6GkLMU9sHmLZUMyaWVWUnM3V0U

But…

Before I go into the details of setting this up there is a ‘but’. I initially did all this work in August in advance of our event planning to publish my work for others to use. But then Google announced they were Deprecating web hosting support in Google Drive. As per Google policy this means web hosting will be available until August 31st, 2016 so if you have an event running before then here’s how you can set this up.

  1. Create a new folder in Google Drive and note the folder id from the url:
    Getting Google Drive Folder ID
  2. Download my fork of the Twitterwall, extract the .zip archive
  3. Open config.js and edit the baseUrl so that it ends with your folder ID from step 1 Important: keep the rest of the baseUrl e.g. baseUrl: ‘https://googledrive.com/host/YOUR-FOLDER-ID/’ and your search term.
  4. Upload all the folders and files to the Google Drive folder you created maintaining the structure

At this point visiting your baseUrl should render the wall, next setting up the Twitter data collection.

  1. Open this Apps Script file and File > Make a copy
  2. In your copy  edit the FOLDERID in the script to match the folder id of the hosted twitterwall files (part 1, step 1).
  3. If you’ve never used TAGS/TwtrService enable Twitter API access via this web app.
  4. Back in the Apps Script Editor window Run > getSearchResults and authenticate to test.
  5. To setup regular collection of data from the Script Editor select Resources > Current project’s triggers and add a time-driven trigger to updated every 5 minutes:
    Setting up script triggers

Now every 5 minutes this script will get new data from the Twitter Search API and dump in the the /history/data folder. Also every 5 minutes Remy’s script will check this folder for new data and if it’s there render the tweets. You can also modify the index.html file in your folder to add your schedule and notices as per Remy’s README.md.
If you are not familiar with Google Apps Script you are probably wondering ‘what magic is this’ and you might want to have a wee peek at the documentation to see what else is possible.
In my next post I’ll explain how we can enhance the Twitterwall to use a Google Sheet for the notice and schedule information as well as how this application can be run without Google Drive web hosting. In the meantime please use the comments if you get stuck or need part of this explained more.

chevron_left
chevron_right
css.php