Twitter Post Fetcher - compiled

Allows you to fetch your twitter posts without using the ridiculous 1.1 API which has been forced upon us. Pure JavaScript baby!

by DJB31st

HTML

<html>
    <head></head>
    <body>
        <div id="tweets"></div>
    </body>
</html>

CSS

html body {
    background: none repeat scroll 0 0 transparent;
    display: block;
}
html, body, h1, h2, h3, blockquote, p, ol, ul, li, img, iframe, button {
    border: 0 none;
    font: 12px/16px "Comic Sans MS",Arial,sans-serif;
    list-style: none outside none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-decoration: none;
    text-transform: none;
    vertical-align: baseline;
}
b, i {
    font-style: normal;
    font-weight: normal;
}
abbr {
    border-bottom: 0 none;
}
.p-author:before, .p-author:after, .cards-base:before, .cards-base:after {
    content: "";
    display: table;
}
.p-author:after, .cards-base:after {
    clear: both;
}
.tweet, .root, .p-author {
}
.root, .tweet, .footer, .detail-expander, .header, .timeline {
    position: relative;
}
button.load-more, .tweet-box-button, .no-tweets-pane .load-tweets {
    -moz-box-sizing: border-box;
}
.no-tweets-pane p {
    font-size: 20px;
    line-height: 24px;
}
.timeline-header h1.summary {
    font-size: 18px;
    line-height: 18px;
}
.timeline .e-entry-title, .p-author .p-name, .cards-base h3, .new-tweets-bar button, .load-tweets, .no-more-pane {
    font-size: 14px;
    line-height: 16px;
}
.tweet-box-button {
    font-size: 13px;
}
.stats strong, .timeline-header- .byline, .timeline-header .list-description {
    font-size: 12px;
    line-height: 18px;
}
.timeline-header .byline {
    margin: 2px 0;
}
.stats span {
    font-size: 10px;
}
.p-author a, .e-entry-title, .cards-base h3, .cards-base .cards-content p {
    line-height: 18px;
}
.e-entry-title a {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a, a:visited, a:active, a:hover, a:focus, .p-author .full-name, .p-author a.profile, .p-author a.profile:hover .p-nickname, .p-author a.profile:focus .p-nickname, .p-author a.profile:hover .p-nickname b, .p-author a.profile:focus .p-nickname b, .cards-base a.profile:hover .p-nickname, .cards-base a.profile:focus .p-nickname,...

JavaScript

/*********************************************************************
	  #### Twitter Post Fetcher! ####
      Coded by @DJB31st (Dijitul Developments) 2013.
      www.dijituldevelopments.co.uk
      www.dijitul.com
	  Original Ideas From by Jason Mayes 2013.
	  www.jasonmayes.com (http://jsfiddle.net/jmayes/maT2Z/)
	  Please keep this disclaimer with my code if you use it. Thanks. :-)
	  Got feedback or questions, ask here: http://goo.gl/JinwJ
	********************************************************************/

	var twitterFetcher=function(){
	var d=null;return{
	fetch:function(a,b){d=b;var c=document.createElement("script");c.type="text/javascript";c.src="http://cdn.syndication.twimg.com/widgets/timelines/"+a+"?&lang=en&callback=twitterFetcher.callback&suppress_response_codes=true&rnd="+Math.random();document.getElementsByTagName("head")[0].appendChild(c)},callback:function(a){var b=document.createElement("div");b.innerHTML=a.body;d(b);}}}();

	/*
	* ### HOW TO USE: ###
	* Create an ID:
	* 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 "user timeline". Feel free to check "exclude replies"
	* if you dont want replies in results.
	* 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, you will see a long number like this:
	* 345735908357048478
	* Use this as your ID below instead!
	*/

	twitterFetcher.fetch('345190342812909568', function(html){
	  var element = document.getElementById('tweets');
	  element.innerHTML = html.innerHTML;
	});