1

I have some Tweets embedded on a page in my Angular app using Twitter's widgets.js. They have been working for quite some time. I noticed today that they suddenly stopped working. I've been trying to debug the issue, but I can't seem to get the Tweets to load, no matter what I try. There are no errors in the console. If I manually initialize the Tweets from the console, the code appears to execute normally. I can verify this by logging something to the console within a then function that should only be called when the promise returned by twttr.widgets.createTweet() is resolved.

In my application.html.erb I have the following:

<!-- Twitter oEmbed Widget -->
<script>
    window.twttr = (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);

        t._e = [];
        t.ready = function(f) {
            t._e.push(f);
        };

        return t;
    }(document, "script", "twitter-wjs"));
</script>

In my directive template I specify a div with the Tweet id like so:

<div class="fade" ng-show="!loading" ng-if="post.provider === 'twitter'" id="{{'post_' + post.id}}"></div>

Then in my directive's controller, I initialize the widget after a delay to ensure that the DOM is ready, like so:

function loadWidget() {
    if($scope.post.provider === 'twitter') {
        $timeout(function() {
            if(angular.element('#post_' + $scope.post.id).find('iframe').length === 0) {
                twttr.widgets.createTweet($scope.post.twitter_id, document.getElementById('post_' + $scope.post.id)).then(function(resp) {
                    $timeout(function() {
                        $scope.loading = false;
                    })
                });
            };
        }, 2500);
    };
};

If I insert a debugger within my $timeout block I can see that angular.element('#post_' + $scope.post.id) returns a valid div from the DOM. I can also confirm that my Tweet is on Twitter if I go to my account.

This setup has been working fine for awhile now. I haven't made any changes to it. In fact it was working just a few hours ago! What I'd like to know is how I can debug it and figure out why it suddenly stopped working. I checked the status of the Twitter API and it says it has had 100% uptime for the past 24 hours.

Update

I managed to reproduce the issue in a jsFiddle. From what I can tell it seems to be a problem with the Tweets from my account I use for testing. As you can see in the Fiddle I specify two Tweet IDs - tweetA and tweetB - and then embed both of them. The first one, which is mine, fails to load. The second one loads just fine.

Daniel Bonnell
  • 4,817
  • 9
  • 48
  • 88
  • 1
    Have you [protected your tweets](https://support.twitter.com/articles/20169886) recently? – Mike Cluck Mar 10 '16 at 21:01
  • 1
    Yes, that was the issue it turns out. Someone else on my team set the account to private but didn't say anything. Thought I was going crazy. – Daniel Bonnell Mar 10 '16 at 21:08

0 Answers0