All the TAGS Twitter Avatars

Posted on by Tom Woodward

I have someone who gathered a bunch of tweets for their research using Martin’s TAGS aggregator. She wanted to show all the avatars.

Once I published the spreadsheet, here’s all the javascript needed to make that happen. It’s lightly annotated for your reading pleasure and the functioning codepen example is included below. 

var spreadsheetID = "11Dhxbt5YbrKJN9IUxop-kQ73oqI6oefF8KTDcLuAl04"; // Make sure it is published to the web and that this your ss ID

var dataURL =
  "https://spreadsheets.google.com/feeds/list/" +
  spreadsheetID +
  "/2/public/values?alt=json";//our data is on page two

//set some variables
var faces = "";

//get the data
fetch(dataURL).then(function(response) {
  var contentType = response.headers.get("content-type");
  if (contentType && contentType.indexOf("application/json") !== -1) {
    return response.json().then(function(json) {
      // now that you've got the data let's do something with it per item
      if (json.feed.entry) {
        var data = json.feed.entry;
        data.forEach(function(element){           
          faces = faces +makeFace(element);//make the faces . . . so much humor
        })
      }
      document.getElementById('face-holder').innerHTML = faces;
    });
  } 
});


function makeFace(element){
        return '<img src="' +element.gsx$profileimageurl.$t + '">'
}

See the Pen
Sheets avatar display – ALL by Tom (@twwoodward)
on CodePen.

2 thoughts on “All the TAGS Twitter Avatars”

  1. This is a neat extension of TAGS. It’s too bad Google makes it a pain to access the sheet as JSON (why so many dollar signs and gsx prefixes?).

    A quick improvement would be to cast the array of avatar URLs to a Set. Sets can only hold unique values, so adding a loop to add each avatar address to the set gives you a unique array that you can use to display the photos. The new Set() constructor can also take in an iterable as an argument and it will give you a set. That doesn’t work here because each row of the sheet from json.feed.entry is unique, so you need to add that extra forEach loop to make it work.

    Here’s a fork of your demo showing unique photos.

    1. It is a strange data structure but I’ve gotten used to it.

      I did ask if they wanted unique avatars but they didn’t. I can see that having all them gives you a semi-dataviz aspect.

      I do like the set option. It’s slick.

Comments are closed.