By continuing to navigate on this website, you accept the use of cookies to serve you more relevant services & content.
For more information and to change the setting of cookies on your computer, please read our Cookie Policy.

Get tweets with Javascript

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.

    Posted On
  • 09 March 2014
  • By
  • Micropyramid

Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
jQuery mouse events and touch events

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...
Image Cropping in Jquery (with Jcrop)

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...
Copy Text to ClipBoard event using Javascript

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...
open source packages

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
* We don't provide your email contact details to any third parties