New Twitter API: using it for a custom twitter feed

Question

humans.
I had a custom Twitter feed widget that was working fine until the API update. The code was like this:

<ul id="twitter_update_list"><li>Twitter feed loading</li></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="https://api.twitter.com/1.1/statuses/user_timeline/username.json?callback=twitterCallback2&amp;count=4"></script>

Now that they have updated to API 1.1, this code doesn't work. So, my question is, does anyone now what I need to change to get this to work? Or do I just need to start using their feed widgets? Thanks for any answers!

Answer 1

You can get solution here with live example

http://codepen.io/jasonmayes/pen/Ioype

Answer 2

You can use this code as well to fetch your twitter feeds to any webpage. Please try by putting it to server (because some times i saw problem of not fetching feeds on local machine, but don't worry it would work on server - say with .php file extension)

   <script>

  var twitterFetcher=function(){function t(d){return d.replace(/<b[^>]*>(.*?)<\/b>/gi,function(c,d){return d}).replace(/class=".*?"|data-query-source=".*?"|dir=".*?"|rel=".*?"/gi,"")}function m(d,c){for(var f=[],e=RegExp("(^| )"+c+"( |$)"),g=d.getElementsByTagName("*"),b=0,a=g.length;b<a;b++)e.test(g[b].className)&&f.push(g[b]);return f}var u="",j=20,n=!0,h=[],p=!1,k=!0,l=!0,q=null,r=!0;return{fetch:function(d,c,f,e,g,b,a){void 0===f&&(f=20);void 0===e&&(n=!0);void 0===g&&(g=!0);void 0===b&&(b=!0);
  void 0===a&&(a="default");p?h.push({id:d,domId:c,maxTweets:f,enableLinks:e,showUser:g,showTime:b,dateFunction:a}):(p=!0,u=c,j=f,n=e,l=g,k=b,q=a,c=document.createElement("script"),c.type="text/javascript",c.src="//cdn.syndication.twimg.com/widgets/timelines/"+d+"?&lang=en&callback=twitterFetcher.callback&suppress_response_codes=true&rnd="+Math.random(),document.getElementsByTagName("head")[0].appendChild(c))},callback:function(d){var c=document.createElement("div");c.innerHTML=d.body;"undefined"===
  typeof c.getElementsByClassName&&(r=!1);var f=d=null,e=null;r?(d=c.getElementsByClassName("e-entry-title"),f=c.getElementsByClassName("p-author"),e=c.getElementsByClassName("dt-updated")):(d=m(c,"e-entry-title"),f=m(c,"p-author"),e=m(c,"dt-updated"));for(var c=[],g=d.length,b=0;b<g;){if("string"!==typeof q){var a=new Date(e[b].getAttribute("datetime").replace(/-/g,"/").replace("T"," ").split("+")[0]),a=q(a);e[b].setAttribute("aria-label",a);if(d[b].innerText)if(r)e[b].innerText=a;else{var s=document.createElement("p"),
  v=document.createTextNode(a);s.appendChild(v);s.setAttribute("aria-label",a);e[b]=s}else e[b].textContent=a}n?(a="",l&&(a+='<div class="user">'+"</div>"),a+='<p class="tweet">'+t(d[b].innerHTML)+"</p>",k&&(a+='<p class="timePosted">'+e[b].getAttribute("aria-label")+"</p>")):d[b].innerText?(a="",l&&(a+='<p class="user">'+f[b].innerText+"</p>"),a+='<p class="tweet">'+d[b].innerText+"</p>",k&&(a+='<p class="timePosted">'+e[b].innerText+"</p>")):(a="",l&&(a+='<p class="user">'+f[b].textContent+
  "</p>"),a+='<p class="tweet">'+d[b].textContent+"</p>",k&&(a+='<p class="timePosted">'+e[b].textContent+"</p>"));c.push(a);b++}c.length>j&&c.splice(j,c.length-j);d=c.length;f=0;e=document.getElementById(u);for(g="<ul>";f<d;)g+="<li>"+c[f]+"</li>",f++;e.innerHTML=g+"</ul>";p=!1;0<h.length&&(twitterFetcher.fetch(h[0].id,h[0].domId,h[0].maxTweets,h[0].enableLinks,h[0].showUser,h[0].showTime,h[0].dateFunction),h.splice(0,1))}}}();


  /*
  * ### HOW TO CREATE A VALID ID TO USE: ###
  * Go to www.twitter.com and sign in as normal, go to your settings page.
  * Go to "Widgets" on the left hand side.
  * Create a new widget for what you need eg "user timeline" or "search" etc. 
  * Now go back to settings page, and then go back to widgets page, you should
  * see the widget you just created. Click edit.
  * Now look at the URL in your web browser or see the script generated below the widget, you will see a long number like this:
  * 345735908357048478 in url or data-widget-id="345095893361512448" in the generated code
  * Use this as your ID below instead!
  */

  /***************
   * twitterFetcher.fetch('Put your twitter id here', 'ID of the container e.g id tweets of container div')
  */*********************

  twitterFetcher.fetch('345095893361512448', 'tweets', 5, true);

  function dateFormatter(date) {
    return date.toTimeString();
  }
</script>

    <div id="tweets" style="width: 200px;float:left;overflow:hidden"></div>