Twitter timeline serverless
HTML
<script src="https://oauth.io/auth/download/latest/oauth.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
<div id="connect">
<button class="btn btn-primary">Connect with twitter</button>
<p>If nothing happen after the connexion, it's maybe because the twitter rate limit exceeded</p>
</div>
<div id="res"></div>
<script id="entry-template" type="text/x-handlebars-template">
<ul id="timeline">
{{#each data}}
<li>
<img class="thumbnail" src="{{user.profile_image_url}}" />
<span class="content">
<span class="author">{{user.name}}</span>
<span class="text">{{link text}}</span>
</span>
</li>
{{/each}}
</ul>
</script>
CSS
#connect { text-align: center; padding-top: 15px}
#connect p {color: #AAA; margin-top: 20px}
#res { display: none }
#timeline { list-style-type: none }
#timeline li { clear: left; margin-bottom: 10px; padding-bottom: 10px; min-height: 70px; border-bottom: 1px solid #EEE }
#timeline li .thumbnail { float: left; position: relative; left: -10px }
#timeline li .content { display: block; margin-left: 15px; margin-top: 5px }
#timeline li .author { font-weight: bold; display: block }
JavaScript
Handlebars.registerHelper('link', function(text) {
var exp = /((https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
return new Handlebars.SafeString(text.replace(exp,'<a href="$1">$1</a>'))
})
$('button').click(function() {
OAuth.initialize('oEcDIQahkO4TUAND-yTs-H6oY_M')
OAuth.popup('twitter', function(err, res) {
res.get('/1.1/statuses/home_timeline.json').done(function(data) {
var template = Handlebars.compile($('#entry-template').html())
$('#connect').slideUp('fast')
$('#res').html(template({data:data})).slideDown('fast')
})
})
})