customized twitter feed script
HTML
<a class="twitter-timeline" href="https://twitter.com/proxene" data-widget-id="548633473184194561">Tweets de @proxene</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
CSS
.tw-feed {width:960px; opacity: 0}
.tw-feed a {color:#fff;text-decoration:none;}
.tw-feed a:hover {color:#ccc;text-decoration:none;}
.twitter-timeline {position:relative; background: #ddd; padding: 10px;}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
animation-name: fadeIn;
animation-duration: 1s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
JavaScript
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// cache the feed
var feed = document.querySelector('.tw-feed');
// Apply stylesheet to iframe
function applyTweetStyles (iframe) {
var style = document.createElement('style');
style.textContent =
'.timeline-TweetList-tweet {' +
' float: left;' +
' width: 32%;' +
' font-size: 12px;' +
' box-sizing: border-box;' +
'}' +
'.timeline-TweetList-tweet:nth-child(2) {' +
' margin-right: 2%;' +
' margin-left:2%;' +
'}' +
'.timeline-Tweet {' +
' background: #fff;' +
'}' +
'.SandboxRoot.env-bp-820 .timeline-Tweet-text {' +
' font-size: 16px !important;' +
' line-height: 24px !important;' +
'}'
;
iframe.contentDocument.head.appendChild(style);
// override the hight of the iframe and let the content control it
iframe.style.height = '0'
// show it
feed.classList.add('fade-in');
}
// we need to wait a sec to make sure Twitter has done it's thing
function checkForTwitterFeed () {
setTimeout(function(){
var iframe = feed.querySelector('iframe');
if (iframe) {
applyTweetStyles(iframe);
} else {
checkForTwitterFeed()
}
}, 250);
}
checkForTwitterFeed()