I'm attempting to make a wordpress submit form using gravity forms in which the site visitors visit a "login with facebook" button.

When the site visitors logs in and grants or loans the permission, the section then refreshes to exhibit the facebook account link and picture, letting the customer know that they're posting using the facebook profile.

I've already replicated the codes however i take some assistance to complete it.


<div id="fb-root"></div>
  window.fbAsyncInit = function() {
      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
     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";

          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

Now, Exactly what do I offer obtain the section where I'm able to show a "login button" after which show the consumer profile link after someone logs in?


For log-in you can utilize among:

Your call the to API is simply too premature within the page load. First it have to be done after facebook scripts will be ready to be run. Place the the code in to the fbAsyncInit() function. Next, you need to follow this paradigm to guarantee the user is drenched to your application, see: https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/