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.