Create a gist now

Instantly share code, notes, and snippets.

Embed
Not working because Twitter changed API.
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Twitter</title>
<style>
body { width: 600px; margin: auto; }
ul { list-style: none; }
li { padding-bottom: 1em; }
img { float: left; padding-right: 1em; }
a { text-decoration: none; color: #333; }
</style>
</head>
<body>
<ul id="biebster-tweets">
<script id="tweets-template" type="text/x-handlebars-template">
{{#each this}}
<li>
<img src="{{thumb}}" alt="{{author}}">
<p><a href="{{url}}">{{tweet}}</a></p>
</li>
{{/each}}
</script>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script>
(function() {
var Twitter = {
init: function( config ) {
this.url = 'http://search.twitter.com/search.json?q=' + config.query + '&callback=?';
this.template = config.template;
this.container = config.container;
this.fetch();
},
attachTemplate: function() {
var template = Handlebars.compile( this.template );
this.container.append( template( this.tweets ) );
},
fetch: function() {
var self = this;
$.getJSON( this.url, function( data ) {
self.tweets = $.map( data.results, function( tweet ) {
return {
author: tweet.from_user,
tweet: tweet.text,
thumb: tweet.profile_image_url,
url: 'http://twitter.com/' + tweet.from_user + '/status/' + tweet.id_str
};
});
// For future lessons, research $.deferred, viewers. :)
self.attachTemplate();
});
}
};
Twitter.init({
template: $('#tweets-template').html(),
container: $('#biebster-tweets'),
query: 'Justin Bieber'
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment