FB Comments Plugin - Detect comment on page - javascript

How can I detect when a comment is made on my page with the Comments Plugin? I'm currently using the Facebook PHP SDK, reading the Facebook documentation it says I need the JS SDK, but it's not really clear on how you accomplish what I want to do.

I guess it's straight forward:
<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
});
FB.Event.subscribe('comment.create',
function(response) {
alert('A new comment has been added!');
}
);
};
// 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>
Documents: 1 - 2

Related

Symfony2 Facebook connect - redirect after login using js sdk

I am implementing Facebook connect on my Symfony2.1 company's website, using the javascript sdk.
The following code that I am using, works fine:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'my-app-id', // App ID
cookie : true,
xfbml : true,
oauth : true
});
};
function after_click() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
window.location = "{{ hwi_oauth_login_url('facebook') }}";
}
});
}
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) { window.fbAsyncInit(); return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.onload = window.fbAsyncInit;
js.src = '//connect.facebook.net/fr_FR/all.js';
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div class="fb-login-button m_y" scope="email,user_birthday" onlogin="after_click()"></div>
The problem I am facing is that I am desperatly looking for a way to redirect the user to the current page after he logs in. Now the behavior is that the user is always redirected to the homepage of my website.
I know there is a redirect-uri parameter when using the php sdk, I'm looking for something similar with js sdk and I have to say I'm having a hard time finding it.
The window.location = "{{ hwi_oauth_login_url('facebook') }}"; comes from the Symfony2 OAuth Bundle and is used to manage the Facebook connection. Maybe I need to tell the OAuth Bundle where to redirect after a successful login, but can't really find a solution for that either.
Thanks for any thoughts you can have.
Ok it was actually quite simple, just adding use_referer: true in my security.yml did the job:
security:
...
firewalls:
portal_area:
...
oauth:
resource_owners:
facebook: "/login/check-facebook"
login_path: /connect
failure_path: /connect
always_use_default_target_path: false
default_target_path: /
target_path_parameter: _target_path
use_referer: true
Solved.

Redirect to home page after login using "login with facebook" :Javascript

I am using "login with facebook" in my application. I want to redirect to home page after hitting the "Login with facebook" button. I dont know how to implement it...
Code is,
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP ID', // App ID
channelUrl : 'http://www.***.com/', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// 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 = "js/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div id="fb-root"></div>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1"></div>
Please help,
Thanks
Use Facebook Event:
FB.Event.subscribe('auth.login', function(){
window.location = 'index.html';
});
new code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP ID', // App ID
channelUrl : 'http://www.***.com/', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.login', function(){
window.location.href = 'index.html';
});
// 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 = "js/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
change index.html with your homepage url.
if you want to add logout too:
FB.Event.subscribe('auth.logout', function(){
window.location.href = 'index.html';
});
change your login button to
<fb:login-button perms="email,publish_stream" autologoutlink="window.location.href='index.html';"></fb:login-button>
Change index.html to your homepage url

Javascript SDK automatically login

I'am trying to get the Login button from Facebook to work on my website using the Javascript SDK. If the user is logged on, I get the email address back. This works. But on the page where I have my Facebook Login button, I also have the normal login for my website. (username & password). But when I go to my login page, the page automatically loads the Facebook button and the Facebook login dialog appears. But I don't want to load this button automatically. I want that users always have to press the login button for Facebook. Is this possible?
This is my code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'MY_APP_ID', // App ID
status: true,
cookie: true,
xfbml: true,
oauth: true,
});
FB.getLoginStatus(function(response) {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
alert('Good to see you, ' + response.email + '.');
});
} else {
alert('User cancelled login or did not fully authorize.');
}
});
});
// 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>
FB.getLoginStatus method is used to know whether user has logged in or not
FB.login is used to prompt login page to authenticate and authorize the app.
you are calling FB.getLoginStatus method and not bothering about the response and firing fb.login button always.
If you always want user to click login button don't use FB.getLoginStatus
Use this code
<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', // 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
xfbml : true // parse XFBML
});
};
// 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-login-button">Login with Facebook</div>
</body>
</html>
FYI: https://developers.facebook.com/docs/guides/web/
check authentication section

Facebook login in a web app

I am trying to implement facebook login in my web application. i got the app id and my code is as follows.`
My Facebook Login Page
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<<App Id>> ', // App ID
channelUrl : '//www. DOMAIN NAME.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
});
// 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-login-button">Login with Facebook</div>
</body>
`. I am trying to run this and its giving an error for my app. I also got the secret key but dont know where exactly to place it. Do we need to place any css or js or any other files for this ??
Any help is greatly appreciated..
appId : '<<App Id>> ', //Place App ID
channelUrl : '//www. DOMAIN0 NAME.com/channel.html', // Place domain here

javascript facebook login OPERA and SAFARI is not working

I have this code in my site but when I am trying to logi in under apps.facebook.com/xyz
it is not working - most recent Opera popups window but it stays blank (blank popup window stays ope)
in most recent Safari in opends and close popup window and refresh page
but it will not log me in to my app:
<script type="text/javascript">
window.fbAsyncInit = function()
{
if ($.browser.opera) //kvoli opere
{
FB.init({
appId : '123', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
channelUrl : 'https://www.sss.tld/channel.html'
});
FB.XD._transport="postmessage";
FB.XD.PostMessage.init();
}
else
{
FB.init({
appId : '123', // App ID
status : true, // check login status
cookie : true // enable cookies to allow the server to access the session
});
}
// 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));
function loginJSokno() {
FB.login(function(response) {
// handle the response
location.reload(true); //po prihlaseni si refreshneme page
}, {scope: 'publish_stream,email,offline_access,create_event'});
}
</script>
What is wrong with this?
P.S. for safari it looks like iframe third party cookie problem but how to solve it? i tried but no luck. for opera, i have no idea what's problem

Categories