I want to implement Facebook log-in (connect) into my website locally. I have looked at the documentation and I could not implement it myself. I have already created an App ID in Facebook. What should I change when I upload my website?
I have tried this example:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
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));
</script>
<div class="fb-login-button">Login with Facebook</div>
</body>
and I get this error:
API Error Code: 191 API Error Description: The specified URL is not
owned by the application Error Message: Invalid redirect_uri: Given
URL is not allowed by the Application configuration.
I have put http://localhost:8080/ as my site URL. The documentation says I can use this URL when developing locally.
Note: I am developing using Apache, PHP, and javascript.
Here is a simple example.
Please make sure you are running this from the domain which you configured for you application on developers.facebook.com when you created you application!
<!doctype html>
<html>
<head>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function()
{
FB.init
(
{
appId : "<<YOUR APP ID!>>",
status : true,
cookie : true,
oauth : true
}
);
};
function login()
{
FB.login
(
function( response )
{
if ( response.authResponse )
{
FB.api
(
"/me",
function( response )
{
document.getElementById( "profile_name" ).innerHTML = response.name;
document.getElementById( "profile_pic" ).src = "http://graph.facebook.com/" + response.id + "/picture";
}
)
}
}
);
}
</script>
</head>
<body>
<div id="fb-root"></div>
Login
<img id="profile_pic"/>
<div id="profile_name"></div>
</body>
Did you add the required domains for validation of the api? If you want to implement it on your local server then you will have to add the local address (that's what we do while creating canvas apps).
It's really worth reading the detailed documentation: you can implement the example and learn from it.
find out the id address of your system and instead of local host use your ip address give complete url of page where you are using login
Ex http://192.168.0.10:8080/fb.html
Related
I have the following code:
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title></title>
</head>
<body>
<div id="fb-root"></div>
<script>
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
});
// Additional initialization code here
};
// 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>
<fb:login-button show-faces="true" width="370" max-rows="5" scope="email">Log In with Facebook</fb:login-button>
</body>
</html>
I log into the app using Facebook.
The page refreshes showing me that I'm logged in.
If I refresh or load the the page again then Facebook will load the plugin. After around 10 seconds, the page will reload.
Did I initialize wrong or is this simply how Facebook does things?
EDIT:
I sometimes get the following error:
1 XFBML tags failed to render in 30000ms.
Found a temporary fix from https://stackoverflow.com/a/4182542/968219
I don't know why this works but I'm glad it fixes it. Does anyone know a better fix?
try adding a channel file
FB.init({
appId : 'APP_ID', // App ID
status : true, // check login status
channelUrl : '//WWW.MY_DOMAIN.COM/channel.html', // Channel File
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
the channel file would only include:
<script src="//connect.facebook.net/en_US/all.js"></script>
reference:
http://developers.facebook.com/docs/reference/javascript/
It looks like the xfbml rendering is not working properly, try using the HTML version.
<div class="fb-login-button" show-faces="true" width="370" max-rows="5" scope="email">Login with Facebook</div>
or you can also just build your own login button and bind it to this:
FB.login(function(response) {
// handle the response
}, {scope: 'email'});
New Facebook and Symfony 1.4 developer with a couple of issues.
First off, I am having an issue with getting the Add to Timeline button to appear on my page where I need it. My site seems to show a Facebook loading image, then after the apparent loading no button is displayed. I've looked around at many different sites (including the FB tutorial for Open Graph), all saying to place the scripts after the opening body tag. I have placed it in my layout.php file so that I do not have to put it in multiple places:
layout.php
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://ogp.me/ns/fb#" xmlns:og="http://ogp.me/ns#">
....
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth : true
});
};
(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/all.js#xfbml=1&appId=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="container">
I have already replaced APP_ID where appropriate and placed the Add to Timeline button in a view:
viewSuccess.php
<?php // Facebook Post-to-Timeline Button for this user's created recipe ?>
<?php if($recipe->getUserId() == sfUserTools::getConnectedUser()->getId()): ?>
<fb:add-to-timeline show-faces="false" mode="button"></fb:add-to-timeline>
<?php endif ?>
I'm not sure if its an issue with where the JSSDK script is placed, or if Symfony is not seeing something in the view page. Note, I do not yet have our app's actions and objects setup for Open Graph, posting to the timeline is not my concern at this time. Any ideas or advice for a newbie?
Did you try to pass the access_token or the perms on the FB.init ?
FB.init({
appId : "<?php echo sfConfig::get('app_facebook_api_key') ?>",
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : false, // parse XFBML
perms : 'read_stream, publish_stream',
access_token : "ACCESS_TOKEN_HERE",
frictionlessRequests : true
});
I recently added the Facebook login button to my site and the integration seems to work fine. The only issue I'm having is that the "Login" button is not showing up when I'm logged out of Facebook. Has anyone else had this problem?
I using code straight out of the Javascript SDK docs (https://developers.facebook.com/docs/reference/javascript):
<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>
And have this element on my page:
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1">Login with Facebook</div>
Anyone see any issues with what I have here?
Testing this code with a completely trimmed down HTML page worked just fine for me. It showed the login button if you're not logged into Facebook, and shows your friends who are on the site with you if you are. Maybe some other part of your code is interfering? Can you try with the basic HTML as I have below?
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
var appId = 'YOUR_APP_ID';
var siteRoot = 'YOUR_HOST_NAME';
window.fbAsyncInit = function() {
FB.init({
appId : appId,
channelURL : '//'+siteRoot+'/channel.html', // Channel File
status : true,
cookie : true,
oauth : 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>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1">Login w/ Facebook</div>
</body>
</html>
Closely related -- if you want to display something different than the default in the case of the user being logged in, you can check login status with:
FB.getLoginStatus
Or if you wanted to do something after the user logs in you can bind to the login event with:
FB.Event.subscribe('auth.login', function () {
console.log('Hello world!');
});
It's been a while, but I suspect you were seeing this because your app was in "Sandbox" mode. Check your settings.
I'm trying to use facebook connect in my website for the first time.
I've created an app and I copied the code from here AS IS to a blank HTML file
http://developers.facebook.com/docs/guides/web/#login
but all I see is a plain text - "Login with Facebook" - no button, no functionality.
what can be the problem?
The code is -
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXX',
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>
<div class="fb-login-button">Login with Facebook</div>
</body>
</html>
Try adding an XML namespace to the <html> tag of your document.
<html xmlns:fb="http://ogp.me/ns/fb#">
...then try the following for your login button:
<fb:login-button></fb:login-button>
From what I noticed from your HTML code, you lack the tag that links to Facebook's JS SDK.
Add this:
<script src="https://connect.facebook.net/en_US/all.js#appId={YOUR_FACEBOOK_APP_ID}&xfbml=1"></script>
Then instead of doing
<div class="fb-login-button">Login with Facebook</div>
do
<fb:login-button></fb:login-button>
just as what Charley P. answered.
Try to run your application in host. if your project is php based project means run in https://localhost/projectname.
And also check your facebook app setting. your project name should same as site name.
I want to create an application on Facebook, after doing like the tutorial from FB Developer site. I got the error at the step using Javascript SKD, I try to get this function, and it's really incorrect.
Let me show more about my application:
Here is my settings:
Summary
App ID/API Key App Secret
xxxxxxxxxxxxxx xxxxxxxxxxxxxxxx
Canvas Page Canvas URL
https://apps.facebook.com/ibattleship/ http://192.168.11.154:8091/
Secure Canvas URL Canvas FBML/iframe
https://192.168.11.154/ iframe
Contact Email Support Email
xxxxxxx#gmail.com xxxxxx#gmail.com
And index.php file:
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo APP_ID ?>', // App ID
channelURL : '//192.168.11.154:8091/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
});
};
// 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));
// Additional initialization code here
</script>
Hello, world.
</body>
</html>
And the channel.html file
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: maxage=".$cache_expire);
header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
But, when I run this page, I got the above error. Did I miss something?
This is a bug from Facebook Javascript SDK.