cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>
  <head></head>
  <body>
	<section class="example1 container">
        <h2>Twitter custom widgets customized!</h2>
		<div id="tw-widget1">
		</div>
	</section>
	
	<section class="example2 container">
		<h2><i class="fa fa-twitter"></i> #fuckmylife</h2>
		<div id="tw-widget2"></div>
		
		<h3>Sadly, twitter does not support API :(</h3>
	</section>
		

  </body>
</html>
            
          
!
            
              @import url(https://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

h3
	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
		
            
          
!
            
               /*********************************************************************
 *  #### 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="https://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 https://www.w3schools.com/jsref/jsref_obj_date.asp for properties
// of a Date object.
function dateFormatter(date) {
  return date.toTimeString();
}

twitterFetcher.fetch(config4);
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console