I am trying to implement Facebook Login System into my website.
While it try to connect to facebook, I get an error from console log:
Unsafe JavaScript attempt to access frame with URL https://s-static.ak.fbcdn.net/connect/xd_proxy.php?xxxxxxxxxxxxxxxx
I am using JavaScript SDK
I added this in the body tag:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxx',
status : true,
cookie : true,
xfbml : 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));
</script>
Facebook Login button:
<div class="fb-login-button" data-perms="email">Login with Facebook</div>
I am testing from localhost - I have register my website on facebook develop apps (Site URL: http://localhost)
How to fix this problem? or should I use PHP SDK?
Edit: Same problem when I uploaded to server with public domain.
The error that you see there is a non-fatal error. There is no workaround for this, as your browser is advising you that it is not a great idea to load JavaScript from foreign domains. Just ignore this message and look elsewhere for bugs if your scripts do not run. Sajith is also correct that you can't debug from localhost.
See here also,
"Unsafe JavaScript attempt to access frame with URL..." error being continuously generated in Chrome webkit inspector
Be sure to have this line on the top of your page (it works for me) :
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml">
It is not possible to test all Facebook integration using domain localhost. You need to place your script in any public access domain and need to update the url in developer app settings page. The security error showing from JavaScript is due to this localhost access by facebook scripts
You can only use the same domain name in which you have registered with Facebook apps.
1. You need a public domain name (www.example.com).
2. You need to register with Facebook apps.
3. Get the 2 keys from the Facebook and use in the code:
appId : 'xxxxxxxxxxxxxx',
Had this error when I implemented fileglu and it may be a CORS error since you are running off localhost. Try running on Facebook and can you replace the bottom half with the code below:
(function() {
var e = document.createElement('script');
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js#appId=<your-app-id>&xfbml=1';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
I also had Oauth 2.0 and custom channel enabled in my FB.init() page. See: http://fbdevwiki.com/wiki/FB.init for more information.
You can tweak your localhost machine to appear to be of the domain that facebook requires.
On linux or OSX, add an entry to /etc/hosts; on windows, edit c:\windows\system32\drivers\etc\hosts. Add an entry like this:
127.0.0.1 local-dev.mydomain.com local-dev
Where "mydomain.com" is the domain with which your FB app ID is registered.
In my case error was caused by like widget that was loaded using addthis on the site that already had FB app.
It looked like problem was in conflicting with multiple fb js-sdk.
So solution could be replace addthis facebook like wdiget by native facebook like widget.
I've also had another bug in webkit when js-sdk was not loaded. I fixed that by replacing window.fbAsyncInit by jQuery.getScript().
Eventually it fixed error "Unsafe JavaScript attempt to access frame with URL" also.
Here is example:
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function() {
FB.init({
appId: 'your app id',
cookie: true,
xfbml: true,
oauth: true,
status: true
});
// Trigger custom event so we can use it to run init dependent actions in different places.
$(document).trigger('FBSDKLoaded');
//...
});
Related
I'm using the following form to allow users register to my web app through their facebook account. I have my own policy regarding Username's length, password's complexity etc. and I want to force it also on user that register through facebook, I know that I can do it in the register.php file (the Facebook php api: Verify user details according to my app's policy, see below) but then the user is already registered from facebook's perspective.
My question is, then, how can I prevent a user from being registered to my app without providing registration details which fit my app's policy?
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_FB_APP_ID',
channelUrl : 'channel.html',
status : true,
cookie : true,
oauth : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.logout', 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>
<div class="fb-registration"
data-fields='[{"name":"name"},
{"name":"birthday"},
{"name":"location"},
{"name":"gender"},
{"name":"email"},
{"name":"username","description":"Username","type":"text"},
{"name":"password"}]'
data-redirect-uri= MY_DOMAIN . "register.php" >
</div>
You can make a DELETE call to /user/permissions. Since this would make the user re-auth your app, I wouldn't do this as soon as the user tries to create an invalid registration on your site. Instead, depending on your complexity, issue the DELETE call when the user has left your registration page for good.
According to the docs:
The second thing you can do is to completely de-authorize the app
making the delete call. Once this is done, anyone using your app will
have to go through the Facebook Login process as if they were a new
user. This can be effective when an explicit 'log out' function is
provided, or an option to delete in-app accounts
I tried to implement facebook login in local,i used below code in my website
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any authentication related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
testAPI();
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct interaction from people using the app (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
FB.login();
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
FB.login();
}
});
};
// 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));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
</script>
after i login to my website , facebook login button is appering.but when i click on login button, i is showing URL error
I tried all below url to set Site URL in facebook dashboard
but still am getting same error.
am using wamp(php)
can any one help me, what is the url ia have to set as site url in facebook dashboard to it should work locally??????
Here is two solutions to run your facebook application in your localhost..
Running Facebook application on localhost
http://ankurm.com/blog/using-localhost-for-facebook-app-development/
also you have to enable curl extension in your php..
After proving your App Id for facebook , use redirect_url and set it to local address.
While searching the web, I found this code:
$apprequest_url ="https://graph.facebook.com/" .
"/apprequests?ids=USERID_1,USERID_2,USERID_3" .
"&message='INSERT_UT8_STRING_MSG'" .
"&data='INSERT_STRING_DATA'&" .
$app_access_token . "&method=post";
Can anyone explain to me how this sends an app request? And how is it supposed to work? Do you add it to a button?
The URL is a Graph API endpoint, along with necessary options via the query string.
It works by a request being made to that URL, and Facebook will return the result of that Graph API call via the HTTP response.
For more info, you should do a little research on REST APIs. ;-)
As a side note as well, the code in ASHUTOSH's response bring up a dialog from which to send app requests via the FB javascript SDK, but then behind the scenes the SDK is merely wrapping a call/response to the Graph API anyway. You can check it out using Firebug for FF, or the other browser dev tools in Chrome, IE, etc. Just go into the Network tab and see the HTTP request being made by the browser.
You can send app request using javascript sdk.
<html>
<head>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId :<?php echo $facebook_appid;?>,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
function newInvite(){
var receiverUserIds = FB.ui({
method : 'apprequests',
message: 'Invite your Friends for Your App',
},
function(receiverUserIds) {
console.log("IDS : " + receiverUserIds.request_ids);
}
);
//http://developers.facebook.com/docs/reference/dialogs/requests/
}
</script>
</head>
<body>
<?php
//---your app code here-----
//to call the function,
echo "<script type='text/javascript'>newInvite();</script>"
?>
</body>
</html>
save the file as .php and run.
This should work! If it does,then accept the answer.
Happy coding!
I added a Facebook comment box to my website a while ago. What I want now is to trigger some code "mail() in php" when someone adds a comment. I want my website to send an email to the user telling him/her that a visitor has left a comment on your item/page.
It was easy to do with the old comment section I created but I don't know now how to do it with FB. Is it even possible?
If yes please include a detailed answer if you don't mind since I am not that good at this :)
If you are not happy with the solution FB already provides (as scjosh explained), you can use Facebooks Javascript SDK a bit of ajax (jquery would be my favorite) to load a script with the mail() function.
First load the JS SDK (make sure you change 'YOUR_APP_ID' and the channelURL!!):
<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>
more information about js sdk, the loading and the channel file can be found here. You should have an app or create an app in facebook for that reason. Information about setting up an app is here.
Next step is to load the script with the mail() per jquery:
FB.Event.subscribe('edge.create',
function(response) {
$(document).load('mail.php?response='+response);
}
);
And finally the mail.php:
if(isset($_GET['response'])) {
$msg = 'A comment was left on '.$_GET['response'];
mail('user#webpage.com','New comment',$msg);
}
Hope that helps!
If I understand you correctly, Facebook already includes integrated email communications via their website. I.E., if the Facebook user has notifications enabled for your comment threads, an email will be sent to that user upon request. The only other way to make this possible would be to hack together your own comment box and hook it with the Facebook API.
Is it possible for me to post a message on a given users facebook wall, if they perform a certain action on my website?
Basically, I am looking for a step by step guide to achieve this, as I have not been able to figure out how to do this via the facebook documentation.
Step 1:
Set up a new application at facebook. Enter details like your website address and domain name. Note down the api key, application id, and application secret. You can set up a new facebook application here. Note: To be able to access facebook developers dashboard you need to be a verified developer, i.e. you should either have your mobile number or credit card verified with it.
Step 2:
Set up an authentication method to check if user is logged into facebook and if facebook session exists ask for basic permissions from user. You can do this easily using PHP SDK:
$fb_sdk_path = FACEBOOK_SDK_PATH;
require_once($fb_sdk_path);
//initialize FB object
$facebook = new Facebook(array(
'appId' => FB_APP_ID,
'secret' => FB_APP_SECRET,
'cookie' => true,
'domain' => 'example.com'
));
//try to get session. if this fails then it means user is not logged into facebook
$session = $facebook->getSession();
if (!$session) {
//get facebook login url
$url = $facebook->getLoginUrl(array(
'canvas' => 1,
'fbconnect' => 0
)
);
//put login url script to redirect to facebook login page (if you want to do this)
echo "<script type='text/javascript'>top.location.href = '$url';</script>";
exit;
} else {
//try to get user details from session this will trigger the permissions dialog.
try {
$uid = $facebook->getUser();
} catch (FacebookApiException $e) {
}
}
Step 3:
Use Facebook Javascript FB.ui method to generate a post form.
<div id="fb-root"></div> <!-- don't forget to include this -->
<script src="http://connect.facebook.net/en_US/all.js"></script><!-- include fb js -->
<script type="text/javascript">
//initialize facebook
FB.init({
appId:'YOUR_APP_ID',
cookie:true,
status:true,
xfbml:true
});
//call this function on click or some other event
function post_to_profile() {
FB.ui({
method: 'feed',
name: 'title of the feed',
link: 'link on the title',
caption: 'caption to show below link, probably your domain name',
description: 'description',
picture:'picture to show',
message: 'default message. this can be edited by the user before posting'
});
}
</script>
This should be enough to get it working.
I would recommend using the Javascript API. While you can certainly do it PHP, I find all the redirects required a poor user experience. Here is how you can get started loading the javascript API. It also has an example on how to post to a wall.
http://developers.facebook.com/docs/reference/javascript/
Posting to someones wall (yours or a friends) via javascript uses the FB.ui call.
http://developers.facebook.com/docs/reference/javascript/FB.ui/
Taken directly from http://developers.facebook.com/docs/guides/web/
<html>
<head>
<title>My Great Website</title>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<script>
FB.init({
appId:'YOUR_APP_ID', cookie:true,
status:true, xfbml:true
});
FB.ui({ method: 'feed',
message: 'Facebook for Websites is super-cool'});
</script>
</body>
</html>
This will open a prompt to post onto the currently logged in user's wall.
The getting started guide to the Graph API should help you. Specifically, you'll be dealing with the post object (that page contains a note about publishing, scroll down to the "Publishing" section). You'll also need the publish_stream permission, which you can learn more about here. And since you're doing this in PHP, the official Facebook PHP SDK will be of interest to you as well.
Here's the general flow
Register an app at developers.facebook.com
Create page w/ this link to this page: https://www.facebook.com/dialog/oauth?
client_id=164837516907837&
type=user_agent&
scope=email,read_stream,user_videos,friends_videos,user_about_me,offline_access&
redirect_uri=http://www.facebook.com/connect/login_success.html
Save the user x's oath token that is returned from step2
Via API call post to user x's wall
To reference: http://thinkdiff.net/facebook/graph-api-iframe-base-facebook-application-development/
Various steps involved
1)Register App at facebook
developers
2)Get PHP SDK of Facebook
3)Get Offline access from user
so that you can post in users wall
without his permission(Use
accordingly)
4)Save the access token given by
facebook for the user
5)Using the access token by php
SDK post into the wall
Check this question it may be of some help
Publishing To User's Wall Without Being Online/Logged-in - Facebook Sharing Using Graph API