Skip to content

Instantly share code, notes, and snippets.

@loickreitmann

loickreitmann/twitter_feed.html

Created April 12, 2012 00:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save loickreitmann/2363774 to your computer and use it in GitHub Desktop.
Save loickreitmann/2363774 to your computer and use it in GitHub Desktop.
Download ZIP
HTML example that pulls a twitter user's feed, using some jQuery animations
Raw
twitter_feed.html
<!DOCTYPE html>
<html>
<head>
<title>Twitter feed consumption example</title>
<style>
.main {
margin: 0 auto;
position: relative;
width: 328px;
height: 302px;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
#twitter-posts li {
list-style: none;
display: block;
width: 300px;
border: 1px solid black;
padding: 10px;
background-color: orange;
color: white;
margin: 3px;
height: 75px;
overflow: hidden;
border-radius: 10px;
font-size: 13px;
font-family: Helvetica, Arial, sans-serif;
}
#twitter-posts li a {
color: green;
}
#twitter-posts li a img {
float: left;
margin: 0 5px 5px 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var screenName = 'loico';
$(document).ready(function () {
var currentTweet = 0, tweetsData, counter = 0;
function doSwap() {
if (currentTweet > 2) {
currentTweet = 2;
$('li:eq(0)').slideUp(1000, function () {
$(this).removeAttr('style').hide().appendTo('#twitter-posts');
setTimeout(doSwap, 3000);
});
$('li:eq(3)').slideDown(1000).attr('rel', counter++);
} else {
$('li:eq(' + currentTweet + ')').slideDown(1000).attr('rel', counter++);
if (currentTweet < tweetsData.length) {
setTimeout(doSwap, 3000);
}
}
currentTweet += 1;
}
$.getJSON('https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&screen_name=' + screenName + '&callback=?', function (data) {
tweetsData = data;
for (i = 0, l = data.length; i < l; i++) {
$('#twitter-posts').append('<li style="display: none;"><a href="http://www.twitter.com/' + data[i].user.screen_name + '" target="_blank"><img src="' + data[i].user.profile_image_url + '" title="@' + data[i].user.screen_name + '"/></a>' + data[i].text.replace(/(https?:\/\/\S+)/g, '<a target="_BLANK" href="$1">$1</a>').replace(/@(\S+)/g, ' <a target="_BLANK" href="http://www.twitter.com/$1">@$1</a> ').replace(/#(\S+)/g, ' <a target="_BLANK" href="https://twitter.com/#!/search?q=%23$1">#$1</a>') + '</li>');
}
doSwap();
});
});
</script>
</head>
<body>
<div class="main">
<ul id="twitter-posts"></ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment