Search code examples
facebooktwittermeteorfacebook-javascript-sdkiron-router

Facebook likebox and Twitter feed are blank on second view in Meteor app

I have put a Facebook likebox and a Twitter feed into my Meteor app's homepage. The first time you navigate there, it works fine. But if you leave the page (while staying on the site), and then return, they are blank. This happens on multiple browsers and on Mac and PC.

I am using Iron Router, and Twitter template code like this:

<template name="twitter_feed">
    <div class="news-box">
        <a class="twitter-timeline" href="..." data-widget-id="..."></a>
    </div>
</template>

with javascript:

Template.twitter_feed.rendered = function () {
    !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");
}

(It's the same if I put the javascript into the template directly using <script>.)

How can I fix this? Here's the site if it helps: Signup Zone.

Thanks!

Solution

  • Here's a solution that doesn't need any scripting.

    1. Use the iframe version of the Facebook likebox code.

    2. For Twitter, there is no iframe version. But we can make one by putting its anchor <a> tag in its own html document, and then including an iframe to that.

    Eg. for my Meteor app, I have put this twitter.html into public:

    <html>
<head>
  <meta charset="utf-8">
  <title>Twitter timeline</title>
  <style>
  body {
    margin: 0;
    padding: 0;
  }
  </style>
</head>

<body>
  <a class="twitter-timeline" href="..." data-widget-id="..."></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>
</body>
</html>

    And I have replaced the twitter_feed template with this:

    <template name="twitter_feed">
    <div class="news-box">
        <iframe src="/twitter.html" scrolling="no" frameborder="0" 
                style="border: none; overflow:hidden; width:404px; height:650px; float:right"
                allowTransparency="true"></iframe>
    </div>
</template>

    And now it shows fine on second and subsequent views.