Twitter Feed Plugin
Now you can display live Twitter feeds on your website with just a few lines of code. Comparing to other alternatives, this JavaScript plugin has no library dependency. It is extremely small, consumes minimal resource and very easy to customize.Try it out!
Simply type in a hash tag or search term and click on the "Load Feed" button. By default, a live feed for 10:10 Global will be loaded.Use it on Your Website
<style>
#viewer{border:solid 1px;height:80px;overflow:hidden;position:relative;} .feedcell{height:120px;overflow:hidden;clear:left;font-size:15px;}
.authorimg{float:left;margin:10px;}
.feedtext{font-size:18px;color:#444444;}
</style>
<div id="viewer">
<div id="myfeed" style="position:absolute;"></div>
</div>
<script src="http://www.antradar.com/download/twitterfeed.js"></script>
<script>
gettwitterfeed('myfeed','#UI');
</script>
#viewer{border:solid 1px;height:80px;overflow:hidden;position:relative;} .feedcell{height:120px;overflow:hidden;clear:left;font-size:15px;}
.authorimg{float:left;margin:10px;}
.feedtext{font-size:18px;color:#444444;}
</style>
<div id="viewer">
<div id="myfeed" style="position:absolute;"></div>
</div>
<script src="http://www.antradar.com/download/twitterfeed.js"></script>
<script>
gettwitterfeed('myfeed','#UI');
</script>
Customize the Look
The default renderer marks the feed with feedcell, authorimg and feedtext.You can use CSS to change the font size, color, etc. for the corresponding sections.
Customize the Animation
The animation's speed and tweening sequence can be customized using tag attributes:
<div id="myfeed" style="position:absolute;"
animspeed="80"
animseq="10,-25,-50,-80,-120,-140,-128,-120,-118,-120">
</div>
The default frame resolution is 100 msec per frame. Lower value gives higher frame rate but consumes more resource.
animspeed="80"
animseq="10,-25,-50,-80,-120,-140,-128,-120,-118,-120">
</div>
You can disable the animation by specifying only one frame:
animseq="0"
Customize the Content
You can have multiple feed viewers on one page. Better yet, you have total control over how each feed is rendered.The moment you call gettwitterfeed with an ID of the feed container, a custom rendering routine is registered with the plugin for you to further customize. In the case of the above sample code, the viewer id is "myfeed". The plugin calls the following function before using the default rendering routine:
function renderfeedcell_myfeed(data){
var html='';
var text=data.text;
var author=data.from_user;
html=author+': '+text;
return html;
}
The data object is directly returned by Twitter. Its structure may change over time,
but you can always use console.dir(data) in Firebug
to see exactly what fields the data object contains.
var html='';
var text=data.text;
var author=data.from_user;
html=author+': '+text;
return html;
}
Antradar 2013 ©
Antradar Software Inc.
Antradar Software Inc.
1-888-404-1337
http://www.antradar.com
Toronto,
ON M9R2R9
Canada