I am trying to get a streampublish box with facebook's new graph api example. I am using this code but its not working. Any help guys!
<script>
FB.ui(
{
method: 'stream.publish',
message: 'getting educated about Facebook Connect',
attachment: {
name: 'Connect',
caption: 'The Facebook Connect JavaScript SDK',
description: (
'A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.'
),
href: 'http://github.com/facebook/connect-js'
},
action_links: [
{ text: 'Code', href: 'http://github.com/facebook/connect-js' }
],
user_message_prompt: 'Share your thoughts about Connect'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
</script>
Did you intialized or called the Fb scripts properly....
It goes something like
FB.init("API Key", "xd_receiver.htm");
window.fbAsyncInit = function() {
FB.init({
appId : 'getAppId(); ?>',
session : , // don't refetch the session when PHP already has it
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// whenever the user logs in, we refresh the page
FB.Event.subscribe('auth.login', function() {
window.location.reload();
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
i dont actually remember the proper link to this in facebook
but i think u need to connect and call the FBJS properly to get this right!!!
may be this wou;d help!!!
Related
I am using modified example from Facebook developers page. My JS:
window.fbAsyncInit = function() {
FB.init({
appId : '{xxx}',
cookie : true,
xfbml : true,
version : 'v2.8'
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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_GB/sdk.js#xfbml=1&version=v2.8&appId=xxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', {fields: 'id,name,email'}, function(response) {
console.log('Successful login for: ' + response.name);
console.log('Here is email: ' + response.email);
document.getElementById('status').innerHTML ='Thanks for logging in, ' + response.name + '!';
});
$.get(baseurl + 'index.php/auth/fb_login', function(response){
console.log(response);
});
}
$(document).ready(function(){
$('body').on('click', '.fb-login', function(){
FB.login(function(response){
statusChangeCallback(response);
}, {scope: 'public_profile,email'});
});
});
Basic idea is that after successful login I display response object in console and run testAPI() which makes API call and displays name and email in console. After that I added ajax call to auth/fb_login:
function fb_login(){
require_once( 'vendor/autoload.php' );
$fb = new Facebook\Facebook([
'app_id' => $this->config->item('app_id', 'tank_auth'),
'app_secret' => $this->config->item('app_secret', 'tank_auth'),
'default_graph_version' => $this->config->item('default_graph_version', 'tank_auth')
]);
$helper = $fb->getJavaScriptHelper();
try {
$accessToken = $helper->getAccessToken();
} catch(Facebook\Exceptions\FacebookSDKException $e) {
echo $e->getMessage();
exit;
}
if ($accessToken) {
var_dump('Successfully logged in!');die();
}
var_dump(' not Successfully logged in!');die();
}
And the var_dump always dumps "not ..." without any FB exceptions.
I used facebook debug tool and it returns
Error validating access token: This may be because the user logged out or may be due to a system error.
Application ID xxx: MyAppName
User ID
xxx: Kārlis Janisels
User last installed this app via API v2.x
Issued Unknown
Expires 1480410000 (in about an hour)
Valid False
Origin Unknown
Scopes email, public_profile
So the underlining problem - I can get valid access token in browser but not in server.
If it helps - I am using codeigniter framework on wamp server localhost.
I m trying to send app request using "apprequest" dialog
using following code
but in this the request dialog appears
but requests are not sent
var inviteFriends;
window.fbAsyncInit = function() {
FB.init({
appId : '112312312312321',
status : true,
channelUrl : '//mysite.com/include/fb/channel.php',
cookie : true,
frictionlessRequests : true
});
// Additional initialization code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and connected to your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
console.log('authorized');
FB.api('/me', function(response) {
console.log(response.name);
});
inviteFriends=function(){
var l="";
FB.api('/me/friends',function(response){
console.warn(response.data.length);
for (var i=0; i<20;i++){
//alert(o.id);
l=l+','+response.data[i].id;
}
console.log(l);
FB.ui({method: 'apprequests',
message: 'Hey send me a pic usign picinchat.com in fb chat!',
to: l
}, function(response){
console.log(response.toSource());
});
}
});
}
inviteFriends();
i'm using this code to send app requests to users in my facebook application
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: '39764546513545342',
status: true,
cookie: true,
oauth: true
});
};
function invitetoevent(rid)
{
FB.ui({
method: 'apprequests',
message: 'i\'ll see you in this event.',
title: 'Lets Go!.',
filters: ['app_users'],
max_recipients: 25,
},
function (response) {
if (response.request && response.to)
{
//actions
}
else
{
//alert('canceled');
}
});
}
Looks like the way you are using filter is wrong.
DEMO
PS: Assuming your callback function is correct
well it doesn't make any sense but this code works fine.
i removed the facebook script loading from the previous page and used this code.
window.fbAsyncInit = function() {
FB.init({
appId : '397334655643214', // App ID
channelUrl : '//www.itradegame.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
I have a FB canvas app at http://apps.facebook.com/insideny/
Until very recently I was using an anchor link to send users to the OAUTH login flow.
Since I implemented the Facebook Javascript SDK I have used the following logic:
1) Initialize the FB API
FB.init({
appId: 'XXXXXXXXXXXXXX',
xfbml: true,
cookie: true,
oauth : true,
channelUrl: 'http://www.niteflymobile.com/insideny/channel.html' },
{scope: 'email'});
2) Check for login status
FB.getLoginStatus(function(response) { ... } )
3) If the user is found to be loggedin (response.status == "connected") then set a proper cookie and redirect to logged in page.
4) HERE IS WHERE THE PROBLEM IS if response.status != "connected" (usually returns "not_authorized" for new user) then fire a call to FB.login(function(response) { ... }).
4a) FB.login comes back with 2 errors of the following type:
"Unsafe JavaScript attempt to access frame with URL static.ak.fbcdn.net/connect/xd_proxy.php?version=3&error_reason=user_denied&error=access_denied&error_description=The+user+denied+your+request.#cb=f22684144&origin=http%3a%2F%2Fwww.niteflymobile.com%2Ff185641ad8&relation=opener&transport=postmessage&frame=f39056acd8 from frame with URL www.niteflymobile.com/insideny/#. Domains, protocols and ports must match."
(http:// removed from both links to comply with SO rules for new users)
and in addition the object returned which I wrote to the console contains a null authResponse and status is "unknown" as opposed to the "not_authorized" it was just a moment ago.
The core problem here is that the popup for authorization is fired but is blank and quickly closes without any user interaction.
Any ideas/help/insight would be very much appreciated as I've been banging my head against this for quite a bit now and I suspect its a stupid mistake I just cant see because I'm in too deep.
I have just removed sandbox mode, could that have been a possible cause?
COMPLETE CODE BELOW:
$('.fb_link').click(function() {
FB.init({appId: 'XXXXXXXXXX', xfbml: true, cookie: true, oauth : true, channelUrl: 'http://www.niteflymobile.com/insideny/channel.html' },{scope: 'email'});
//setup fb login check
FB.getLoginStatus(function(response) {
if(response) {
console.log(response);
if(response.status == "connected") {
alert(response.status);
alert(response.authResponse.userID+"preajax");
//jquery cookie write
$.cookie('fbID', response.authResponse.userID, { expires: 29, path: '/' });
//secondary cookie write using only javascript
createCookie('fbID', response.authResponse.userID, 29);
//bandaid to fire ajax to set cookie on server side if the js side fails
var fbID_check = readCookie('fbID');
if(fbID_check) {
alert("fbID cookie set "+fbID_check);
window.location = "http://apps.facebook.com/insideny/";
}
else {
url_vars = "fbID="+response.authResponse.userID;
$.ajax({
type: "POST",
url: "set_fb_cookie.php",
data: url_vars,
success: function(data){
alert(data + "passed back from ajax");
var fbID_check_2 = readCookie("fbID");
alert(fbID_check_2 + "read from cookie");
window.location = "http://apps.facebook.com/insideny/";
}
});
return false;
}
alert(response.authResponse.userID+"postajax");
}
else {
FB.login(function(response) {
alert('here');
console.log(response);
});
}
}
})
})
UPDATE 8.12 #felipe-brahm
Tried the following code with the same effect (pops up but is blank and closes down)
$('.fb_link').click(function() {
FB.init({appId: 'XXXXXXXXXXXXX', xfbml: true, cookie: true, oauth : true, channelUrl: 'niteflymobile.com/insideny/channel.html'; },{scope: 'email'});
FB.login(function(response) {
console.log(response); })
})
The "Unsafe JavaScript attempt to access frame..." doesn't really matter. My app show's the same error on the console, but still works.
The popup is probably not opening because in most browsers a window.open event must be fired by a user initiated event, that is, a click a event.
Solution: You should ask the user to click a link that calls the login function.
I have created a small application , basically a quiz application ( I am about to launch that in a free web hosting website). I want to integrate that with Facebook. But there are mainly 2 issues.
I want the application to be used only by FB users who are member of a particular group (Its a closed group) which i created.
As soon as the quiz is over , the final score should be posted in the group wall.
PS: By integrate i mean , They can only begin the test when they signup using Facebook.
Any other ideas are welcomed.
There are quite a few things you'll need to do. Assuming you're using the FB JS SDK, you'll need to use the following...
Request the publish_stream and user_groups extended permissions via FB.login
Post to the group wall via FB.api, eg... FB.api('/GROUP_ID/feed', 'post', { message: 'yay someone completed the quiz' }, function(response) { alert(response); });
Partial example using FB JS SDK (group checking unimplemented)...
<a onclick="postToGroupWall()">Post msg to group wall</a>
<script>
window.fbAsyncInit = function()
{
FB.init({
appId : 'APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true , // parse XFBML
oauth : true // Enable oauth authentication
});
FB.login(function(response)
{
if (response.authResponse)
{
alert('Logged in!');
// Check if user is in group using opengraph call (/me/groups) via FB.api
// Do that here...
}
else
{
alert('Not logged in - do something');
}
}, { scope : 'publish_stream,user_groups' });
};
window.postToGroupWall = function()
{
var opts = {
message : 'Yay I just completed the quiz',
name : '',
link : 'http://www....',
description : 'Description here',
picture : 'http://domain.com/pic.jpg'
};
FB.api('/GROUP_ID/feed', 'post', opts, function(response)
{
if (!response || response.error)
{
alert('Posting error occured');
}
else
{
alert('Success - Post ID: ' + response.id);
}
});
};
</script>
<!-- FACEBOOK -->
<div id="fb-root"></div>
<script>
(function() {
var e = document.createElement('script');
// replacing with an older version until FB fixes the cancel-login bug
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
//e.src = 'scripts/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<!-- END-OF-FACEBOOK -->
Everything you need to do with facebook (including, but not limited to, the exact requirements you have explained)can be achieved using Facebook Connect API. It is very comprehensive and I can't explain how you would do the whole thing in this answer. This is a good place to start:
http://developers.facebook.com/docs/reference/api/