I have created a Facebook Page Tab. Everything works as expected, the tab can be added to a user's page, they see an Add Page Tab Dialog, etc.
It doesn't work however, when someone is currently "Using Facebook as" a page that they manage. Looking at Chrome developer tools I see an HTTP 500 internal server error.
To recreate this:
<script>
window.fbAsyncInit = function () {
FB.init({
appId: 'XXXXXXXXXXXXXXXX',
xfbml: true,
version: 'v2.0',
cookie: true
});
};
(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'));
function init() {
console.log("go!");
FB.ui({
method: 'pagetab',
redirect_uri: 'https://www.somedomain.com/widget/?id=3280',
});
}
setTimeout(function () {
init();
}, 2000);
</script>
I'm at a complete loss, any suggestions are greatly welcomed.
Related
This is my code:
window.fbAsyncInit = function() {
FB.init({
appId: "xxx",
xfbml: true,
version: "v2.6"
});
FB.Event.subscribe('send_to_messenger', function(response) {
// callback for events triggered by the plugin
console.log('inside the send_to_messenger');
if ( response.event == 'clicked' ) {
};
});
};
(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'));
So now, how do I get the PSID of the user ?
You need to subscribe to the messaging_optins webhook event. When the send to messenger button is clicked, you should get the PSID in sender.id prop of the event.
I can get facebook access token on client side of asp.net mvc application with method FB.getLoginStatus()
The token:
EAAFjVDcBGp4BABSnPzvjeR0ZCqEHExSRIGtvEIMPZCZABh****fk03WZCg10xaPJUs3ZCZAMTnP8
It's set token to cookies. I want to access it on server side, but on server I get it:
Kk9fbM-3d8ih4SpCfMddsj23BW2bqwPlll9LLs8ZYUE.eyJh****IjEwNzI4NDM4NjQ0OTI5MiJ9
Why? What should I do to get token from cookie?
UPDATED
Client code:
function checkLoginState() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected')
return;
FB.login();
});
}
window.fbAsyncInit = function() {
FB.init({
appId: #ConfigurationManager.AppSettings[AppParameterKey.FbApplicationId],
cookie : true,
xfbml : true,
version : 'v2.8'
});
};
(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'));
Server code:
var userToken = HttpContext.Current.Request.Cookies[String.Concat("fbsr_", ConfigurationManager.AppSettings[AppParameterKey.FbApplicationId])].Value
The cookies doesn't contains access_token
After a day I founded solution here:
Problem getting access_token after migrating to OAuth 2.0
I'm using ReactJS (developped by Facebook) and I'm currently having issues displaying a Comment secton from Facebook Social Plugins... kind of ironic but hey, they haven't made a plugins themselft for react.
Anyway, I have inserted the diffent element in my code to add the comment section. When I'm loading the page, I can see the section is loading! (for less than a second) but it desappear quite rapidly. I checked the code generated by facebook and I found that it was adding in the class of my element : FB_hide_iframes. I tried removing it and the section was showing in my page!
The problem is that I don't know how to control the class added to my component.
As you can see, the comments section is present, but it is hidden by the class FB_hide_iframes which i haven't put there.
Here's the code to add the section in my home page (home.js)
componentDidMount() {
...
window.fbAsyncInit = function () {
FB.init({
appId: 'XXXXXXXXXXXXXX',
xfbml: true,
version: 'v2.6'
});
};
(function (d, s, id) {
console.log('test');
const fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
const js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/fr_CA/sdk.js#xfbml=1&version=v2.6&appId=XXXXXXXX';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.XFBML.parse();
...
}
and in the render function I added :
render() {
<div id="fb-root"></div>
...
<div className="fb-comments"
data-href="MY-URL"
data-width="1000"
data-numposts="10"
data-order-by="reverse_time">
</div>
Anyone got an idea?
Edit:
The comments section is showing, but when I go in another section of my website and comeback (Single-page App), it Disappears.
Here's the code of my component :
import React, { Component, PropTypes } from 'react';
import { mediaQueries } from '../../decorators';
#mediaQueries
export default class FacebookComments extends Component {
static propTypes = {
mediaQueries: PropTypes.func.isRequired,
appId: PropTypes.string.isRequired,
version: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
};
state = {
mobile: false,
}
componentDidMount() {
this.props.mediaQueries('(max-width: 950px)', () => {
this.setState({
mobile: true,
});
});
this.props.mediaQueries('(min-width: 951px)', () => {
this.setState({
mobile: false,
});
});
FB.init({
appId: 'XXXXXXXXXXXXXXXXX',
xfbml: true,
version: 'v2.6',
});
(function (d, s, id) {
const fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
const js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/fr_CA/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
componentDidUpate() {
FB.XFBML.parse();
}
render() {
const componentWidth = this.state.mobile ? '95%' : '75%';
return (
<div style={{ width: componentWidth }}>
<div id="fb-root"></div>
<div className="fb-comments"
data-href={this.props.url}
data-width="100%"
data-numposts="10"
data-order-by="reverse_time">
</div>
</div>
);
}
}
luschn I don't know and don't understand what you are saying. I put a console.log in fbAsyncInit and it never showed, which mean it never get called. I looked online and there's no information about it. People online only say : Put that in you code and let the magic happen.....
That's why I removed it from my code.
Edit #2 : All I have for Facebook Social Plugin is in this code.
Side Note: It is a terrible idea to add the JS SDK init code in componentDidMount. Instead, add that code to your base HTML or put it in a separate "init" function and make sure it´s loaded before using the component.
Either way, you can only use FB.XFBML.parse after FB.init - that is, when the JS SDK is loaded and initialized:
FB.init({
appId: 'XXXXXXXXXXXXXX',
xfbml: true,
version: 'v2.6'
});
FB.XFBML.parse();
You should even have a warning or error in the browser onsole that FB is not defined with your current code.
You may also need to call FB.XFBML.parse() again in componentDidUpdate.
That being said, here´s my idea of it:
componentDidMount() {
window.fbAsyncInit = () => {
FB.init({
appId: 'xxx',
xfbml: true,
version: 'v2.6'
});
FB.XFBML.parse();
console.log('make sure this happens');
};
(function(d, s, id){
let 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'));
}
componentDidUpdate() {
FB.XFBML.parse();
}
Again, you should put that init/loading stuff elsewhere, but that´s just for optimization. Check your browser console for errors, it may be possible that componentDidUpdate gets called before the JS SDK is initialized. In that case, you may need to check if FB is available:
componentDidUpdate() {
if (FB) {
FB.XFBML.parse();
}
}
Alternatively, you could use a state variable ("isSDKInitialized", for example) and set it to true after FB.init:
componentDidUpdate() {
if (this.state.isSDKInitialized) {
FB.XFBML.parse();
}
}
That´s the minimum you need, the problem with routing is that both componentDidUpdate and componentDidMount will not get called. Try with componentWillReceiveProps in addition (same code as in componentDidUpdate to refresh the Social Plugins).
Check out those links for more information - assuming you are using react-router:
https://github.com/reactjs/react-router/issues/527
https://github.com/reactjs/react-router/blob/master/docs/guides/ComponentLifecycle.md
For those wondering how to correct the bug. You must NOT have : <script src="//connect.facebook.net/fr_CA/sdk.js"></script>
in your <head>, you MUST have <div id="fb-root"></div> at the beginning of the <body> and this code in your FacebookComments Component :
componentDidMount() {
this.props.mediaQueries('(max-width: 950px)', () => {
this.setState({
mobile: true
});
});
this.props.mediaQueries('(min-width: 951px)', () => {
this.setState({
mobile: false
});
});
window.fbAsyncInit = () => {
FB.init({
appId: this.props.appId,
xfbml: true,
version: this.props.version,
});
FB.XFBML.parse();
};
(function (d, s, id) {
const fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
const js = d.createElement(s); js.id = id;
js.async = true;
js.src = '//connect.facebook.net/fr_CA/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
componentWillReceiveProps() {
if (FB) {
console.log('its in receiveProps');
FB.XFBML.parse();
}
}
componentDidUpate() {
if (FB) {
FB.XFBML.parse();
}
}
This me code however is giving me one error, but it doesn't stop the webapp from loading the comments section. You propably will get a :
Unhandled promise rejection ReferenceError: FB is not defined(…)
I tried to make a flag with a element of the state, but it isnt the same state from before.
Im trying to send posts to a wall of a page im an admin to through the js sdk. I have made it do i can do it for myself(my personal user) but i cannot get it to work as the "page".
<div id="fb-root"></div>
<script type="text/javascript">
function SendToFacebook()
{
window.fbAsyncInit = function () {
// init the FB JS SDK
FB.init({
appId: '**CORRECT ID**', // App ID from the app dashboard
channelUrl: '**MYPAGE**/channel.html', // Channel file for x-domain comms
status: false, // Check Facebook Login status
xfbml: true // Look for social plugins on the page
});
FB.ui(
{
method: 'feed',
name: 'MyFeed',
link: '',
// picture: '',
caption: 'My caption',
description: 'test',
message: 'MESSAGE?',
},
function (response) {
if (response && response.post_id) {
alert('Delat på facebook.');
} else {
alert('Inte delat på facebook.');
}
}
);
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(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/all.js";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
}
</script>
This posts to my own user page, and ive tried the "to" parameter but it send the post from my personal user to the page. Is there any way to make this though the login function?
bare in mind that im fairly new to this so demos and examples are welcome.
I got it to work after a hard days work, if any1 is interested heres how i did.
<script type="text/javascript">
function SendToFacebook()
{
window.fbAsyncInit = function () {
// init the FB JS SDK
FB.init({
appId: '***', // App ID from the app dashboard
channelUrl: '***', // Channel file for x-domain comms
status: false, // Check Facebook Login status
xfbml: true // Look for social plugins on the page
});
FB.login(function (response) {
FB.api('/me/accounts', function (apiresponse) {
var data = {
message: "mymessage",
display: 'iframe',
caption: "caption",
name: "name",
description: "description",
to: **wallid**,
from: **wallid**
};
FB.api('/**wallid**/feed', 'post', data, function () {
console.log(arguments);
});
});
}, { scope: 'manage_pages' });
};
// Load the SDK asynchronously
(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/all.js";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
}
</script>
I found this solution and I tried it, although I dont know how it was 3 years ago, now you need to append page access token you receive via /me/accounts calling (also you must be admin of that page etc.) so todays working solution could look like this:
FB.api('/me/accounts', function (apiresponse) {
console.log(apiresponse);
var data = {
message: "mymessage",
//display: 'iframe',
caption: "caption",
picture: 'www.bla.com/image.jpg',
link: 'www.facebook.com',
name: "name",
description: "description",
to: **APP IP**,
from: **APP IP**,
access_token: apiresponse.data[0].access_token
};
FB.api('/**APP IP**/feed', 'post', data, function () {
console.log(arguments);
});
});
This is my implementation of facebook login functionality using Facebook SDK.
<script type="text/javascript">
window.fbAsyncInit = function () {
// Initialize the SDK upon load
FB.init({
appId: '1xxxxxxxxxxxx', // App ID
channelUrl: '//' + window.location.hostname + '//Home/Index',
scope: 'id,name,gender,user_birthday,email,first_name,last_name,access_token',
status: true,
cookie: true,
xfbml: true
});
// listen for and handle auth.statusChange events
FB.Event.subscribe('auth.statusChange', OnLogin);
};
// This method will be called after the user login into facebook.
function OnLogin(response) {
if (response.authResponse) {
var access_token = FB.getAuthResponse()['accessToken'];
$('#AccessToken').attr('value', access_token);
$("#AuthenticatedWithFacebook").attr("value", true);
FB.api('/me', LoadValues);
}
else {
$("#AuthenticationToken").removeAttr('value');
$("#AuthenticatedWithFacebook").attr("value", false);
}
}
//This method will load the values to the labels
function LoadValues(me) {
if (me.id) {
$("#UserId").attr("value", me.id);
$("#AuthenticationToken").attr("value", "facebook/" + me.id);
$("#FirstName").attr("value", me.first_name);
$("#LastName").attr("value", me.last_name);
$("#EmailAddress").attr("value", me.email);
}
}
</script>
<script>(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/all.js#xfbml=1&appId=1xxxxxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Login Pop-Up works just fine but after logging in I'm getting following exception:
Exception was thrown at line 38, column 184 in http://static.ak.fbcdn.net/rsrc.php/v2/yQ/r/Yax99g-1J46.js
0x80070005 - JavaScript runtime error: Access is denied.
I'm testing here on localhost (http://localhost:59777/) which I have configured in my Facebook application as well.