Find psid after clicking fb-send-to-messenger button - facebook-javascript-sdk

window.fbAsyncInit = function() {
FB.init({
appId : 'app_id',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.2'
});
FB.Event.subscribe('send_to_messenger', function(response) {
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 = "https://connect.facebook.net/en_US/sdk.js";
// js.src = "https://connect.facebook.net/en_US/sdk/debug.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
I am trying to execute the facebook send to messenger api by using facebook javascript sdk . I already have an app which have the webhook events subscribed .So i want to find the psid after clicking the fb-send-to-messenger .

Related

Facebook Login error: 'FB' is not defined with Vue.js

I use Facebook Login in Vue-cli, but it shows 'FB' is not defined.
I separate the code in two files : application.js & app.vue
./assets/js/application.js
// Facebook Login
(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 = "https://connect.facebook.net/zh_TW/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
App.vue
mounted: function(){
window.fbAsyncInit = function() {
FB.init({
appId : '<appID>',
cookie : true,
xfbml : true,
version : '{api-version}'
});
FB.AppEvents.logPageView();
};
}
main.js
import './assets/js/application.js'
import App from './App.vue'
You do not have FB in your scope. You need to import it from the library you want to use, like
import { FB as VFacebookLogin } from 'vue-facebook-login-component'
I am not sure what library do you use. This one in my answer is from https://github.com/adi518/vue-facebook-login-component
UPDATE
You separate the code into two files, it can be a reason for the issue. The other reason can be that you do not wait until it will loads. So your mounted works before https://connect.facebook.net/zh_TW/sdk.js have been loaded.
Here is a good example of how it can be done:
https://github.com/adi518/vue-facebook-login-component/blob/master/src/modules/helpers.js#L7
https://github.com/adi518/vue-facebook-login-component/blob/master/src/modules/helpers.js#L27
https://github.com/adi518/vue-facebook-login-component/blob/master/src/components/FBLogin.Scope.js#L51
function initFbSdk(options) {
return new Promise(resolve => {
window.fbAsyncInit = function () {
const defaults = { cookie: true, xfbml: true }
options = { ...defaults, ...options }
window.FB.init(options)
resolve()
};
/* eslint-disable */
(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/zh_TW/sdk.js'
fjs.parentNode.insertBefore(js, fjs)
}(document, 'script', 'facebook-jssdk'))
/* eslint-enable */
})
}
function getFbSdk(options) {
return new Promise(async resolve => {
if (window.FB) {
resolve(window.FB)
} else {
await initFbSdk(options)
resolve(window.FB)
}
})
}
Then you can use it as
const sdk = await getFbSdk({ appId, version, options }) //sdk === FB in this case

Facebook login popup close button event

I am using facebook login popup in my website. I am showing a loader for api response. But when user click on close button (X) of facebook login window, My loader is showing infinite. So i want to get that event when user click on close button. I am using below code for facebook login popup.
window.fbAsyncInit = function() {
FB.init({
appId : '###',
cookie : true,
xfbml : true,
version : 'v3.1'
});
FB.AppEvents.logPageView();
window.checkLoginState = function() {
FB.getLoginStatus(function(response) {
document.getElementById('loader-response').classList.add('show');
statusChangeCallback(response);
});
}
function statusChangeCallback(response) {
if (response.status === 'connected') {
getProfile();
} else {
window.localStorage.setItem('facebook',false);
}
}
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
I have edited your code.
Just add document.getElementById('loader-response').classList.add('show'); after the FB.getLoginStatus(function(response) function.

FB is not defined - Facebook # work

I am trying to use SDK Javascript with Facebook#work
I am getting FB is not defined.
FB.init({
appId : '{app-id}',
status : true,
xfbml : true,
version : 'v2.4' // or v2.0, v2.1, v2.2, v2.3
});
What do I have to put on the appId fied ? the community ID doesn't work and I can't have any App on facebook#work.
Thank you for your help.
You probably forgot to load the JavaScript SDK:
window.fbAsyncInit = function() {
//SDK loaded, initialize it
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.6'
});
};
//load the JavaScript SDK
(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'));
Of course you MUST create an App for this: https://developers.facebook.com/apps/
More information: http://www.devils-heaven.com/facebook-javascript-sdk-login/

Fb login using extension

What should be the app domain in FB app option in Fb Login when my app is a chrome extension.
I have tried chrome-extension:/[id]
without it the error is coming
Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.
This is my logic.js
window.fbAsyncInit = function() {
FB.init({
appId : '1232048723506658',
xfbml : true,
version : 'v2.6'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
}
else {
console.log('initiate FB login...');
FB.login();
}
});
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Please explain .

Response of facebook send button

how can i get the response of facebook send button whether it is a success or failure
FB.init({
appId : 'XXXXXXXXXXXXX',
status : false, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML add it here
oauth : 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.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.Event.subscribe will let you get that data.
Try something like
FB.Event.subscribe('message.send', function(sharedURL) {
// your code here
});