mkeneqa/Custom Twitter Widget + fetch.markdown

## Custom Twitter Widget + fetch.markdown

      
    Raw
  

              Custom Twitter Widget + fetch.markdown
            
          
    Custom Twitter Widget + fetch

Nobody likes classic twitter widget. This is an example of how can twitter feed, hashtag, search query could be customized and used in any kind of website. As well us Twitter Widget Custom css styling
A Pen by Nerijus on CodePen.
License.

  
## index.html
<html>
  <head></head>
  <body>
	<section class="example1 container">
        <h2>Twitter custom widgets customized!</h2>
        <h5><a target="_blank" href="https://www.nerijusgood.com/coding/customize-twitter-widget-css-markup/">Tutorial how to fetch custom widgets</a>. by <a target="_blank" href="https://twitter.com/nerijusgood">@nerijusgood</a></h5>
		<div id="tw-widget1">
		</div>
	</section>

	<section class="example2 container">
		<h2><i class="fa fa-twitter"></i> #fuckmylife</h2>
		<div id="tw-widget2"></div>
	</section>
  </body>
</html>

## script.js
 /*********************************************************************
 *  #### Twitter Post Fetcher v12.0 ####
 *  Coded by Jason Mayes 2013. A present to all the developers out there.
 *  www.jasonmayes.com
 *  Please keep this disclaimer with my code if you use it. Thanks. :-)
 *  Got feedback or questions, ask here:
 *  http://www.jasonmayes.com/projects/twitterApi/
 *  Github: https://github.com/jasonmayes/Twitter-Post-Fetcher
 *  Updates will be posted to this site.
 *********************************************************************/
var twitterFetcher=function(){function w(a){return a.replace(/<b[^>]*>(.*?)<\/b>/gi,function(a,f){return f}).replace(/class=".*?"|data-query-source=".*?"|dir=".*?"|rel=".*?"/gi,"")}function m(a,c){for(var f=[],g=new RegExp("(^| )"+c+"( |$)"),h=a.getElementsByTagName("*"),b=0,k=h.length;b<k;b++)g.test(h[b].className)&&f.push(h[b]);return f}var x="",k=20,y=!0,p=[],s=!1,q=!0,r=!0,t=null,u=!0,z=!0,v=null,A=!0,B=!1;return{fetch:function(a){void 0===a.maxTweets&&(a.maxTweets=20);void 0===a.enableLinks&&
(a.enableLinks=!0);void 0===a.showUser&&(a.showUser=!0);void 0===a.showTime&&(a.showTime=!0);void 0===a.dateFunction&&(a.dateFunction="default");void 0===a.showRetweet&&(a.showRetweet=!0);void 0===a.customCallback&&(a.customCallback=null);void 0===a.showInteraction&&(a.showInteraction=!0);void 0===a.showImages&&(a.showImages=!1);if(s)p.push(a);else{s=!0;x=a.domId;k=a.maxTweets;y=a.enableLinks;r=a.showUser;q=a.showTime;z=a.showRetweet;t=a.dateFunction;v=a.customCallback;A=a.showInteraction;B=a.showImages;
var c=document.createElement("script");c.type="text/javascript";c.src="http://cdn.syndication.twimg.com/widgets/timelines/"+a.id+"?&lang="+(a.lang||"en")+"&callback=twitterFetcher.callback&suppress_response_codes=true&rnd="+Math.random();document.getElementsByTagName("head")[0].appendChild(c)}},callback:function(a){var c=document.createElement("div");c.innerHTML=a.body;"undefined"===typeof c.getElementsByClassName&&(u=!1);a=[];var f=[],g=[],h=[],b=[],n=[],e=0;if(u)for(c=c.getElementsByClassName("tweet");e<
c.length;){0<c[e].getElementsByClassName("retweet-credit").length?b.push(!0):b.push(!1);if(!b[e]||b[e]&&z)a.push(c[e].getElementsByClassName("e-entry-title")[0]),n.push(c[e].getAttribute("data-tweet-id")),f.push(c[e].getElementsByClassName("p-author")[0]),g.push(c[e].getElementsByClassName("dt-updated")[0]),void 0!==c[e].getElementsByClassName("inline-media")[0]?h.push(c[e].getElementsByClassName("inline-media")[0]):h.push(void 0);e++}else for(c=m(c,"tweet");e<c.length;)a.push(m(c[e],"e-entry-title")[0]),
n.push(c[e].getAttribute("data-tweet-id")),f.push(m(c[e],"p-author")[0]),g.push(m(c[e],"dt-updated")[0]),void 0!==m(c[e],"inline-media")[0]?h.push(m(c[e],"inline-media")[0]):h.push(void 0),0<m(c[e],"retweet-credit").length?b.push(!0):b.push(!1),e++;a.length>k&&(a.splice(k,a.length-k),f.splice(k,f.length-k),g.splice(k,g.length-k),b.splice(k,b.length-k),h.splice(k,h.length-k));c=[];e=a.length;for(b=0;b<e;){if("string"!==typeof t){var d=new Date(g[b].getAttribute("datetime").replace(/-/g,"/").replace("T",
" ").split("+")[0]),d=t(d);g[b].setAttribute("aria-label",d);if(a[b].innerText)if(u)g[b].innerText=d;else{var l=document.createElement("p"),C=document.createTextNode(d);l.appendChild(C);l.setAttribute("aria-label",d);g[b]=l}else g[b].textContent=d}d="";y?(r&&(d+='<div class="user">'+w(f[b].innerHTML)+"</div>"),d+='<p class="tweet">'+w(a[b].innerHTML)+"</p>",q&&(d+='<p class="timePosted">'+g[b].getAttribute("aria-label")+"</p>")):a[b].innerText?(r&&(d+='<p class="user">'+f[b].innerText+"</p>"),d+=
'<p class="tweet">'+a[b].innerText+"</p>",q&&(d+='<p class="timePosted">'+g[b].innerText+"</p>")):(r&&(d+='<p class="user">'+f[b].textContent+"</p>"),d+='<p class="tweet">'+a[b].textContent+"</p>",q&&(d+='<p class="timePosted">'+g[b].textContent+"</p>"));A&&(d+='<p class="interact"><a href="https://twitter.com/intent/tweet?in_reply_to='+n[b]+'" class="twitter_reply_icon">Reply</a><a href="https://twitter.com/intent/retweet?tweet_id='+n[b]+'" class="twitter_retweet_icon">Retweet</a><a href="https://twitter.com/intent/favorite?tweet_id='+
n[b]+'" class="twitter_fav_icon">Favorite</a></p>');B&&void 0!==h[b]&&(l=h[b],void 0!==l?(l=l.innerHTML.match(/data-srcset="([A-z0-9%_\.-]+)/i)[0],l=decodeURIComponent(l).split('"')[1]):l=void 0,d+='<div class="media"><img src="'+l+'" alt="Image from tweet" /></div>');c.push(d);b++}if(null===v){a=c.length;f=0;g=document.getElementById(x);for(h="<ul>";f<a;)h+="<li>"+c[f]+"</li>",f++;g.innerHTML=h+"</ul>"}else v(c);s=!1;0<p.length&&(twitterFetcher.fetch(p[0]),p.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 time line" or "search" etc.
 * Feel free to check "exclude replies" if you don't want replies in results.
 * Now go back to settings page, and then go back to widgets page and
 * you should see the widget you just created. Click edit.
 * Look at the URL in your web browser, you will see a long number like this:
 * 345735908357048478
 * Use this as your ID below instead!
 */

/**
 * How to use TwitterFetcher's fetch function:
 *
 * @function fetch(object) Fetches the Twitter content according to
 *     the parameters specified in object.
 *
 * @param object {Object} An object containing case sensitive key-value pairs
 *     of properties below.
 *
 * You may specify at minimum the following two required properties:
 *
 * @param object.id {string} The ID of the Twitter widget you wish
 *     to grab data from (see above for how to generate this number).
 * @param object.domId {string} The ID of the DOM element you want
 *     to write results to.
 *
 * You may also specify one or more of the following optional properties
 *     if you desire:
 *
 * @param object.maxTweets [int] The maximum number of tweets you want
 *     to return. Must be a number between 1 and 20. Default value is 20.
 * @param object.enableLinks [boolean] Set false if you don't want
 *     urls and hashtags to be hyperlinked.
 * @param object.showUser [boolean] Set false if you don't want user
 *     photo / name for tweet to show.
 * @param object.showTime [boolean] Set false if you don't want time of tweet
 *     to show.
 * @param object.dateFunction [function] A function you can specify
 *     to format date/time of tweet however you like. This function takes
 *     a JavaScript date as a parameter and returns a String representation
 *     of that date.
 * @param object.showRetweet [boolean] Set false if you don't want retweets
 *     to show.
 * @param object.customCallback [function] A function you can specify
 *     to call when data are ready. It also passes data to this function
 *     to manipulate them yourself before outputting. If you specify
 *     this parameter you must output data yourself!
 * @param object.showInteraction [boolean] Set false if you don't want links
 *     for reply, retweet and favourite to show.
 * @param object.showImages [boolean] Set true if you want images from tweet
 *     to show.
 * @param object.lang [string] The abbreviation of the language you want to use
 *     for Twitter phrases like "posted on" or "time ago". Default value
 *     is "en" (English).
 */

// ##### Simple example 1 #####
// A simple example to get my latest tweet and write to a HTML element with
// id "example1". Also automatically hyperlinks URLS and user mentions and
// hashtags.
var config1 = {
  "id": '539781433225932800',
  "domId": 'tw-widget1',
  "maxTweets": 1,
  "enableLinks": true
};
twitterFetcher.fetch(config1);


// ##### Simple example 2 #####
// A simple example to get my latest 5 of my favourite tweets and write to a
// HTML element with id "talk". Also automatically hyperlinks URLS and user
// mentions and hashtags but does not display time of post. We also make the
// request to Twitter specifiying we would like results where possible in
// English language.
var config2 = {
  "id": '546056869761257473',
  "domId": 'tw-widget2',
  "maxTweets": 3,
  "enableLinks": true,
  "showUser": true,
  "showTime": true,
  "showInteraction": false,
  "lang": 'en'
};
twitterFetcher.fetch(config2);


// ##### Simple example 3 #####
// A simple example to get latest 5 tweets for #API tag and shows any images
// attached to tweets.
var config3 = {
  "id": '539781433225932800',
  "domId": 'tw-widget3',
  "maxTweets": 5,
  "enableLinks": true,
  "showImages": true
};
twitterFetcher.fetch(config3);


// ##### Advanced example #####
// An advance example to get latest 5 posts using hashtag #API and write to a
// HTML element with id "tweets2" without showing user details and using a
// custom format to display the date/time of the post, and does not show
// retweets.
var config4 = {
  "id": '345690956013633536',
  "domId": 'example4',
  "maxTweets": 3,
  "enableLinks": true,
  "showUser": false,
  "showTime": true,
  "dateFunction": dateFormatter,
  "showRetweet": false
};

// For advanced example which allows you to customize how tweet time is
// formatted you simply define a function which takes a JavaScript date as a
// parameter and returns a string!
// See http://www.w3schools.com/jsref/jsref_obj_date.asp for properties
// of a Date object.
function dateFormatter(date) {
  return date.toTimeString();
}

twitterFetcher.fetch(config4);

## style.css
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600)

@mixin clearfix
	&:after
		content: ""
		display: table
		clear: both

// Common styles
html, body
	overflow-x: hidden

%awesome
	font-family: 'Fontawesome'
	-webkit-font-smoothing: antialiased

body
	background: #fff
	font-family: 'Open Sans', sans-serif
	margin: 0
	padding: 0

h2
	font-size: 2em
	text-align: center
	margin: 0

h5
	text-align: center
	margin: 0 0 3em

.container
	max-width: 960px
	margin: 0 auto
	padding: 1em 0 3em

	ul
		list-style: none
		margin: 0
		padding: 0

// Example #1

.example1
	position: relative
	background: #ecf0f1

	&:before, &:after
		content: ""
		position: absolute
		background: #ecf0f1
		top: 0
		bottom: 0
		width: 9999px

	&:before
		right: 100%
	&:after
		left: 100%

#tw-widget1
	li
		background: #fff
		max-width: 340px
		min-width: 300px
		position: relative
		border-radius: 6px
		box-shadow: 0px 0px 25px -4px rgba(0,0,0,0.4)
		margin: 0 auto

	a
		text-decoration: none


	// Top section: image + user
	.user
		background: #FD7A79
		padding: 20px 20px 16px
		position: relative
		border-radius: 6px 6px 0px 0px
		border-bottom: 1px solid darken(#FD7A79, 5%)

		a
			span
				position: absolute
				display: block
				top: 0
				text-align: left

			// Target name
			span[data-scribe="element:name"]
				position: absolute
				top: 21px
				left: 55px
				font-size: 16px
				color: white
				font-weight: bold

			// Target username (@screen-name)
			span[data-scribe="element:screen_name"]
				position: absolute
				top: 42px
				left: 74px
				font-size: 14px
				color: white

	// Tweet content
	.tweet
		margin: 0
		padding: 20px
		color: lighten(black, 30%)
		font-weight: bold

		a
			color: lighten(black, 30%)
			font-weight: bold
			text-decoration: none
		a[data-scribe="element:url"]
			color: #00ae8e
		a[data-scribe="element:hashtag"]
			color: #FD7A79

	// Buttons - footer

	.interact
		margin: 0
		padding: 0
		position: relative
		background: #04C6C4
		border-radius: 0px 0px 6px 6px
		border-top: 1px solid darken(#04C6C4, 5%)

		a
			padding: 15px 0
			text-decoration: none
			color: #fff
			background: #04C6C4
			&:hover
				color: lighten(black, 30%)
				background: darken(#04C6C4, 2%)
			&:active
				box-shadow: inset 0px 0px 10px -4px rgba(0,0,0,0.75)
			&:first-child
				border-radius: 0px 0px 0px 6px
			&:last-child
				border-radius: 0px 0px 6px 0px


		.twitter_reply_icon, .twitter_fav_icon, .twitter_retweet_icon
			text-align: center
			font-size: 0px
			width: calc(100% / 3)
			display: inline-block
			&:before
				font-size: 22px
				font-family: 'Fontawesome'
				-webkit-font-smoothing: antialiased
				padding-right: 4px
		.twitter_reply_icon
			&:before
				content: '\f112'
		.twitter_retweet_icon
			&:before
				content: '\f079'
		.twitter_fav_icon
			&:before
				content: '\f005'

	// Posted ON formating
	.timePosted
		margin: 0 0 10px
		padding: 0 20px
		font-size: 12px
		text-align: right
		&:before
			font-family: 'Fontawesome'
			-webkit-font-smoothing: antialiased
			content: '\f017'
			padding-right: 4px


// Example #2

.example2
	position: relative
	background: #1abc9c
	padding: 5em 0

	h2
		margin: 0 0 1.5em

	&:before, &:after
		content: ""
		position: absolute
		background: #1abc9c
		top: 0
		bottom: 0
		width: 9999px

	&:before
		right: 100%
	&:after
		left: 100%

#tw-widget2
	@include clearfix

	li
		width: 80%
		margin: 0 auto
		float: none
		@media (min-width: 48em)
			width: calc(100% / 3)
			float: left

	a
		text-decoration: none


	// Top section: image + user
	.user
		padding: 20px 20px 16px
		position: relative

		a
			span
				display: block
				text-align: left
				color: white
				font-weight: bold

			img[data-scribe="element:avatar"]
				display: none

			// Target name
			span[data-scribe="element:name"]
				font-size: 20px

			// Target username (@screen-name)
			span[data-scribe="element:screen_name"]
				font-size: 14px
				color: black

	// Tweet content
	.tweet
		margin: 0
		padding: 10px 20px
		color: white

		a
			font-weight: bold
			text-decoration: none
			color: white
		a[data-scribe="element:url"]
			text-decoration: underline
		a[data-scribe="element:hashtag"]
			color: #ecf0f1
		img[aria-label^="Emoji"]
			max-height: 14px

	// Posted ON formating
	.timePosted
		margin: 0
		padding: 0 20px
		font-size: 14px
		text-align: left
		&:before
			font-family: 'Fontawesome'
			-webkit-font-smoothing: antialiased
			content: '\f017'
			padding-right: 4px


## styles
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
	<html>
	<head></head>
	<body>
	<section class="example1 container">
	<h2>Twitter custom widgets customized!</h2>
	<h5><a target="_blank" href="https://www.nerijusgood.com/coding/customize-twitter-widget-css-markup/">Tutorial how to fetch custom widgets</a>. by <a target="_blank" href="https://twitter.com/nerijusgood">@nerijusgood</a></h5>
	<div id="tw-widget1">
	</div>
	</section>

	<section class="example2 container">
	<h2><i class="fa fa-twitter"></i> #fuckmylife</h2>
	<div id="tw-widget2"></div>
	</section>
	</body>
	</html>
	/*********************************************************************
	* #### Twitter Post Fetcher v12.0 ####
	* Coded by Jason Mayes 2013. A present to all the developers out there.
	* www.jasonmayes.com
	* Please keep this disclaimer with my code if you use it. Thanks. :-)
	* Got feedback or questions, ask here:
	* http://www.jasonmayes.com/projects/twitterApi/
	* Github: https://github.com/jasonmayes/Twitter-Post-Fetcher
	* Updates will be posted to this site.
	*********************************************************************/
	var twitterFetcher=function(){function w(a){return a.replace(/<b[^>]>(.?)<\/b>/gi,function(a,f){return f}).replace(/class=".?"\|data-query-source=".?"\|dir=".?"\|rel=".?"/gi,"")}function m(a,c){for(var f=[],g=new RegExp("(^\| )"+c+"( \|$)"),h=a.getElementsByTagName("*"),b=0,k=h.length;b<k;b++)g.test(h[b].className)&&f.push(h[b]);return f}var x="",k=20,y=!0,p=[],s=!1,q=!0,r=!0,t=null,u=!0,z=!0,v=null,A=!0,B=!1;return{fetch:function(a){void 0===a.maxTweets&&(a.maxTweets=20);void 0===a.enableLinks&&
	(a.enableLinks=!0);void 0===a.showUser&&(a.showUser=!0);void 0===a.showTime&&(a.showTime=!0);void 0===a.dateFunction&&(a.dateFunction="default");void 0===a.showRetweet&&(a.showRetweet=!0);void 0===a.customCallback&&(a.customCallback=null);void 0===a.showInteraction&&(a.showInteraction=!0);void 0===a.showImages&&(a.showImages=!1);if(s)p.push(a);else{s=!0;x=a.domId;k=a.maxTweets;y=a.enableLinks;r=a.showUser;q=a.showTime;z=a.showRetweet;t=a.dateFunction;v=a.customCallback;A=a.showInteraction;B=a.showImages;
	var c=document.createElement("script");c.type="text/javascript";c.src="http://cdn.syndication.twimg.com/widgets/timelines/"+a.id+"?&lang="+(a.lang\|\|"en")+"&callback=twitterFetcher.callback&suppress_response_codes=true&rnd="+Math.random();document.getElementsByTagName("head")[0].appendChild(c)}},callback:function(a){var c=document.createElement("div");c.innerHTML=a.body;"undefined"===typeof c.getElementsByClassName&&(u=!1);a=[];var f=[],g=[],h=[],b=[],n=[],e=0;if(u)for(c=c.getElementsByClassName("tweet");e<
	c.length;){0<c[e].getElementsByClassName("retweet-credit").length?b.push(!0):b.push(!1);if(!b[e]\|\|b[e]&&z)a.push(c[e].getElementsByClassName("e-entry-title")[0]),n.push(c[e].getAttribute("data-tweet-id")),f.push(c[e].getElementsByClassName("p-author")[0]),g.push(c[e].getElementsByClassName("dt-updated")[0]),void 0!==c[e].getElementsByClassName("inline-media")[0]?h.push(c[e].getElementsByClassName("inline-media")[0]):h.push(void 0);e++}else for(c=m(c,"tweet");e<c.length;)a.push(m(c[e],"e-entry-title")[0]),
	n.push(c[e].getAttribute("data-tweet-id")),f.push(m(c[e],"p-author")[0]),g.push(m(c[e],"dt-updated")[0]),void 0!==m(c[e],"inline-media")[0]?h.push(m(c[e],"inline-media")[0]):h.push(void 0),0<m(c[e],"retweet-credit").length?b.push(!0):b.push(!1),e++;a.length>k&&(a.splice(k,a.length-k),f.splice(k,f.length-k),g.splice(k,g.length-k),b.splice(k,b.length-k),h.splice(k,h.length-k));c=[];e=a.length;for(b=0;b<e;){if("string"!==typeof t){var d=new Date(g[b].getAttribute("datetime").replace(/-/g,"/").replace("T",
	" ").split("+")[0]),d=t(d);g[b].setAttribute("aria-label",d);if(a[b].innerText)if(u)g[b].innerText=d;else{var l=document.createElement("p"),C=document.createTextNode(d);l.appendChild(C);l.setAttribute("aria-label",d);g[b]=l}else g[b].textContent=d}d="";y?(r&&(d+='<div class="user">'+w(f[b].innerHTML)+"</div>"),d+='<p class="tweet">'+w(a[b].innerHTML)+"</p>",q&&(d+='<p class="timePosted">'+g[b].getAttribute("aria-label")+"</p>")):a[b].innerText?(r&&(d+='<p class="user">'+f[b].innerText+"</p>"),d+=
	'<p class="tweet">'+a[b].innerText+"</p>",q&&(d+='<p class="timePosted">'+g[b].innerText+"</p>")):(r&&(d+='<p class="user">'+f[b].textContent+"</p>"),d+='<p class="tweet">'+a[b].textContent+"</p>",q&&(d+='<p class="timePosted">'+g[b].textContent+"</p>"));A&&(d+='<p class="interact"><a href="https://twitter.com/intent/tweet?in_reply_to='+n[b]+'" class="twitter_reply_icon">Reply</a><a href="https://twitter.com/intent/retweet?tweet_id='+n[b]+'" class="twitter_retweet_icon">Retweet</a><a href="https://twitter.com/intent/favorite?tweet_id='+
	n[b]+'" class="twitter_fav_icon">Favorite</a></p>');B&&void 0!==h[b]&&(l=h[b],void 0!==l?(l=l.innerHTML.match(/data-srcset="([A-z0-9%_\.-]+)/i)[0],l=decodeURIComponent(l).split('"')[1]):l=void 0,d+='<div class="media"><img src="'+l+'" alt="Image from tweet" /></div>');c.push(d);b++}if(null===v){a=c.length;f=0;g=document.getElementById(x);for(h="<ul>";f<a;)h+="<li>"+c[f]+"</li>",f++;g.innerHTML=h+"</ul>"}else v(c);s=!1;0<p.length&&(twitterFetcher.fetch(p[0]),p.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 time line" or "search" etc.
	* Feel free to check "exclude replies" if you don't want replies in results.
	* Now go back to settings page, and then go back to widgets page and
	* you should see the widget you just created. Click edit.
	* Look at the URL in your web browser, you will see a long number like this:
	* 345735908357048478
	* Use this as your ID below instead!
	*/

	/**
	* How to use TwitterFetcher's fetch function:
	*
	* @function fetch(object) Fetches the Twitter content according to
	* the parameters specified in object.
	*
	* @param object {Object} An object containing case sensitive key-value pairs
	* of properties below.
	*
	* You may specify at minimum the following two required properties:
	*
	* @param object.id {string} The ID of the Twitter widget you wish
	* to grab data from (see above for how to generate this number).
	* @param object.domId {string} The ID of the DOM element you want
	* to write results to.
	*
	* You may also specify one or more of the following optional properties
	* if you desire:
	*
	* @param object.maxTweets [int] The maximum number of tweets you want
	* to return. Must be a number between 1 and 20. Default value is 20.
	* @param object.enableLinks [boolean] Set false if you don't want
	* urls and hashtags to be hyperlinked.
	* @param object.showUser [boolean] Set false if you don't want user
	* photo / name for tweet to show.
	* @param object.showTime [boolean] Set false if you don't want time of tweet
	* to show.
	* @param object.dateFunction [function] A function you can specify
	* to format date/time of tweet however you like. This function takes
	* a JavaScript date as a parameter and returns a String representation
	* of that date.
	* @param object.showRetweet [boolean] Set false if you don't want retweets
	* to show.
	* @param object.customCallback [function] A function you can specify
	* to call when data are ready. It also passes data to this function
	* to manipulate them yourself before outputting. If you specify
	* this parameter you must output data yourself!
	* @param object.showInteraction [boolean] Set false if you don't want links
	* for reply, retweet and favourite to show.
	* @param object.showImages [boolean] Set true if you want images from tweet
	* to show.
	* @param object.lang [string] The abbreviation of the language you want to use
	* for Twitter phrases like "posted on" or "time ago". Default value
	* is "en" (English).
	*/

	// ##### Simple example 1 #####
	// A simple example to get my latest tweet and write to a HTML element with
	// id "example1". Also automatically hyperlinks URLS and user mentions and
	// hashtags.
	var config1 = {
	"id": '539781433225932800',
	"domId": 'tw-widget1',
	"maxTweets": 1,
	"enableLinks": true
	};
	twitterFetcher.fetch(config1);


	// ##### Simple example 2 #####
	// A simple example to get my latest 5 of my favourite tweets and write to a
	// HTML element with id "talk". Also automatically hyperlinks URLS and user
	// mentions and hashtags but does not display time of post. We also make the
	// request to Twitter specifiying we would like results where possible in
	// English language.
	var config2 = {
	"id": '546056869761257473',
	"domId": 'tw-widget2',
	"maxTweets": 3,
	"enableLinks": true,
	"showUser": true,
	"showTime": true,
	"showInteraction": false,
	"lang": 'en'
	};
	twitterFetcher.fetch(config2);


	// ##### Simple example 3 #####
	// A simple example to get latest 5 tweets for #API tag and shows any images
	// attached to tweets.
	var config3 = {
	"id": '539781433225932800',
	"domId": 'tw-widget3',
	"maxTweets": 5,
	"enableLinks": true,
	"showImages": true
	};
	twitterFetcher.fetch(config3);


	// ##### Advanced example #####
	// An advance example to get latest 5 posts using hashtag #API and write to a
	// HTML element with id "tweets2" without showing user details and using a
	// custom format to display the date/time of the post, and does not show
	// retweets.
	var config4 = {
	"id": '345690956013633536',
	"domId": 'example4',
	"maxTweets": 3,
	"enableLinks": true,
	"showUser": false,
	"showTime": true,
	"dateFunction": dateFormatter,
	"showRetweet": false
	};

	// For advanced example which allows you to customize how tweet time is
	// formatted you simply define a function which takes a JavaScript date as a
	// parameter and returns a string!
	// See http://www.w3schools.com/jsref/jsref_obj_date.asp for properties
	// of a Date object.
	function dateFormatter(date) {
	return date.toTimeString();
	}

	twitterFetcher.fetch(config4);
	@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600)

	@mixin clearfix
	&:after
	content: ""
	display: table
	clear: both

	// Common styles
	html, body
	overflow-x: hidden

	%awesome
	font-family: 'Fontawesome'
	-webkit-font-smoothing: antialiased

	body
	background: #fff
	font-family: 'Open Sans', sans-serif
	margin: 0
	padding: 0

	h2
	font-size: 2em
	text-align: center
	margin: 0

	h5
	text-align: center
	margin: 0 0 3em

	.container
	max-width: 960px
	margin: 0 auto
	padding: 1em 0 3em

	ul
	list-style: none
	margin: 0
	padding: 0

	// Example #1

	.example1
	position: relative
	background: #ecf0f1

	&:before, &:after
	content: ""
	position: absolute
	background: #ecf0f1
	top: 0
	bottom: 0
	width: 9999px

	&:before
	right: 100%
	&:after
	left: 100%

	#tw-widget1
	li
	background: #fff
	max-width: 340px
	min-width: 300px
	position: relative
	border-radius: 6px
	box-shadow: 0px 0px 25px -4px rgba(0,0,0,0.4)
	margin: 0 auto

	a
	text-decoration: none


	// Top section: image + user
	.user
	background: #FD7A79
	padding: 20px 20px 16px
	position: relative
	border-radius: 6px 6px 0px 0px
	border-bottom: 1px solid darken(#FD7A79, 5%)

	a
	span
	position: absolute
	display: block
	top: 0
	text-align: left

	// Target name
	span[data-scribe="element:name"]
	position: absolute
	top: 21px
	left: 55px
	font-size: 16px
	color: white
	font-weight: bold

	// Target username (@screen-name)
	span[data-scribe="element:screen_name"]
	position: absolute
	top: 42px
	left: 74px
	font-size: 14px
	color: white

	// Tweet content
	.tweet
	margin: 0
	padding: 20px
	color: lighten(black, 30%)
	font-weight: bold

	a
	color: lighten(black, 30%)
	font-weight: bold
	text-decoration: none
	a[data-scribe="element:url"]
	color: #00ae8e
	a[data-scribe="element:hashtag"]
	color: #FD7A79

	// Buttons - footer

	.interact
	margin: 0
	padding: 0
	position: relative
	background: #04C6C4
	border-radius: 0px 0px 6px 6px
	border-top: 1px solid darken(#04C6C4, 5%)

	a
	padding: 15px 0
	text-decoration: none
	color: #fff
	background: #04C6C4
	&:hover
	color: lighten(black, 30%)
	background: darken(#04C6C4, 2%)
	&:active
	box-shadow: inset 0px 0px 10px -4px rgba(0,0,0,0.75)
	&:first-child
	border-radius: 0px 0px 0px 6px
	&:last-child
	border-radius: 0px 0px 6px 0px




	.twitter_reply_icon, .twitter_fav_icon, .twitter_retweet_icon
	text-align: center
	font-size: 0px
	width: calc(100% / 3)
	display: inline-block
	&:before
	font-size: 22px
	font-family: 'Fontawesome'
	-webkit-font-smoothing: antialiased
	padding-right: 4px
	.twitter_reply_icon
	&:before
	content: '\f112'
	.twitter_retweet_icon
	&:before
	content: '\f079'
	.twitter_fav_icon
	&:before
	content: '\f005'

	// Posted ON formating
	.timePosted
	margin: 0 0 10px
	padding: 0 20px
	font-size: 12px
	text-align: right
	&:before
	font-family: 'Fontawesome'
	-webkit-font-smoothing: antialiased
	content: '\f017'
	padding-right: 4px


	// Example #2

	.example2
	position: relative
	background: #1abc9c
	padding: 5em 0

	h2
	margin: 0 0 1.5em

	&:before, &:after
	content: ""
	position: absolute
	background: #1abc9c
	top: 0
	bottom: 0
	width: 9999px

	&:before
	right: 100%
	&:after
	left: 100%

	#tw-widget2
	@include clearfix

	li
	width: 80%
	margin: 0 auto
	float: none
	@media (min-width: 48em)
	width: calc(100% / 3)
	float: left

	a
	text-decoration: none


	// Top section: image + user
	.user
	padding: 20px 20px 16px
	position: relative

	a
	span
	display: block
	text-align: left
	color: white
	font-weight: bold

	img[data-scribe="element:avatar"]
	display: none

	// Target name
	span[data-scribe="element:name"]
	font-size: 20px

	// Target username (@screen-name)
	span[data-scribe="element:screen_name"]
	font-size: 14px
	color: black

	// Tweet content
	.tweet
	margin: 0
	padding: 10px 20px
	color: white

	a
	font-weight: bold
	text-decoration: none
	color: white
	a[data-scribe="element:url"]
	text-decoration: underline
	a[data-scribe="element:hashtag"]
	color: #ecf0f1
	img[aria-label^="Emoji"]
	max-height: 14px

	// Posted ON formating
	.timePosted
	margin: 0
	padding: 0 20px
	font-size: 14px
	text-align: left
	&:before
	font-family: 'Fontawesome'
	-webkit-font-smoothing: antialiased
	content: '\f017'
	padding-right: 4px