Skip to content

Instantly share code, notes, and snippets.

@jacobh
Created April 20, 2012 16:21
Show Gist options
  • Save jacobh/2430095 to your computer and use it in GitHub Desktop.
Save jacobh/2430095 to your computer and use it in GitHub Desktop.
instagram-twitter-stream
<html>
<head>
<title>Progressive Conference | Instagram Feed</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section id="feed">
</section>
</body>
</html>
window['min_tag_id'] = 0;
window['since_id'] = 0;
// update photos
function getNewPhotos() {
$.getJSON("https://api.instagram.com/v1/tags/progressiveconf/media/recent?client_id=redacted&min_tag_id=" + window['min_tag_id'], function(data) {
data['data'].reverse().map(function(photo){
$("#feed").prepend("\
<article class=\"instagram\">\
<img src=\"" + photo['images']['standard_resolution']['url'] + "\">\
<p>" + photo['caption']['text'] + "</p>\
<p>By " + photo['caption']['from']['full_name'] + "</p>\
</article>\
");
});
if (data['pagination']['min_tag_id']) {
window['min_tag_id'] = parseInt(data['pagination']['min_tag_id'])+1;
}
console.log('instagram');
})
}
function getNewTweets() {
$.getJSON("http://search.twitter.com/search.json?q=progressiveconf&since_id=" + window['since_id'], function(data){
data['results'].reverse().map(function(tweet){
$("#feed").prepend("\
<article class=\"tweet\">\
<p>" + tweet['text'] + "</p>\
<p>By " + tweet['from_user'] + "</p>\
</article>\
");
});
if(data['max_id']) {
window['since_id'] = data['max_id_str'];
}
console.log('twitter');
});
}
$().ready(function(){
getNewPhotos();
getNewTweets();
setInterval("getNewPhotos()", 5000); // 5 seconds
setInterval("getNewTweets()", 5000); // 10 seconds
});
* {
font-family:'Helvetica Neue';
}
body {
background-image:url('gradient_squares.png');
}
#feed {
/*margin:0 auto;
width:650px;*/
}
#feed > article {
width:300px;
background-color:#fff;
padding:13px;
margin:10px;
-webkit-border-radius:5px;
display:inline-block;
vertical-align:top;
}
#feed > article.instagram > img {
display:block;
margin: 0 auto;
width:100%;
}
#feed > article > p {
font-size:25px;
color:#dc262d;
margin:0;
font-weight:bold;
}
#feed article.tweet > p {
font-size:36px;
}
#feed > article > p:last-child {
font-size:13px;
margin:5px 0 0 0;
color:#dc777b;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment