Skip to content

Instantly share code, notes, and snippets.

@jlord
Created November 11, 2012 18:55
Show Gist options
  • Save jlord/4055868 to your computer and use it in GitHub Desktop.
Save jlord/4055868 to your computer and use it in GitHub Desktop.
index.hmtl
<html>
<!-- I'm ommiting a lot of stuff, keeping this to the point -->
<head>
<!-- load in tabletop and mustache -->
<script src="/wp-content/themes/Starkers/tabletop.js" type="text/javascript"></script>
<script src="/wp-content/themes/Starkers/ICanHaz.js" type="text/javascript"></script>
</head>
<style>
/* confine your image to a circle */
.instaImgCirc img {border-radius: 1000px;}
</style>
<body>
<!-- this dude waits patiently to be filled with stuff -->
<div id="instagram"></div>
</body>
<script id="instagram" type="text/html"> {{#rows}} <div class="instaImgCirc"><img src="{{instasource}}" width="100%"/></div> {{/rows}}
</script>
<script type="text/javascript">
// Your spreadsheets URL
varURL='https://docs.google.com/spreadsheet/pubkey=0Ao5u1U6KYND7dGRZbTUwd3JQZ1k3OE9KTVZqZUYwZHc&amp;single=true&amp;gid=0&amp;output=html';
//
function loadSpreadsheet() {
// let's get this party started
Tabletop.init( { key: URL, callback: showData, simpleSheet: true } ) }
//
// use this if you want to use a specific number of your most recent Instagrams
function getLast(array, howMany) {
start = array.length cut = start - howMany
if (start < 20) {
return array
} else {
array = array.splice(cut) return array.reverse()
}
}
//
document.addEventListener('DOMContentLoaded', function() {
loadSpreadsheet() })
//
showData = function(data) {
var instagram = ich.instagram({
"rows": getLast(data, 12)
// use "rows": data.reverse() if you want to use all the Instagrams in your spreadsheet
})
document.getElementById('instagram').innerHTML = instagram;
}
</script>
</html> 
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment