Recent Tweets using Javascript in API 1.1

With the Twitter API v1.1, many of the client side features were disabled and developers were unable to get recent tweets using any client side language. While finding the solution I found a Javascript plugin - Twitter post fetcher - that uses Twitter recent tweet widget stuff to parse the latest tweets. Have a look to make through it.

How-to-use this stuff

The how-to guide is quite simpler but a little complicated on widget side. You need to follow the steps below to get your recent tweets for a user.

• Step 1 : Go to Twitter Widgets [Requires login access]
• Step 2 : Create your recent post widget.
• Step 3 : Get the id from the code, use the instructions below:

The code that you will receive will be

<a class="twitter-timeline" href="https://twitter.com/bloggerever" data-widget-id="XXXXXXXXXXX">Tweets by @bloggerever</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Copy the code highlighted (hidden due to privacy issues). Save this code on your pad and follow the further steps.

• Step 4 : Include the Twitter post fetcher (minified version).
• Step 5 : Show me the code!

HTML

<div id='tweets'></div>

Javascript

var config1 = {
  "id": 'XXXXXXXXXXX',
  "domId": 'tweets',
  "maxTweets": 5,
  "enableLinks": true
};
twitterFetcher.fetch(config1);

Replace the code right on highlighted place.

What's next

There are various more features provided by the plugin developers. I have selected something important from the Docs of the plugin.

The plugin allows you to give callback after getting the tweets. Once the tweets are achieved you have to put the tweets in plain text like we do after ajax request.

var config5 = {
  "id": 'XXXXXXXXXXXXX',
  "domId": '',
  "maxTweets": 3,
  "enableLinks": true,
  "showUser": true,
  "showTime": true,
  "dateFunction": '',
  "showRetweet": false,
  "customCallback": handleTweets,
  "showInteraction": false
};
function handleTweets(tweets){
    var x = tweets.length;
    var n = 0;
    var element = document.getElementById('tweets');
    var html = '<ul>';
    while(n < x) {
      html += '<li>' + tweets[n] + '</li>';
      n++;
    }
    html += '</ul>';
    element.innerHTML = html;
}
twitterFetcher.fetch(config5);

 Taking tweets as argument, you can create your own markup; quiet helpful while creating some sort of slider or something like that kind of thing.

Important CSS classes

• tweet (class): a "p" tag holds the content of a tweet.
• timePosted (class): a "p" tag holds the date of tweet posted.
• interact (class): a "p" tag holds three links that are > reply, retweet, favourite.
• twitter_reply_icon (class):  a "a" tag holds link to reply link of the tweet.
• twitter_retweet_icon (class): a "a" tag holds link to retweet link to the tweet.
• twitter_fav_icon (class): a "a" tag holds link to favourite link to the tweet.