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.
Related
I'm having a hard time getting server data to render in my underscore template. The underscore markup displays on the page as a string, for example inside the div, you can see <%= test %>.
I'm using backbone, require, and the running on the python flask framework.
I've tried multiple different approaches as suggested in a variety of posts but I can't seem to figure out what the issue is. I'm not seeing any errors in the console. Everything is working as expected, and the request to the server is executing, and data is being returned appropriately so at least that portion of the backbone app is working. The router is rendering the appropriate page, but the _.template, just doesn't seem to be working.
Here's the view:
define(['jquery',
'underscore',
'backbone',
'bootstrap',
'text!/static/html/templates/security.html'
],function($,_,Backbone,b, security){
var SecurityView = Backbone.View.extend({
template: _.template($(security).html()),
events: {
"click #submit": 'submit_security'
},
initialize: function(options) {
this.options = options || {};
var currentInstance = this;
},
render: function() {
var that = this;
var template = this.template({test: 'blahblah'});
this.$el.html(template);
return this;
},
});
return SecurityView;
});
The Router:
define(['jquery', 'underscore', 'backbone',
'models/login', 'models/register', 'models/security',
'collections/questions',
'views/login', 'views/register', 'views/security'
],
function($,_,Backbone, Login, Register, Security,
Questions,
LoginView, RegisterView, SecurityView) {
var app = {};
app.models = app.models || {};
app.collections = app.collections || {};
app.current_content = null;
app.current_dialog = null;
app.current_logout = null;
var Router = Backbone.Router.extend({
routes: {
"login": "login",
"register": "register",
"book_writer": "book_writer",
"book_setup": "book_setup",
"error_page": "error_page",
"security": "security_questions"
},
replace_cur_content: function(view, nologout){
//if (app.current_content) {
// app.current_content.remove();
//}
app.current_content = view;
if (view) {
var display = view.render();
$('#app').append($(display.el));
}
},
security_questions: function() {
app.models.security = new Security();
app.models.security.fetch({
reset: true,
success: function(model) {
var state = model.get('session_state');
if (state === 'ready') {
var securityView = new SecurityView({model: model});
app.AppRouter.replace_cur_content(securityView);
} else if (state === 'error') {
// error page
} else if (state === 'logged_out') {
Backbone.history.navigate('login', {trigger: true});
}
}
});
}
});
app.AppRouter = new Router();
$(document).ajaxError(function(event, xhr){
if (xhr.status == 401) {
console.log('Ajax Error - 401');
app.AppRouter.login();
} else if (xhr.status == 403) {
console.log('Ajax Error - 403');
app.AppRouter.noverify();
} else if (xhr.status == 404) {
console.log('Ajax Error - 404');
app.AppRouter.notfound();
} else {
app.AppRouter.error();
}
});
return app;
});
The template:
<div class="form-content">
<div class="form-box">
<div class="form" id="security_form">
<h3 class="form-heading">Security Questions: </h3>
<%= test %>
</div>
</div>
</div>
No error messages are available in the console. Expected is: the underscore markup should not display as text on the page after render.
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 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));
There are many POST indicating that once a user click on your Like button, it arises an event that you can catch like the next code:
window.fbAsyncInit = function() {
//Your app details here
FB.init({appId: '110981675649741', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
alert('You just liked '+href);
});
FB.getLoginStatus(function(response) {
It seems that now, this do not work.
Does anyone know why? Did Facebook team change the way you get such event?
Use this code.
<div id="fb-root"></div>
<script type="text/javascript">
<!--
window.fbAsyncInit = function () {
FB.init({ appId: 'AppID', status: true, cookie: true, xfbml: true });
FB.Event.subscribe('edge.create', function (href, widget) {
// Do something, e.g. track the click on the "Like" button here
// alert('You just liked ' + href);
// alert('You just liked ' + widget);
window.location = "http://www.google.com";
});
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
//-->
</script>
It will work.
Thanks