On http://www.stubwire.com/account/login.php I am trying to add the Facebook Connect, and once they login it reloads the page. I have tried searching and I see other posts, but unable to figure out why my page is not working. Can someone help me figure out why this is not working?
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '139440482805508',
status : true,
cookie : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.statusChange', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
window.location.reload();
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
Related
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '261852174300349',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
//LOGIN FUNCTION
function login() {
FB.getLoginStatus(function(response) {
console.log(response)
});
}
</script>
<div onclick="login();">Login with Facebook</div>
As per facebook document to check user is already login or not we can use FB.getLoginStatus get the user is log in or not but in my cause i can"t able to get any response
try this instead. It will call the login function right after being initialized. In your current code
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '261852174300349',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
//LOGIN FUNCTION
function login() {
FB.getLoginStatus(function(response) {
console.log(response)
});
}
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div onclick="login();">Login with Facebook</div>
I have a Facebook Button on my page. It calls a share popup.
The problem is that button works just on the first click. The second, third clicks don't do nothing. I always need to refresh the page.
I'm a newbie. Could you help me with this code?
Thank you.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'zzzzzzzzzz',
status : true,
cookie : true,
xfbml : true
});
FB.ui(
{
method: 'feed',
name: 'Bitcoin Catcher Faucet & Rotator',
link: 'http://bitcoin-catcher.com',
picture: 'http://bitcoin-catcher.com/wp-content/uploads/2015/08/icon.png',
caption: 'Only 1000+ Rewards Faucet & Rotator',
description: 'Earn FREE Bitcoins Easier & Faster! Only 1000+ Rewards per Claim!'
},
function(response) {
if (response && response.post_id) {
unhide('claim', '');
} else {
}
}
);
};
function fb_callout() {
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
}
</script>
<img alt="Share on Facebook" src="http://bitcoin-catcher.com/wp-content/uploads/2015/09/facebook-share-button.png" width="180" onclick="fb_callout();" style="cursor: pointer;" />
The call to FB.ui should be outside fbAsyncInit. Place it in the click event handler of the Share button.
In your code sample, the FB JS SDK is loaded with every click. This is not what you want.
Even though it works the first time because the SDK calls fbAsyncInit once it's loaded which in turn - in your example, mistakenly again - displays the feed dialog through an FB.ui call, reloading the SDK breaks the API for subsequent calls. The SDK should not be loaded every time.
What you want instead is to load the SDK only once when the page loads (it's asynchronous so it wont block the browser) and then assign a click handler to the button which calls FB.ui.
It'd look something similar to the below
<body>
<img alt="Share on Facebook" onclick="fb_callout();" />
<script>
// Handler for click event
function fb_callout() {
FB.ui({...}, function(response) {});
}
// This is called when the SDK js file is loaded by the browser
window.fbAsyncInit = function() {
FB.init({
appId : 'zzzzzzzzzz',
status : true,
cookie : true,
xfbml : true
});
}
// This loads the FB SDK js
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</body>
I did this way and nothing happens...
<img alt="Share on Facebook" src="http://bitcoin-catcher.com/wp-content/uploads/2015/09/facebook-share-button.png" width="180" onclick="fb_callout();" style="cursor: pointer;" />
<div id="fb-root"></div>
<script>
function fb_callout() {
FB.ui(
{
method: 'feed',
name: 'Bitcoin Catcher Faucet & Rotator',
link: 'http://bitcoin-catcher.com',
picture: 'http://bitcoin-catcher.com/wp-content/uploads/2015/08/icon.png',
caption: 'Only 1000+ Rewards Faucet & Rotator',
description: 'Earn FREE Bitcoins Easier & Faster! Only 1000+ Rewards per Claim!'
},
function(response) {
if (response && response.post_id) {
unhide('claim', '');
} else {
}
}
);
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxx',
status : true,
cookie : true,
xfbml : true
});
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
}
};
</script>
I am using the facebook javascript sdk and graph api.my code is workin fine with single image.how to pass multi value parameter to image.
$("#ac").click(function()
{
FB.init({
appId : 'validappid',
status : true, // check login status
cookie : true,
xfbml : true // parse XFBML
});
FB.login(function(response) {
if (response.authResponse) {
var access_token = FB.getAuthResponse()['accessToken'];
console.log('Access Token = '+ access_token);
FB.api('me/posimplicity:eat',
'post',
{
restaurant: "http://samples.ogp.me/440002909390231",
image:'http://abc.in/images/items/120px-Chana_masala.jpg',
},
function(response) {console.log(response);
// handle the response
}
);
}
},{scope: 'read_stream,publish_stream,offline_access,user_photos'});
})
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
http://jsfiddle.net/BJK2b/33/
I want to show the all dishes images that ordered
i am having problem with publish dialog via javascript SDK. It sometimes work, sometimes dont.
It throws this error:
API Error Code: 102 API Error Description: Session key invalid or no
longer valid Error Message: Iframe dialogs must be called with a session key
My code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'CENSORED', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// wait a moment before showing dialog.
setTimeout("showbox()", 2 * 1000);
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
and
<script>
function showbox()
{
FB.ui(
{
display: 'iframe',
method: 'feed',
name: 'ASD ASD ASD:',
link: 'https://apps.facebook.com/XXX/',
picture: 'https://skvelazabava.eu/XXX/yy.jpg',
caption: 'Největší alkoholici mezi tvými přáteli jsou:',
description: ' ',
properties: [{text:"XXX", href:"https://apps.facebook.com/XXX/"},
{text:"YYY", href:"https://apps.facebook.com/XXX/"} ],
redirect_uri: 'https://url.eu/'
});
}
</script>
What do i have to do to make sure dialog will have session key.
This was also the case for me, to clarify for anyone else who encounters this:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{{facebook_app_id}}',
app_token : '<%=#access_token%>',
status : true,
});
FB.getLoginStatus(function(response) {
console.log(response);
FB.ui({
method: 'apprequests',
message: 'Have you heard about Rell?',
data: 'invite-to-rell-42',
display: 'iframe',
filters: [{name: 'Daaku', user_ids: ['1677846385']}, 'app_non_users', {name: 'Games People', user_ids: [703, 6203644]}]
});
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
According to Facebook: "The best place to put this code is right after the opening tag"
Example:
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelURL : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
But I would like like to add this in the jquery block $(document).ready(function() { }
How can that be done?
Include jQuery, and then...
$(document).ready(function(){
callFB();
loginClick(); // Call function
});
function callFB(){
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelURL : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
}
function loginClick(){
// your click handling code in here
}
This is more what you're looking for I think...
https://developers.facebook.com/docs/javascript/howto/jquery/
You can try this jQuery plugin i made too.. :]
jQuery.fbInit = function(app_id) {
window.fbAsyncInit = function() {
FB.init({
appId : app_id, // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
$('<div />').attr('id','fb-root').appendTo('body');
};
$(document).ready(function(){
$.fbInit('12345678901234');
});