Due to change in twitter API, its been hard to get tweets from twitter to your site using javascript. We got new API version 1.1 and the old version 1 is not working any more, so we have to live with what ever 1.1 offers. This version of API supports widgets to keep in our sites, but thats not enough if we want to customize tweets using javascript to fit our sites look and functionality. We want json of the tweets, then we can do what ever we want with those. Its simple as creating a widget in twitter and then we get tweets from it to form json.

  1. Go to www.twitter.com and sign in then go to your settings page.
  2. Go to "Widgets" on the left hand side.
  3. Create a new widget as you like.
  4. Check "exclude replies" if you dont want replies in results.
  5. Now go back to settings -> widgets page, you will see the widget you just created. Click edit.
  6. Now look at the URL in your web browser, you will see a long number like this: 441110970094473216.
  7. Use this as your ID below!
var tw = function () {
  return {
    fetch: function (twid, tc, cbf) {
    (tweets_count=tc, cbfunc = cbf, c = document.createElement("script"), c.type = "text/javascript", c.src = "//cdn.syndication.twimg.com/widgets/timelines/" + twid + "?&lang=en&callback=tw.callback&suppress_response_codes=true&rnd=" + Math.random(), document.getElementsByTagName("head")[0].appendChild(c))
    },
    callback: function (e) {
      var c = document.createElement("div");
      c.setAttribute("id", "twitter-stage");
      c.innerHTML = e.body;
      c.style.display="none";
      document.body.appendChild(c);
      var tweet_json = [];
      usr_imgs = document.querySelectorAll('#twitter-stage div ol.h-feed li div.header div a.u-url.profile img.u-photo.avatar');
      usr_names = document.querySelectorAll('#twitter-stage ol li div.header span.full-name span');
      usr_screen_names = document.querySelectorAll('#twitter-stage ol li div.header a.u-url.profile span b');
      tweets = document.querySelectorAll('#twitter-stage ol li div.e-entry-content p.e-entry-title');
      dates = document.querySelectorAll('#twitter-stage ol.h-feed li div.header a time');
      tweetids = document.querySelectorAll('#twitter-stage ol.h-feed li div ul li:first-of-type a');
      for(i=0;i

Now include the file and use it as following

function tweets(tws){
  $.each(tws, function(i,o){
    // You can do as you wish with the values in 'o' objects.
    console.log(o);
  });
}
// this will fetch tweets of the given widget id and pass the tweets to tweets function
tw.fetch('441110970094473216', 20, tweets);

This is much straight forward approach, you can extend it as you like.

Subscribe To our news letter

Subscribe to our news letter to receive latest blog posts into your inbox. Please fill your email address in the below form.
*We don't provide your email contact details to any third parties
Latest Comments
Related Articles
Copy to ClipBoard event using Javascript Swetha Naretla

Here you can learn about copy to clipboard using JavaScript. Copying content from a web form without needing to use the default browser functions. For ...

Continue Reading...
Image Cropping in Jquery (with Jcrop) Chaitanya Kattineni

We are having many image cropping plugins developed in jquery that are being used to crop an image. Jcrop is one of the plugins developed ...

Continue Reading...
jQuery mouse events and touch events Vidyasagar Rudraram

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler ...

Continue Reading...