The button works but when I click to like the label turns to "share". This is my button:
<div data-href="http://facebook.com/Fitnoss" data-send="false" data-layout="button_count" data-show-faces="false" class="fb-like"></div>
And this is my SDK call & init:
window.fbAsyncInit = function() {
FB.init({
appId: "XXXXXXXXXXXXXXX",
channelUrl: "/fbc.html",
cookie: true,
logging: true,
status: 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/pt_BR/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
I'm using the brazilian portuguese SDK!
Does anyone knows or have any idea why this happens?
Related
I have a list of json objects on the page, and each of them contains id of page. I want facebook send-to-messenger button be visible in every row of my data table on page. But when I iterate, only one button is visible. And it's not working. How to do that in loop?
I have a static part
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<appid>',
xfbml: true,
version: 'v2.6'
});
};
(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>
and dynamic part
$.each(data, function (key, value) {
//...
<div class="fb-send-to-messenger"+
'messenger_app_id="<appid>"'+
'page_id="'+value.id+'"'+
'data-ref="WELCOME_OPTIN_TOKEN"'+
'color="blue"'+
'size="standard">
//...
}
value.id is page id
How to do that? Or is there any javascript function that can accomplish it?
You are generating them on the fly with JavaScript, so you have to parse the Plugins with FB.XFBML.parse() right after adding them to the DOM. Make sure you use FB after FB.init though.
For example:
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<appid>',
xfbml: true,
version: 'v2.6'
});
$.each(data, function (key, value) {
//...
<div class="fb-send-to-messenger"+
'messenger_app_id="<appid>"'+
'page_id="'+value.id+'"'+
'data-ref="WELCOME_OPTIN_TOKEN"'+
'color="blue"'+
'size="standard">
//...
}
FB.XFBML.parse();
};
(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>
I want a "create event facebook popup" with preconfigured parameters.
I have bit of coding as below but i am really confused how we can go further.
My Code below
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<appid>',
xfbml : true,
version : 'v2.2'
});
};
(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>
<span> Create Event </span>
<script>
function callEvent() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
var accessToken = response.authResponse.accessToken;
alert(accessToken);
FB.api('/me/events?access_token=' + accessToken, 'post',
{
name: "Test event",
start_time: Math.round(new Date().getTime()/1000.0)
},
function(retVal) {}
);
}
else {
console.log('initiate FB login...');
FB.login();
}
});
}
</script>
Can someone help with code? Thanks in advance.
You cannot create events via the Graph API.
Source: https://developers.facebook.com/docs/graph-api/reference/v2.3/event#publish
Specifically, about user events:
Creating
You can't perform this operation on this endpoint.
Source: https://developers.facebook.com/docs/graph-api/reference/user/events
I am creating an fb app , I just want to navigate to next page if the user already liked my page and for not liked user only onclick of like it will go to the next page . this code is working fine for my account but not for others . Can you please help me out .
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '657165490961669',
channelUrl : 'https://www.facebook.com/cypiyow',
status : true,
cookie : true,
xfbml : true
});
FB.getLoginStatus(function(response) {
var page_id = "228530813943529";
if (response && response.authResponse) {
var user_id = response.authResponse.userID;
var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
FB.Data.query(fql_query).wait(function(rows) {
if (rows.length == 1 && rows[0].uid == user_id) {
window.location = "email_form.php";
} else {
FB.Event.subscribe('edge.create',
function(response) {
window.location = "email_form.php";
}
);
}
});
} else {
//error message
}
});
};
(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>
in your app's settings in the facebook developer area, is this app in sandbox mode? that would cause it to only be available to you, if that is what you mean when you say it is only working for you. you would need to add some testers in your app settings or move out of sandbox mode
I've tried the fowlling code
https://developers.facebook.com/blog/post/2011/07/21/updated-javascript-sdk-and-oauth-2-0-roadmap/
It works to authenticate
now i want to auto popup once page is loaded instead of having people click ont he button again
I edited and was able to trigger the autopopup , but that only works if i keep the button
How can i remove the button and still have it work?
this is what i've done:
<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>
New JavaScript SDK
</title>
</head>
<body>
<div id="fb-root"></div>
<h2>Updated JS SDK example</h2><br />
<div id="user-info"></div>
<p><button id="fb-auth">Login</button></p>
<script>
window.fbAsyncInit = function() {
FB.init({ appId: 'xxx',
status: true,
cookie: true,
xfbml: true,
oauth: true});
function updateButton(response) {
var button = document.getElementById('fb-auth');
if (response.authResponse) {
//user is already logged in and connected
var userInfo = document.getElementById('user-info');
FB.api('/me', function(response) {
userInfo.innerHTML = '<img src="https://graph.facebook.com/'
+ response.id + '/picture">' + response.name;
button.innerHTML = 'Logout';
});
button.onclick = function() {
FB.logout(function(response) {
var userInfo = document.getElementById('user-info');
userInfo.innerHTML="";
});
};
} else {
//user is not connected to your app or logged out
//button.innerHTML = 'Login';
// button.onclick = function() {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
var userInfo = document.getElementById('user-info');
userInfo.innerHTML =
'<img src="https://graph.facebook.com/'
+ response.id + '/picture" style="margin-right:5px"/>'
+ response.name;
});
} else {
//user cancelled login or did not grant authorization
}
}, {scope:'email'});
}
//}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol
+ '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>
<script>
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol
+ '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
FB.init({ appId: 'xxx',
status: true,
cookie: true,
xfbml: true,
oauth: true});
fbLoginStatus();
});
function fbLoginStatus()
{
FB.getLoginStatus(function(response) {
console.log(response);
if (response.status === 'connected') {
access_token = FB.getAuthResponse()['accessToken'];
myinfo();
} else {
fblogin();
}
});
}
function fblogin()
{
FB.login(function(response) {
if (response.authResponse) {
console.log(response);
access_token = FB.getAuthResponse()['accessToken'];
myinfo();
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});
}
function myinfo()
{
FB.api('/me', function(response) {
userid = response.id ;
alert(userid);
user_name = response.name;
alert(user_name);
});
}
</script>
Try this code, it will work exactly what you want.
Here's the code. I think the above code should work too.
<script>
window.fbAsyncInit = function(){
FB.init({
appId: '1486670758257443',
status: true,
cookie: true,
xfbml: true,
oauth: true,
version : 'v2.1'
});
fbLoginStatus();
};
(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 fbLoginStatus(){
FB.getLoginStatus(function(response) {
console.log(response);
if (response.status === 'connected') {
var access_token = FB.getAuthResponse()['accessToken'];
console.log(access_token);
} else {
fblogin();
}
});
}
function fblogin(){
FB.login(function(response) {
if (response.authResponse) {
var access_token = FB.getAuthResponse()['accessToken'];
console.log(access_token);
} else {
console.log('Authorization failed.');
}
},{ //permissions
scope: 'email'
});
}
</script>
and one thing to mention that, according to facebook doc, the popup should be opened by click event. Here's what they're saying.
Calling FB.login results in the JS SDK attempting to open a popup window. As such, this method should only be called after a user click event, otherwise the popup window will be blocked by most browsers.
I am trying to check with my application if one application is installed on specific fan page and if it is not installed I want to install it..
for some reason i am unable to get the page access tokens.
I am able to get the user access tokens and user id, but the page access token returns "Exception" "Unknown fields: access_token".
What is wrong here?
I am using this resources:
http://developers.facebook.com/docs/reference/api/page/#tabs
https://developers.facebook.com/docs/authentication/
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '188474844587139',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var userAccessToken = response.authResponse.accessToken;
console.log("User Access Token: "+userAccessToken);
console.log("User ID: "+uid);
// get page access token
FB.api('https://graph.facebook.com/'+uid+'/accounts?access_token='+userAccessToken, function(response) {
console.log(response);
var pageAccessToken = 'Need to get from the response...';
// get information if user got this app
FB.api("https://graph.facebook.com/102561956524622/tabs/353470634682630?access_token="+pageAccessToken,
function(data) {
console.log(data);
});
// install the app
var params = {};
params['app_id'] = '353470634682630';
FB.api('https://graph.facebook.com/102561956524622/tabs'+pageAccessToken, 'post', params, function(response) {
if (!response || response.error) {
console.log("Error: "+response);
} else {
console.log("Ok: "+response);
}
});
});
} else if (response.status === 'not_authorized') {
console.log("the user is logged in to Facebook, but not connected to the app.");
} else {
console.log("the user isn't even logged in to Facebook.");
}
});
};
(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>
</body>
</html>
I managed to solve this issue if any one care this is the code
One of reasons it didn't work was because I used the full address "http://graph.facebook.com..." and as you can see in the code I am using the
FB.api function which is adding this address automatically.
Another reason is that I used the user access token to get information about the application instead of the page access token.
I was also having problem to install the application because I needed to send the page access token as well.
P.S: Don't forget that you need manage_pages permission.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '188474844587139',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
console.log(response.authResponse);
var userAccessToken = response.authResponse.accessToken;
var pageId = '102561956524622';
var appId = '353470634682630';
console.log("User Access Token: "+userAccessToken);
console.log("User ID: "+uid);
// get page access token
FB.api('/'+pageId+'?fields=access_token='+userAccessToken, function(response) {
var pageAccessToken = response.access_token;
// get information if user got this app
FB.api('/'+pageId+'/tabs/'+appId+'?access_token='+pageAccessToken,
function(data) {
if (data.data.length < 1) {
console.log("Not installed, Installing...");
// install the app
var params = {};
params['app_id'] = appId;
FB.api('/'+pageId+'/tabs?access_token='+pageAccessToken, 'post', params, function(response) {
if (!response || response.error) {
console.log("Error Installing:");
console.log(response);
} else {
console.log("Installed :)");
console.log(response);
}
});
}
else {
console.log("Already installed.");
}
});
});
} else if (response.status === 'not_authorized') {
console.log("the user is logged in to Facebook, but not connected to the app.");
} else {
console.log("the user isn't even logged in to Facebook.");
}
});
};
(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));