Twitter api response inside a Facebook App

Question

I've got an FB page tab app - basically a web page inside an iframe and gets displayed when a user clicks on the page tab.

Inside the web page I've got a Twitter button. I'm using Twitter's API to find out when the user has successfully tweeted. Here's the code I use for this:

twttr.events.bind('tweet', function(event) {
    alert("tweet's ocured");
});

The thing is - if I view the page normally I'm receiving the alert() after a tweet. If I view it from Facebook it doesn't work.... It's as though Twitter's response is not getting passed to the page on Fb?

Additionally in my console I get the following warnings:

TWITTER: Content Security Policy restrictions may be applied to your site. Add to supress this warning.

.

TWITTER: Please note: Not all embedded timeline and embedded Tweet functionality is supported when CSP is applied.

.

Blocked a frame with origin "http://giveaway-testing.herokuapp.com" from accessing a frame with origin "http://www.facebook.com". The frame being accessed set "document.domain" to "facebook.com", but the frame requesting access did not. Both must set "document.domain" to the same value to allow access.

.

Blocked a frame with origin "http://platform.twitter.com" from accessing a frame with origin "http://www.mysitehere.com". The frame requesting access set "document.domain" to "twitter.com", but the frame being accessed did not. Both must set "document.domain" to the same value to allow access.

Has anyone dealt with these issues before? If so help is greatly appreciated!

Answer 1

To resolve the "TWITTER" console messages add the following code to your page header:

<meta name="twitter:widgets:csp" content="on">

Use of the meta tag is explained at the bottom of the Twitter developer doc here: https://dev.twitter.com/web/overview/widgets-meta-elements.

The other warnings relate to JavaScript's same-origin policy. The http://giveaway-testing.herokuapp.com in one of the warnings mentioned in your original post is no longer operational. Do you still have a version of the page to look at?