Here's code flow, first is the login and it's work good, but after that i want to immediately call feed function, that's probably the reason why browser blocked it, is there any other way how i can do this? Its work good if the display is set to iframe, but i really want it as a popup. Tahnks.
Share
function
function fblogin() {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', {fields: 'last_name, first_name, gender, email, id'}, function(reslog) {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
postToFeed(reslog.gender);
}
});
});
} else {
//console.log('X');
}
}, {scope:'email'});
}
postToFeed
function postToFeed(gender) {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.ui( {
method: 'feed',
display: 'popup',
[...]
}, function( response ) {
console.log( 'before',response );
if ( response !== null && typeof response.post_id !== 'undefined' ) {
console.log( 'done',response );
}
});
}
});
}
You have to call FB.ui dialogs directly on user interaction (= in the callback function of a mouse event). FB.getLoginStatus is asynchronous, that´s why (good) browsers block it.
Use FB.getLoginStatus on page load instead, and store the status. Or better: remove it, because you don´t need to authorized a user for the FB.ui dialogs. And in your code it would not make any sense, because you only use it after FB.login and even after an API call - so the user is surely logged in.
FB.login is asynchronous too, and trying to present a share dialog to the user immediately after login is not only annoying for the user, it´s also against the rules imho. I would count that as "incentivizing":
Only incentivize a person to log into your app, enter a promotion on
your app’s Page, or check-in at a place. Don’t incentivize other
actions.
Source: https://developers.facebook.com/policy/
New code:
HTML:
Share
JavaScript function "postToFeed":
FB.ui( {
method: 'feed',
display: 'popup',
[...]
}, function( response ) {
console.log( 'before',response );
if ( response !== null && typeof response.post_id !== 'undefined' ) {
console.log( 'done',response );
}
});
Related
On a user's click a popup is opened :
FB.login(function () {
// My CallBack
}, { scope: 'email,user_birthday,user_location,user_hometown' });
And a facebook login link is generated with a lot of parameters.
I want to add one more parameter of my own , for example UserHasClicked=1 , but
when I added it to the scope
{ scope: 'email,user_birthday,user_location,UserHasClicked=1' }
I got Scope Invalid message.
How can I add my own parameter to the FB link that's generated by the login() mehtod ?
This is the behavior wanted by the login method, why not using the callback to do what you have to do with the userHasClicked logic ?
FB.login(function () {
userHasClicked = true
}, { scope: 'email,user_birthday,user_location,user_hometown' });
I am not sure if that is what you want, but I assume you want to know if a user opened the login popup? Why not just do that in the callback function of your button/link/whatever:
document.getElementById('loginBtn').addEventListener('click', () => {
const someParm = 1;
FB.login(() => {
//this will get called when the user cancels or authorizes the login
console.log(someParam); //do something with the param after auth
}, {scope: 'email,user_birthday,...'});
});
I have come to post this question after 2 days of torture not being able to understand how I can actually publish the historic messages stored on my pubnub storage account. To try and understand it at its most basic I have made a chat app and used the history function as described in the SDK but still every time I refresh the page the messages are lost. I have tried the backfill and the restore attributes in subscribe with no luck. All I want to do is click refresh on chrome and see the messages still there.
<div><input id=input placeholder=you-chat-here /></div>
Chat Output
<div id=box></div>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.4.0.min.js"></script>
<script>(function(){
var pubnub = new PubNub({ publishKey : 'demo', subscribeKey : 'demo' });
function $(id) { return document.getElementById(id); }
var box = $('box'), input = $('input'), channel = 'chat';
pubnub.addListener({
message: function(obj) {
box.innerHTML = (''+obj.message).replace( /[<>]/g, '' ) + '<br>' + box.innerHTML
}});
pubnub.history({
channel: 'chat',
reverse: true, // Setting to true will traverse the time line in reverse starting with the oldest message first.
count: 100, // how many items to fetch
callback : function(msgs) {
pubnub.each( msgs[0], chat );
}
},
function (status, response) {
// handle status, response
console.log("messages successfully retreived")
});
pubnub.subscribe({channels:[channel],
restore: true,
backfill: true,
ssl: true});
input.addEventListener('keyup', function(e) {
if ((e.keyCode || e.charCode) === 13) {
pubnub.publish({channel : channel, message : input.value,x : (input.value='')});
}
});
})();
</script>
</body>
EDIT: updated link that was broken. New version of history function is called fetchMessages.
I think your history code is not correct. No need for the callback as your code response will be in the function argument. This example is from the JavaScript SDK docs.
// deprecated function
pubnub.history(
{
channel: 'chat',
},
function (status, response) {
var msgs = response.messages;
if (msgs != undefined && msgs.length > 0) {
// if msgs were retrieved, do something useful
console.log(msgs);
}
}
);
// latest function (response output format has changed)
pubnub.fetchMessages(
{
channels: ['chat']
},
(status, response) => {
console.log(msgs);
}
);
In about 0.3% of users, I can't get their FB ID with JS API. On some occasions I have gotten it before for those users. What could be the cause of this and any ideas on how to fix it?
As far as I know most of those users were on Windows and using firefox.
My code:
window.fbAsyncInit = function () {
FB.init({
appId : "xxxx",
status : true,
cookie : true,
xfbml : true,
oauth : true
});
FB.Canvas.setSize({width:$("#mainbody").outerWidth(),height:$("#mainbody").outerHeight()});
FB.getLoginStatus(function (response) {
if(response.authResponse){
if(response.authResponse.userID){
fbId = response.authResponse.userID;
$("#hiddenFbId").val(fbId);
setSession();
}
}
if (response.status === 'connected') {
FB.api(
"/me?locale=et_EE",
function (response) {
if (response && !response.error) {
fbName = response['name'];
fbId = response['id'];
$("#hiddenFbId").val(fbId);
fbEmail = response['email'];
setSession();
}
});
} else {
FB.login(function (response) {
if (response.authResponse) {
if(response.authResponse.userID){
fbId = response.authResponse.userID;
$("#hiddenFbId").val(fbId);
setSession();
}
FB.api(
"/me?locale=et_EE",
function (response) {
if (response && !response.error) {
fbName = response['name'];
fbId = response['id'];
$("#hiddenFbId").val(fbId);
fbEmail = response['email'];
setSession();
}
});
} else {
fbDenied = true;
}
}, {
scope : 'public_profile,email,user_likes'
});
}
});
}
Never call FB.login in the asynchronous (!) callback function of FB.getLoginStatus. Some browsers block the login popup if you do that, you always need to call FB.login on user interaction - and calling it on page load is a bad idea anyway. Don´t force the user to authorize your App right when they enter your App and before they know what your App is about.
FB.getLoginStatus on page load to refresh the User Token and to check if the user is authorized
FB.login on mouse click
It is also easier that way to remove some redundant code and move your FB.api call to a function.
It may or may not solve your problem, but it´s definitely important and a commong source of errors.
im trying to implement a facebook share function with a callback.
I have found this example script
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script>
function fb_share() {
FB.ui( {
method: 'feed',
name: "Facebook API: Tracking Shares using the JavaScript SDK",
link: "https://www.webniraj.com/2013/05/11/facebook-api-tracking-shares-using-the-javascript-sdk/",
picture: "https://stackexchange.com/users/flair/557969.png",
caption: "Tracking Facebook Shares on your website or application is a useful way of seeing how popular your articles are with your readers. In order to tracking Shares, you must used the Facebook JavaScript SDK."
}, function( response ) {
if ( response !== null && typeof response.post_id !== 'undefined' ) {
console.log( response );
// ajax call to save response
$.post( 'http://www.example.com/', { 'meta': response }, function( result ) {
console.log( result );
}, 'json' );
}
} );
}
$(document).ready(function(){
$('.share-btn').on( 'click', fb_share );
});
</script>
</head>
<body>
<button class='share-btn'>click</button>
</body>
</html>
However it doesn't seem to work, although some people say it works for them. When I click the button nothing happens. Is there an error somewhere? Or maybe someone could direct me to another sample. Would be very grateful!! Cheers.
It seems like you are missing a few things. I took a quick look at the Facebook JS SDK docs here, and it seems like you're missing a source for the SDK and an FB init method with your app credentials. For example:
function fb_share() {
FB.init({
appId : '{your-app-id}',
xfbml : true,
version : 'v2.0'
});
FB.ui( {
method: 'feed',
name: "Facebook API: Tracking Shares using the JavaScript SDK",
link: "https://www.webniraj.com/2013/05/11/facebook-api-tracking-shares-using-the-javascript-sdk/",
picture: "https://stackexchange.com/users/flair/557969.png",
caption: "Tracking Facebook Shares on your website or application is a useful way of seeing how popular your articles are with your readers. In order to tracking Shares, you must used the Facebook JavaScript SDK."
}, function( response ) {
if ( response !== null && typeof response.post_id !== 'undefined' ) {
console.log( response );
// ajax call to save response
$.post( 'http://www.example.com/', { 'meta': response }, function( result ) {
console.log( result );
}, 'json' );
}
});
}
Here is a JSFiddle with all that included http://jsfiddle.net/bn7F7/.
Hope that helps!
I use Facebook login using FB.login (and I don't want to use the Facebook login button). My problem is that after login, the Facebook dialog don't show the listed permission, as follows.
FB.login(function (response) {
if (response.status == "connected") {
//alert(" connected ");
}
else {
//alert(" not connected ");
}
}, { scope: 'email' });
The Facebook dialog show "Access my basic information" only. How do I fix this problem?
Note: if I try the Facebook login, it shows the permission correctly.
Note 2: the response after the user clicks Allow is:
User cancelled login or did not fully authorize.
That's because of a mistake in the official documentation.
The property name for the permissions is not "scope", but "perms":
FB.login(function (response) {
if (response.status == "connected") {
//alert(" connected ");
}
else {
//alert(" not connected ");
}
}, { perms: 'email' });