Jquery Twitter feed ticker for websites
Heads Up!
This code is no longed working due to Twitter API update. Here is the new method to embed. Click here to read new article.An easy way to put Twitter feeds ticker to any website. Original Jqtweet by Sea of clouds. If you have any issues with implement, you can contact the Author. We had done some frond-end customization for displaying tweets. Also, this twitter feed is using API version 1, New API has been released v1.1 , So this may not work when they withdraw API v1.0
How to install
Step 1: include jQuery and jquery.tweet.js files in your template’s <head>.
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script language="javascript" src="jquery.tweet.js" type="text/javascript"></script>
Step 2 : Also in <head>, Initialize tweet! on page load with your Username and other options
<script type='text/javascript'>
jQuery(function($){
$("#ticker").tweet({
username: "tnw",
page: 1,
avatar_size: null,
count: 20,
loading_text: "Bringing latest tweets..."
}).bind("loaded", function() {
var ul = $(this).find(".tweet_list");
var ticker = function() {
setTimeout(function() {
var top = ul.position().top;
var h = ul.height();
var incr = (h / ul.children().length);
var newTop = top - incr;
if (h + newTop <= 0) newTop = 0;
ul.animate( {top: newTop}, 500 );
ticker();
}, 5000);
};
ticker();
});
});
</script>
Step 3 : Style with our stylesheet in <head>, or modify as you like!
<link href="jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
Step 4 : In <body>, include a placeholder for your tweets. They’ll get loaded in via JSON. How fancy!
<div class="TwitterFeeds">
<div class="TwitterLogo"><img src="images/logo.png" alt="twitter logo" /></div>
<div id="ticker"></div>
<!--// TWITTER FOLLOW STARTS-->
<a href="https://twitter.com/web3canvas" class="twitter-follow-button" data-show-count="true">Follow @web3canvas</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!--// TWITTER FOLLOW ENDS-->
</div>