seb seb - 3 years ago 118
React JSX Question

How to close Facebook Send Dialog (v2.9) automatically after completion?

First, I'm using react and the only way I've found to load a script inside a specific component is by adding it dynamically using reference. I don't like it but the dialog shows up correctly and the message is deliver.

My problems is that the iframe doesn't close automatically after delivering the message.

I've searched in Send Dialog documentation and Facebook Sdk documentation but still can't do it.

Any advice would be greatly appreciated

Thank you

Code:

class FbSendDialogComponent extends React.Component {

componentDidMount() {
const facebookScript = document.createElement('script')
facebookScript.type = 'text/javascript'
facebookScript.async = false
facebookScript.innerHTML = `
window.fbAsyncInit = () => {
FB.init({
appId: 'my app id',
autoLogAppEvents: true,
xfbml: true,
version: 'v2.9'
})
FB.AppEvents.logPageView()
}
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));`
this.node.appendChild(facebookScript)
}

openDialog = () => {
FB.ui({
method: 'send',
link: 'https://www.google.com/'
})
}

render() {
return (
<div ref={(ref) => (this.node = ref)}>
<h4>You have no connections yet</h4>
<a onClick={() => this.openDialog()}>Invite</a>
</div>
)
}
}

seb seb
Answer Source

For people who get the same error, I was running my app on localhost and didn't add this domain to my facebook app. I guess facebook failed to redirect you to an unknown domain so it leaves the dialog open.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download