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.
Related
I am embedding a like button in my site using the social plugin. I started with the code generated in like button documentation (http://developers.facebook.com/docs/reference/plugins/like/). I'm using standard layout without send or faces. The button itself displays and works fine. However, the the comments dialog does not display.
I found a number of suggestions for making this work, but am unsuccessful so far. The width is 450px. I tried the HTML5, XFBML, and IFrame versions. The IFrame version had the "add comment" link. That dialog displayed but was cutoff. I also used FB.init. Here is my html. I stripped out everything except the like button bits thinking it might be CSS-related but the stripped down version doesn't work either.
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#">
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'appid', // App ID
channelUrl : '//localhost:8282/myapp/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
});
// 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>
<!-- <div class="fb-like" data-href="http://www.espn.com" data-send="false" data-show-faces="false" data-width="450"></div> -->
<fb:like href="http://www.espn.com" send="false" width="450" show_faces="false" />
</body>
</html>
Sometimes, it just takes a second pair of eyes. Thanks in advance for the help.
The comments box only works in a public domain. In other words, it won't display when running the your app on localhost. I believe I did read this on stackoverflow somewhere, but it didn't register.
Try replacing "connect.facebook.net/en_US/all.js" with "http://connect.facebook.net/en_US/all.js"
I want to create a Facebook login for my website. I used the same code from the Facebook reference. But the login button does displays only as the text "login with Facebook". Can anyone help?
My code is:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '394261217260358',
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>
login with facebook
<fb:login-button show-faces="false" perms="publish_stream,email,user_location,offline_access" width="200" max-rows="1">login</fb:login-button>
</body>
</html>
Put this line
<fb:login-button show-faces="false" perms="publish_stream,email,user_location,offline_access" width="200" max-rows="1">login</fb:login-button>
above <script> and below <div id="fb-root"></div> and it should work
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
I've got a facebook iframe page with the following (cut out irrelevant) code. I can't seem to become moderator of the comments. Any idea where i messed up?
(debugging link: https://developers.facebook.com/tools/debug/og/object?q=brandpreview.nl%2Ffbkerst%2Fwhitewishingboard.php)
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta property="fb:admins" content="737418775" />
<meta property="fb:app_id" content="240672092656980"/>
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '240672092656980', // App ID
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
});
FB.Canvas.setSize({ width: 520, height: 2000 });
// Additional initialization code here
};
// 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/all.js#xfbml=1&appId=240672092656980";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div>
<div class="fb-comments" data-href="http://www.facebook.com/brandrepublic.nl" data-num-posts="5" data-width="520"></div>
</body>
First off, you shouldn't place your profile id inside those brackets. You should provide it without:
<meta property="fb:admins" content="737418775" />
Secondly, a requirement from Facebook has to be met; the facebook user who should get moderator priviliges needs to 'Like' your application.
Propably needless to say, but make sure you are logged in to Facebook when looking at your comment plugin.
I had a page with a simple Facebook like button and I needed to know when the user liked the page so I used the edge.create event to do this which all worked fine. I now need to add a like Box plugin to the page to like the client's facebook page and again I need to be notified when someone clicks the like button. However, the subscribe event never fires. Any idea what might be the problem? I am using the xfbml code to add the like box.
It appears to be a bug. Here's a link to official credible sources:
http://developers.facebook.com/bugs/310763168934515
And my jsFiddle here to demonstrate: http://jsfiddle.net/dmcs/3D2GD/1/
EDIT
I've found the solution!
First I put my code onto my own domain rather than jsFiddle to do better testing, however my first try failed as if the code was still on jsFiddle. So I troubleshot the situation further.
Then for the app setting I specified I went in and specified the WebSite url on https://developers.facebook.com/apps/{APP_ID}/summary
Here's my code
<html>
<head>
<title>Like Box example</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '{APP_ID}'
});
FB.Event.subscribe('edge.create', function(response) {
alert('You liked the URL: ' + response);
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; //js.async = true;
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 class="fb-like-box" data-href="http://www.facebook.com/Cocacola" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
</body>
</html>
just need to replace code:
<div class="fb-like-box" data-href="http://www.facebook.com/jsfiddle"
data-width="292" data-show-faces="true" data-stream="false" data-header="true">
with this one :
<fb:like-box href="http://www.facebook.com/jsfiddle"
colorscheme="light" show_faces="false" header="false" stream="false"
show_border="false"></fb:like-box>
and it works ok.