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
Locate the token variables in twitter-oauth.php and replace them with your own tokens.

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>

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.

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.

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.

Our Services

Targeted Crawlers

Crawlers for content extraction, restoration and competitive intelligence gathering.

Learn More

Gyroscope™ ERP Solutions

Fully integrated enterprise solutions for rapid and steady growth.

Learn More

E-Commerce

Self-updating websites with product catalog and payment processing.

Learn More

Featured Download

Twitter Feed Plugin v1.1

Display live twitter feed on your website using this stand-alone plugin.

Download    Documentation

Easy Rotating Banners

If you just want to put a rotating banner on your website, you don't need a bloated JavaScript library. Keep your site slim with this stand-alone banner plugin.

Download    Documentation

Train Slider

A sliding train banner widget that offers an advanced effect without costing a cent more resource.

Download    Documentation