Hi! When I tried to embed the timeline to our website, in chrome the timeline wasn’t rendered but just a link.
In my edge, it works normally. A colleague also told me he couldn’t see the timeline in the IE browser as well.
There’s a lot of similar problems mentioned in the past posts, but their solutions don’t seem to work to me.
My code is like this (generated by publish_twitter_com)
<a class="twitter-timeline" href="https://twitter.com/eMediaResearch?ref_src=twsrc%5Etfw">Tweets by eMediaResearch</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Thank you so much for any help you could offer!
This is nearly always due to the widgets.js code not being included in the html or being loaded before the timeline, so it never gets replaced.
Since it works in other browsers, it’s most likely the html that represents the timeline is not loaded when widgets.js was already run - maybe it would help to move <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> to the bottom of the html page, and make sure there is only one of those widgets.js calls in the page.
1 Like
Hi Igor! Thank you so much for the tips! Though I tried to move the line of widget.js to the bottom and make sure there is only one widget.js called on that page, it doesn’t seem to work in Chrome.
That part of code is like:
<div class="col-md-4">
<!-- TWITTER -->
<a class="twitter-timeline" href="https://twitter.com/eMediaResearch?ref_src=twsrc%5Etfw" id="twitter">Tweets by eMediaResearch</a>
<script>
var nitems = showAllEvents('.rss-calendar', 'https://iiw.kuleuven.be/onderzoek/emedia/events/today/RSS',
'https://iiw.kuleuven.be/onderzoek/emedia/events/upcoming/RSS');
document.getElementById("twitter").setAttribute("data-height", $('#datapage').height() + 250);</script></div>
</div>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
I’ll really appreciate that if you have any other ideas.
it’s not really possible to pinpoint exactly what could be wrong from a small snippet without the context of the pull page and how it’s generated - the snippet of code looks ok.
this extra script
document.getElementById("twitter").setAttribute("data-height", $('#datapage').height() + 250);
is not going to work, because generally when it works, the entire <a> tag gets replaced by widgets.js. Maybe try without this extra bit. The embed should adjust responsively itself.
Thank you so much Igor!
We’ve also embedded Youtube on that page. Could that be the cause?
This is the code. I wish it could help.
<style type="text/css">.date { font-weight: bold; }
.nolink, .nolink:hover { text-decoration: none; line-height:1.3; display: inline-block; }
.nobordertop:first-child td{ border-top-style: none; }
</style>
<div class="jumbotron jumbotron-fluid jumbotron-banner img-responsive banner" style="background-image: url("resolveuid/684188c4e34f445596550ad2b86790c0/@@images/image");"> </div>
<div class="jumbotron jumbotron-fluid jumbotron-banner img-responsive banner" style="background-image: url("resolveuid/2e625b53a3aa495d9802d8f160d575be/@@images/image");"> </div>
<div class="jumbotron jumbotron-fluid jumbotron-banner img-responsive banner" style="background-image: url("resolveuid/8436862fa0d541c08781de6fea653306/image");"> </div>
<div class="jumbotron jumbotron-fluid jumbotron-banner img-responsive banner" style="background-image: url("resolveuid/431ccf7a97424671afbf08a4f9fda640/image");"> </div>
<div class="jumbotron jumbotron-fluid jumbotron-banner img-responsive banner" style="background-image: url("resolveuid/e146346af15f47a4bbd7a44413549f54/@@images/image");"> </div>
<div class="jumbotron jumbotron-fluid jumbotron-banner img-responsive banner" style="background-image: url("resolveuid/a6cf8f65fe804dbc8a71551a087d6fc9/image");"> </div>
<script>
var jumbos = document.getElementsByClassName('jumbotron');
for(i=0; i<jumbos.length; i++){
jumbos[i].innerHTML = '<div class="container"><div class="row"><div class="col-sm-6"><div class="card card-block card_banner" id="imageDiv" style="color:white; background-color:rgba(64,64,64,0.85);"><img src="resolveuid/e657ecc65995486d8a55cb0539c9ec11/@@images/image/preview" style="width:50%;"></img><p><br/>Human-Centered Systems for Health Care, Learning, Arts and Entertainment</p><p><a class="btn btn-primary" href="resolveuid/a8e0ec7049bb419f85a189cbdd1cf710">Tell me More</a></p></div></div></div></div>';
}
</script><script>
var myIndex = 0;
carousel3();
function carousel3() {
var i;
var x = document.getElementsByClassName("banner");
for (i = 0; i < x.length; i++) {
x[i].style.display='none';
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display='block';
setTimeout(carousel3, 4000); // Change image every 4 seconds
}
</script><script>
function showAllEvents(rssfeed, linktoday, linkupcoming) {
$.get(linktoday, function (datatoday) {
$.get(linkupcoming, function (dataupcoming) {
if($(datatoday).find("item").size() + $(dataupcoming).find("item").size() == 0) {
$(rssfeed).append('<p>No planned events<br/> </p>');
}else {
var nitemstoday = showEvents(rssfeed, linktoday);
var nitemsupcoming = showEvents(rssfeed, linkupcoming);
}
});
});
}
function showEvents(rssfeed, link) {
var i = 0;
$.get(link, function (data) {
$(data).find("item").each(function () {
if(i == 2) {
return false;
}
var el = $(this);
var time = '';
var date = '';
if(el.find('dc\\:date').text() == '') {
time = el.find('date').text().split('T')[1].substring(0,5);
date = el.find('published').text();
} else {
time = el.find('dc\\:date').text().split('T')[1].substring(0,5);
date = el.find('dc\\:published').text();
}
$(rssfeed).append(
'<p><table><tr class="nobordertop"><td><a class="nolink" href="' + el.find('link').text() + '" ' + 'title="' + el.find('title').text() + '"><span class="date">' + date + ', ' + time + '</span><br />' +
el.find('title').text() + '</a></td></tr></table></p>');
i++;
});
return i;
});
}
</script><script>
function showNews(rssfeed, link) {
var i = 0;
$.get(link, function (data) {
$(data).find("item").each(function () {
if(i == 3) {
return false;
}
var el = $(this);
$(rssfeed).append(
'<a class="nolink" href="' + el.find('link').text() + '"><table><tr class="nobordertop"><td><img src="'+ el.find('link').text() +'/image_preview" alt="'+ el.find('title').text() +'" width="64"></td><td class="nolink nobordertop">'+el.find('title').text()+'</td></tr></table></a>');
i++;
});
return i;
});
}
</script><script>
function showAllVacancies(rssfeed, link) {
$.get(link, function (data) {
var i = 0;
$(data).find("item").each(function () {
var el = $(this);
$(rssfeed).append(
'<ul>' + '<li>' + el.find('title').text() + '</li>' + '</ul>');
i++;
});
if(i==0){
$(rssfeed).append('<p>Currently no vacancies available<br/> </p>');
}else{
$(rssfeed).append('<p><a class="btn btn-ghost-inv" href="http://resolveuid/15adf6f3c6b447589fa74aa15735fc0c">Tell me more</a></p>');
}
});
}
</script>
<div class="row" id="datapage">
<div class="col-md-4">
<div class="row">
<div class="col-md-12 flex-md-last"><!-- CONTACT -->
<div class="kul-card-color card card-gray">
<div class="card-block">
<h2>CONTACT</h2>
<p><i class="material-icons">mail_outline</i> <a href="https://www.kuleuven.be/wieiswie/nl/person/ue712344">eMedia</a> </p>
<p><i class="material-icons">place</i> <a href="https://iiw.kuleuven.be/english/groupt/groupt">Campus Group T</a></p>
<p><a class="btn btn-ghost-inv" href="http://resolveuid/85b537f8252947fa93470d0a75ce32cb">Tell me more</a></p>
</div>
</div>
<!-- NEWS --></div>
<div class="col-md-12 flex-md-first"><!-- EVENTS -->
<div class="kul-card-image card card-secondary">
<div class="noindex collection card-block card-activity">
<div class="rss-calendar">
<h2>Events <a href="https://iiw.kuleuven.be/onderzoek/emedia/events/upcoming/RSS" target="_blank"><img alt="RSS feed upcoming events" class="rss-img" src="rss.png" /></a></h2>
</div>
<p class="more pull-xs-right"><a href="http://resolveuid/1536ee599d57448f9982c0454496e890">Tell me more</a></p>
</div>
</div>
</div>
<div class="col-md-12"><!-- PROJECTS -->
<div class="kul-card-image card card-gray">
<div class="card-block">
<h2>Projects</h2>
<p>Explore the current and previous research projects performed by e-Media researchers.</p>
<p><a class="btn btn-ghost-inv" href="http://resolveuid/069f0337563c437ca8a9a51770358859">Tell me more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4"><!-- PEOPLE -->
<div class="kul-card-image card card-gray">
<div class="card-block">
<h2>People</h2>
<p>Get to know the e-Media researchers.</p>
<p><img alt="" src="resolveuid/6f0e42b38048420c9467174ff06121f3/@@images/image/preview" /></p>
<p><a href="http://resolveuid/f3b497639f3e4db9b74cc5f861402f55">Meet our principal investigators</a><br />
<a href="http://resolveuid/be20ee9e2cab4bf196e926686becd7ec">Meet our researchers</a><br />
<a href="http://resolveuid/c3f10e0fe1b947c39e0b0c72450fbc20">Meet our alumni</a></p>
</div>
</div>
<!-- YOUTUBE -->
<div><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLvexcpmigFOthAtYxwWrZtXt2xkUG23zF"></iframe></div>
<!-- VACANCIES -->
<div class="kul-card-image card card-gray">
<div class="card-block">
<div class="rss-vacancies">
<h2>Vacancies</h2>
</div>
<script>
showAllVacancies('.rss-vacancies', 'https://iiw.kuleuven.be/onderzoek/emedia/vacancies/available-vacancies/RSS');</script>
</div>
</div>
</div>
<div class="col-md-4"><!-- TWITTER --><a class="twitter-timeline" href="https://twitter.com/eMediaResearch?ref_src=twsrc%5Etfw" id="twitter">Tweets by eMediaResearch</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><script>
var nitems = showAllEvents('.rss-calendar', 'https://iiw.kuleuven.be/onderzoek/emedia/events/today/RSS', 'https://iiw.kuleuven.be/onderzoek/emedia/events/upcoming/RSS');
</script></div>
</div>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
I can’t tell just from looking at the html like that - you may be able to see some errors or more output if you open your page with Chrome Developer Tools Finding Your Browser's Developer Console | Balsamiq
A million thanks, Igor! It’s great to know such a tool!
Strangely, I used another computer today to check that page, then I found the embedded timeline could be rendered properly by Chrome on that computer. 
But still, it doesn’t work in Chrome on my computer nor my colleagues… Thank you so much if you have any idea about that!
If it works on other machines but not on your one or your colleagues - could it be some firewall / security settings preventing calls from loading? Just a guess. I would check to see what the differences in environment / configuration are between the browsers that work and ones that do not.
system
Closed
#9
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
