Facebook JavaScript SDK from browser console - javascript

I am trying to create a script for Facebook Messenger which is intended to be run from the browser console. As part of the script's functionality, I need to access the Facebook Graph - here is the relevant code:
window.fbAsyncInit = function() {
FB.init({
appId : '(my app's ID is here)',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.12'
});
FB.api(
'/me?fields=name',
'GET',
{fields: 'name'},
function(response) {
if (response && !response.error) {
console.log(response);
}
else {
console.log("Error with 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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
};
Most of the code is copied from the Facebook help page. Unfortunately, when run, neither the request response nor the string 'Error with SDK!' are logged to the console.
I am not quite sure why this doesn't work as intended and one of my thoughts is that the code has to be executed from an actual web page - however, this is not an option since the code has to be run directly from Messenger in order to obtain its source code. This can not be done from another URL due to the Same-Origin Policy. Any help is greatly appreciated!

Related

FB web share dialog not giving option to send as message

I am using Facebook's SDK with Require JS and Backbone JS. I have a share button that triggers a fb share display. It shows up as expected, but does not give the option to share as a message. All other options (timeline,group,event,page) appear. Is there a reason why?
my facebook sdk load module (copied/generated from fb developer guide):
define(["facebook"], function(FB){
FB.init({
appId : '', // my id is here
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'));
});
and how I use it in a backbone view:
clickFbShareHandler: function() {
var dialogue = "I got " + this.model.getValue()";
FB.ui({
method: 'share',
mobile_iframe: true,
href: '(my url)',
quote: dialogue,
}, function(response){});
}
here is an image of the options given to me:
You can use the Send Dialog for that: https://developers.facebook.com/docs/sharing/reference/send-dialog
Alternatively, you can use sharer.php, that´s what you saw on other pages. It just needs the url as parameter: https://www.facebook.com/sharer.php?u=[xxx]

Facebook event subscription 'comment.create' not working

OK, so I'm trying to save each comment that is being made in the facebook comments widget locally for later use. I subscribe to both the 'comment.create'- and 'comment.remove'-event - which in turn should fire my 'fb_fetch_comment'-function. However, 'comment.create' never fires. The weird thing is that the problem only occurs with 'comment.create' - and not 'comment.remove' - which works just as it should.
I have implemented the following code in my html:
<div class="fb-comments" data-href="<?php echo get_permalink(); ?>" data-numposts="25" data-width="100%"></div>
Then i include the js in a separate file. The code is as follows:
(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/nb_NO/sdk.js#xfbml=1&version=v2.4&appId={MY-APP-ID}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId : {MY-APP-ID},
xfbml : true,
version : 'v2.4'
});
FB.Event.subscribe('comment.create',function(comment_data){
fb_fetch_comment(comment_data, 'create')
});
FB.Event.subscribe('comment.remove',function(comment_data){
fb_fetch_comment(comment_data, 'remove')
});
function fb_fetch_comment(comment_data, comment_action) {
jQuery.post(
fb_ajax.url, {
commentid: comment_data.commentID,
security: fb_ajax.security,
action: 'fb_ajax_update_comment',
event: comment_action,
url: comment_data.href
});
}
};
Any ideas where the problem may lie?
The issue has resolved itself without any action taken on my part. Must have been an error in Facebooks own API. Case closed.

How to use facebook login in parse.com backend on website?

I am trying to integrate parse database with my website. It is almost one day I spent but I couldn't figure out the problem. Here is my code:
<div id="fb-root"></div>
<script>
Parse.initialize("**************************", "**********************");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : '*****************',
cookie : true,
xfbml : true
});
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
alert("User signed up and logged in through Facebook!");
} else {
alert("User logged in through Facebook!");
}
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
};
(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#xfbml=1&version=v2.3&appId=920929871279093";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-max-rows="3" data-size="medium" data-show-faces="true" data-auto-logout-link="true"></div>
My problem is that when I run this piece of code I get following error but login button appears and work fine.
As I search for this issue people are saying I change
//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=920929871279093";
To
//connect.facebook.net/en_US/sdk.js#xfbml;
or
//connect.facebook.net/en_US/sdk.all;
I do not understand how this really work. And appreciate if anyone say where I am calling init.FB twice and how to fix it.
I think you need to put version number in init function:
The following is the example from parse.com https://www.parse.com/docs/js/guide#users-setup
<script>
// Initialize Parse
Parse.initialize("$PARSE_APPLICATION_ID", "$PARSE_JAVASCRIPT_KEY");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({ // this line replaces FB.init({
appId : '{facebook-app-id}', // Facebook App ID
status : true, // check Facebook Login status
cookie : true, // enable cookies to allow Parse to access the session
xfbml : true, // initialize Facebook social plugins on the page
version : 'v2.3' // point to the latest Facebook Graph API version
});
// Run code after the Facebook SDK is loaded.
};
(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'));
</script>

Facebook Graph API console error

I am trying to display the feed into my console using a console.log however it is returning an error of no token.
message: "An active access token must be used to query information about the current user."
type: "OAuthException" error code : 2500;
the message above is what I am getting. I have followed the steps given by FB.
The code is bellow.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '',
xfbml : true,
version : 'v2.1',
});
FB.api('/me', {fields: 'last_name'}, function(response) {
console.log(response);
});
};
(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 = "http://connect.facebook.net/en_UK/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root">
</div>
You are trying to call the API without asking the user to login first. Instead, remove the FB.api line in your code and replace it with the below:
FB.login(function(){
FB.api('/me', 'get', {fields: 'last_name'}, function (response ) {
console.log(response);
});
});
Ideally, you should call the above login code when a "Login" button is pressed, e.g.:
<button type="button" onclick="doLogin();">Login to Facebook</button>
(Remember to wrap the FB.login() function in the doLogin() function.)

facebook login button added to my app but does not redirects once the user is logged in

I am developing a web application and i have implemented facebook login from developers.facebook.com but the thing is that whenever the user log in with his facebook credentials it does not redirect to my application and also i am trying to test it locally in my IDE but even i am unable to do it. is there any ways to make it as well i am in search of log out option as i want add log out button after the user's logged in. any help would be appreciated. thanks in advance.
and here is my log in code:
HTML:
<div id="fb-root"></div>
<div class="fb-login-button" data-width="500"></div>
and my JS code:
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '425369200906567', // App ID from the app dashboard
channelUrl : 'channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// 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'));
(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_GB/all.js#xfbml=1&appId=425369200906567";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
if you want to do something once the user logs in to your app (your case redirect to another page application page you can use response.authResponse to do it
FB.login(function(response) {
if (response.authResponse) {
// when the user logs in! & gives permission
// Do something
alert('Change this alert to "windows.location"')
} else {
// when the user doesn't give the required permissions
// Do something
alert('User canceled login or did not fully authorize the app.');
}
}, { scope: 'user_photos, publish_stream' }); // App's permission
Fiddle

Categories

Resources