How to Post of facebook wall during pageload using javascript api? - javascript

The below code works perfectly.. On clicking the fb:login-button, it posts the message on facebook wall of the person who has logged in.
But, i want this to happen immediately after the page loads and not after clicking the button. If the user is logged In already, the message should be posted on wall. How can i do this ?
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=XXXXXXXXXXXXXXX&xfbml=1"></script>
<fb:login-button show-faces="false" width="200" max-rows="1" perms="publish_stream" onlogin="postonwall()">Click to Publish Below Content</fb:login-button>
<script>
function postonwall()
{
    FB.api('/me/feed', 'post',
    {
        message: 'A good reference for APIs',
link: window.location.href,
        name:'API Reference',
        picture:'http://www.demo.lookmywebpage.com/publish-on-facebook-wall/Google-Twitter-Facebook.jpg',
        description:'Demo Facebook Post'
    }, function(response) {
        if (!response || response.error) {
alert('Oops! User Denied Access');
        } else {
alert('Success: Content Published');
        }
    });
}
</script>

But, i want this to happen immediately after the page loads and not after clicking the button.
So you want to annoy your users …?
If the user is logged In already, the message should be posted on wall. How can i do this ?
Use FB.getLoginStatus, and if the user is already connected, then make the post.

Related

Signing out of Google+ using JS

I am trying to put a Google+ login button on my site. The button works perfectly. I have a Sign Out button also. I hide the sign in button when the user logs in.My code is here:
<span id="signinButton">
<span
class="g-signin"
data-callback="signinCallback"
data-clientid="******************"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schema.org/AddAction"
data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email">
</span>
</span>
<button id="revokeButton" onclick="gapi.auth.signOut()">Sign Out</button>
<script>
function signinCallback(authResult) {
if (authResult['status']['signed_in']) {
document.getElementById('signinButton').setAttribute('style', 'display: none');
console.log("User successfully logged in!!");
} else {
console.log('Sign-in state: ' + authResult['error']);
}
}
</script>
<script>
function disconnectUser(access_token) {
var revokeUrl = 'https://accounts.google.com/o/oauth2/revoke?token=' +
access_token;
// Perform an asynchronous GET request.
$.ajax({
type: 'GET',
url: revokeUrl,
async: false,
contentType: "application/json",
dataType: 'jsonp',
success: function(nullResponse) {
document.getElementById('signinButton').setAttribute('style', 'display: display');
// The response is always undefined.
console.log("Success in logging out!");
},
error: function(e) {
// Handle the error
console.log(e);
// You could point users to manually disconnect if unsuccessful
// https://plus.google.com/apps
}
});
}
</script>
The problem is when I use gapi.auth.signOut() to sign out... it logs me out, but logs in the same user again to Google+ on refresh. How do I allow other people to login to my site. How do I completely logout people from Google. I am new to Javascript...an example would help.
The answer as I figured out is simple. The first time the user logs in, he is not logged into my site . So obviously the user has to log in. The next time the page refreshes...Google+ checks if the user is already logged into any of Google services such as gmail etc.. and keeps the user logged in if the answer is true. To check whether this works...log out of any of your Google service(gmail etc) and try logging in with Google+. It will ask for credentials. So once the user logs in to Google+, he/she need not keep signing in every time.
This answer is more of a joke but why don't you try the hacky method of loging out the user from his google account by adding hidden iframe to the body with src of https://accounts.google.com/Logout?
It will refuse to display because of the X-Frame-Options set to DENY but will actually log you out.
One-liner with jquery:
$('<iframe style="display: none" src="https://accounts.google.com/Logout"></iframe>').appendTo(document.body);

Capture Facebook share/post to FB event

I am working on one of my pet projects. Where one of the features I need is as follows:
User clicks the “share to Facebook” button on my web page, as done here https://developers.facebook.com/docs/plugins/share-button/
And then in Facebook popup window, user can either click “post/submit” or cancel or close the window. Is there any way to know that user did really post to his/her Facebook timeline?
Please assume, that user is not my friend or have never liked my page, but user is currently logged in to Facebook in another browser tab.
I see FB events, those can be captured in callback at https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/ , e.g. edge.create can capture like button.
Similarly is there any way to capture “share/post to fb” ?
I do not believe that you can do this with the share button.
You can however, initiate the same dialog using the JavaScript SDK. Using the SDK, you'll be able to capture the callback function that you mentioned.
Here is the example given in the documentation:
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
The answer provided by Lix doesn't work anymore. The UI methods have changed, now this would be the Share Dialog (not Feed), which only returns the post object if "the user is logged into your app using Facebook and has granted publish_actions."
https://developers.facebook.com/docs/javascript/reference/FB.ui
As far as I've found, there's no event to subscribe to for post sharing.

HTML Input has focus, but I can't edit it after using .val()

So here is the problem.
I have facebook page tab app. In it there is a form with text inputs and a button "Facebook login".
When the user clicks the button jQuery fills in the form with user data received from Facebook Graph. Form is managed with JS Formly and jQuery.
So if the user fills the info manually there is no problem, but if he uses "Facebook Login" he can't edit inputs until iframe losses focus and then gain it again.
The problem only persists in Firefox, Chrome and IE works like a charm.
function login(vpis) {
FB.login(function(response) {
if (response.authResponse) {
console.log("Welcome! Fetching your information.... ");
FB.api("/me", function(response) {
if(vpis)
{
$("#mail")[0].value = response.email;
$("#mail2")[0].value = response.email;
$("#Name")[0].value = response.first_name;
$("#Surname")[0].value = response.last_name;
$("#BirthYear")[0].value = response.birthday.substring(6);
//blur();
myWindow=window.open("","","width=10,height=10");
myWindow.close();
//$("#tel").focus();
}
} else {
console.log("User cancelled login or did not fully authorize.");
}
}, {scope: "email,user_birthday,user_likes"});
}
Link to Formly.js http://fb.3art.si/rubrike/js/formly.js
Here is the function where I fill in the form. I tried to use a lame tweak, to lose focus, but there is a problem when Firefox blocks it.
Any help is highly apriciated, and sorry for my bad english. I have scaned the google for answer, but could not find it...

Facebook login window appears and disappears

I am using js sdk to login using <fb:login-button></fb:login-button> button
When I click "login" button on my page, the pop up box appears and disappears quickly.
I found this other thread on here
Facebook login window appears and disappears very quickly
Which explains that it happens because the user is already logged into facebook. My question is, how do I go around this issue?
if they are already logged in to facebook, how do I make sure the pop up doesn't just appear and disappear?
You could check the user's login status with FB.getLoginStatus.
https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
If the user is not logged in you could display a (custom) login button.
I want to complement FWrnr's answer with actual code, because this is indeed very helpful.
The solution is the FB.getLoginStatus function as he says:
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
window.location = //redirect to page with logged user (you have the response token in response)
} else {
//Show the login popup
FB.login(function(response) {
if (response.authResponse) {
window.location = //redirect to location after correct login
}
}, { scope: '<scopes>', state: '<state>' });
}
});
This way, if the user is "connected" (logged in and app authorised), you won't call the FB.login method, so the login window won't flash. In any other case, it will show the login window, which is the expected result.

FB Login button not calling onlogin function

I have my fb login button created as so
<fb:login-button perms="email" size="small" onlogin="check_login_session()">Sign Up Using Facebook</fb:login-button>
I have also defined the check_login_session function already as I'm using it on a .click link elsewhere on the page(which does work). However, my problem is when I'm already logged in to FB and I click the button, the FB popup appears, then dissapears and it does nothing. The onlogin is not called nor is any error displayed.
If I was to logout however, and then click the button, it would give me the fb login prompt, and after filled out and submitted would behave as it is supposed to. It's only when I'm already logged in and I click the FB login button that the issue occurs. Any Ideas?
Edit: I found that it does call it if I say put alert("Test") in the onlogin but any function I define on the page and try to call it returns saying it's not defined.
I think you want to be notified about a logged in user either after a login happened or of a user comes to teh page and is already logged in. In this case you have to subscribe to the auth event and handle it:
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
//yourcode
} else if (response.status === 'not_authorized') {
//your code
} else {
//yourcode
}
});
The new facebook login flow says to only display the facebook login button if the user is not currently logged into facebook. If you display it anyway, nothing will happen when they click on it because it will detect that the user is already logged into facebook and so will exit the login process and the post login hook won't be called. The facebook documentation says to first detect whether the user is already logged into facebook, and if they are logged in, grab the facebook uid and simply execute the function you would have called as part of the post login hook. The facebook login button is simply that--a button to log into facebook and not a button to log into your site.
The event says onlogin, so it will only execute when you login through Facebook Connect.
If you are already logged in on Facebook Connect, then the function won't execute because you're already logged in...?
Most likely the function you're trying to call isn't accessible on that page even though you think it should be. Make sure you removed the () after the function's name. The fact that "alert" does work but your function doesn't kind of proves that. Make sure your function can be accessed by the script by making it global and ensuring your script is loaded.
The function has to be defined on the window. The solution is:
// somewhere before the button is rendered
window.loginCallback = () => {
// callback logic
}
<div
className="fb-login-button"
data-max-rows="1"
data-size="large"
data-button-type="continue_with"
data-onlogin="loginCallback();"
></div>

Categories

Resources