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 webdesign will be loaded.Getting your access tokens
Starting June 2013, Twitter has deprecated its v1.0 API. Now with the v1.1 API, requests for getting Twitter feeds have to be authenticated via OAuth.The main reason Twitter did this was to rate-limit the calls. You'll have to register an app at https://dev.twitter.com/:
Sign in with your Twitter account and select "My applications" on the top right dropdown menu.
Next, click on the "Create a new application" button and fill out the details. Our goal is to obtain two pairs of authentication tokens:
- OAuth access token and secret
- Consumer access token and secret
Use it on your website, just like before
Once you have completed the token setup, you can plug in twitter.js just like before. Make sure you host your own copy of the JavaScript file along with the two server-side scripts (twitter_proxy.php, twitter-oauth.php).We don't know when Twitter will change its API and access policy - again. But the syntax for using this plugin remains the same:
<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="twitterfeed.js"></script>
<script>
gettwitterfeed('myfeed','#webdesign');
</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="twitterfeed.js"></script>
<script>
gettwitterfeed('myfeed','#webdesign');
</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.user.name;
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.user.name;
html=author+': '+text;
return html;
}
Protect your app quota
Your twitter_proxy.php can be called by another website. This goes against your app quota. You can either use same-domain origin header to protect external usage, or you may simply hardcode the Twitter search query in twitter_proxy.php.Server-side Rendering
There are several benefits for embedding Twitter feeds directly in your HTML instead of JavaScript rendering. The last parameter jsonformat in twitter-oauth.php is used to set the response format. By default, JSON is off so that you can include the feeds directly in a PHP file.Antradar 2024 ©
Antradar Software Inc.
Antradar Software Inc.
1-888-404-1337
http://www.antradar.com
Toronto,
ON M8V1J5
Canada