Hello, hello, hello …. (I can hear my voice echoing in the darkness)
Is there anyone out there?
Surely I can’t be the only one on the planet looking for a new solution to get full width Twitter Timelines on responsive WordPress sites?
Doesn’t anyone have an answer?
We can’t let the faceless techocrats at Twitter do this to us!
I live in hope ….
Here is a brilliant solution provided Jake90xx from the Twitter Forum:
https://twittercommunity.com/t/how-can-i-extend-width-of-twitter-timeline-to-100-page-size/46101/6
Here is my interpretation for WordPress Users:
1. Create a Twitter Timeline from your Twitter page (Profile – Settings – Widgets – Add New). Copy and paste the code onto your WordPress Page.
2. On your css style sheet add the following code:
iframe[id^='twitter-widget-0'] {
height:600px !important;
margin-bottom:10px !important;
width:100% !important;
}
3. On your header.php file add the following code under </head> (ignore single quote marks at start and finish):
` <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
<script type=”text/javascript”>
$(window).on(‘load’, function () {
$(‘iframe[id^=twitter-widget-]’).each(function () {
var head = $(this).contents().find(‘head’);
if (head.length) {
head.append(‘<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>’);
}
$(‘#twitter-widget-0’).append($(‘<div class=timeline>’));
})
});
</script>`
Sorry to say but, for some reason the solution above has stopped working again. No idea why. So – back to square one.
Any ideas anyone???
I have tried your JavaScript solution and it works!
But we must know when the Twitter Widget has fully loaded.
I suggest to use “setInterval” to check periodically and patch the iframe-timeline using your JavaScript code. Don’t forget to remove “setInterval” after your hack code already triggered.
Below is my code
var interval=null;
var patched=false;
function patchTimeline(){
interval= setInterval(function(){
var windowWidth=jQuery(window).width();
if((windowWidth >= 768) && (windowWidth <= 1024)){
if(patched===false){
if(jQuery('#tweets iframe.twitter-timeline').length > 0){
var head = $('#tweets iframe.twitter-timeline').contents().find('head');
head.append('<style type="text/css">.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>');
patched=true;
}
}else{
removeInterval();
}
}else{
removeInterval();
}
},3000); // do this interval for every 3 seconds
}
function removeInterval(){
interval=null;
}
jQuery(document).ready(function(){
patchTimeline();
});
