Blogger Ever

Recent Tweets using Javascript in API 1.1

Getting hands on twitter recent tweets using Javascript is not a hurdle anymore. Using twitter post fetcher, a Javascript plugin you can fetch your recent tweets.
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="" 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.src=p+"://";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.


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


var config1 = {
  "id": 'XXXXXXXXXXX',
  "domId": 'tweets',
  "maxTweets": 5,
  "enableLinks": true
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 = {
  "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>';
    html += '</ul>';
    element.innerHTML = html;
 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.

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.