Facebook Login link auto refresh to facebook user profile link and picture - facebook

Question

I am trying to make a WordPress submit form using Gravity Forms where the visitors see a "Login with Facebook" button.
Once the visitor logs in and grants the permission, the section then refreshes to show the Facebook user profile link and picture, letting the visitor know that they are submitting with the Facebook profile.
I have already copied the codes but I need some help to complete it.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXXXXXXXXX', // App ID
channelUrl : '//www.MY-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
});
// 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>
<script>
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'http://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.name
}
});
</script>
Now, what do I put to get the section where I can show a "login button" and then show the user profile link after someone logs in?

Answer 1

For log-in you may use one of:
FB.login method of JavaScript SDK
Login Button (which have HTML5/XFBML/Iframe version)

Answer 2

Your call the to API is too premature in the page load. First it need to be done after facebook scripts are ready to be run. You can put the code into the fbAsyncInit() function. Secondly, you should follow this paradigm to ensure the user is logged into your app, see: https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/