Facebook Social Login: Fill form fields with details from Facebook

Hey Kurtis - Increasing the scope should do the job. We have a ticket open so lets dig into this together to figure this out.

Just sent you a reply now!

Hey there!

Sorry about that. There’s a small bit of code that i’ve now added that should fix this issue.

Grab the updated script and give it another go!

<script>
  /**
    * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
    * TS:0002-13-010
  */

  function setFormValues(response) {
    
    // ***UPDATE FIELDS BELOW***
    //Adjust field IDs on the left with the field IDs on your form
    $('#email').val(response.email);
    $('#name').val(response.name);
      
    //Uncomment the lines below if you require the additional data
      
    //$('#firstNameField').val(response.first_name);
    //$('#lastNameField').val(response.last_name);
    //$('#linkField').val(response.link);
    //$('#genderField').val(response.gender);
    
    //The form willl submit by default. To disable this comment out the line below
    document.querySelector('.lp-pom-form button').click()
  }
  

  function statusChangeCallback(response) {
    if (response.status === 'connected') {
      fillForm();
    } else if (response.status === 'not_authorized') {
      triggerLogin();
    } else {
      triggerLogin();
    }
  }
  
  // Show Login Window
  function triggerLogin() {
    
   FB.login(function(response) {
     if (response.status === 'connected') {
         fillForm(); 
        }
   }, {scope: 'public_profile,email'}); 
  }
  
  // Called when your Facebook button is clicked
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }

  // Update appId below to reflect your Facebook Apps ID
  window.fbAsyncInit = function() {
  FB.init({
    appId      : '552705011513631',
    cookie     : true, 
    xfbml      : true, 
    version    : 'v2.0',
    status     : true
  });
  };

  (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_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
  
  function fillForm() {
  
  // Update the variable below with the fields you wish to obtain
  // See the full list of fields here:
  // https://developers.facebook.com/docs/graph-api/reference/user
    var requestedFields = {
      fields: 'name, first_name, last_name, email'
    };
    
    FB.api('/me', requestedFields, function(response) {
      setFormValues(response);
    });
  }
</script>

1 - Javascript is before body end tag ?
2- Button url Pass thought url parameter ?
here my page : http://unbouncepages.com/browzin/ not working

Everything in now find, the template that i bought on time forest is include a javascript that block the Facebook connect, now it’s just perfect

Hey Augusto

Are you still seeing this issue?

I visited the page and it seems to work just fine. If you are still running into issues shoot a email to support@unbounce.com and address it to me. Let me know what browsers/popup blocks are affecting it and i’ll see if I can give any helpful tips

Hi there, I’m unable to get this going. My page is http://unbouncepages.com/facebook-connect-test2/

any tips?

Thanks!

Ive got a ticket into support, but just curious if anyone has successfully got this to work on mobile? Works fine on desktop, but when I add the button to mobile nothing happens when you click the button. Ive got the Facebook App setup since I am not hosting on Unbouncepages as well. http://guide.viviscal.com/healthy-hair-guide/

Hey Kurtis, how do I open up the scope to include  user_location and user_hometown? I need to get auto populating address on my form. I’m a designer, not a dev! Thanks, J

Also, is there a way/code to pull things like ‘list’ categories from FB?

Kurtis

I couldn’t get anymore info to pull but am seeing positive results from my FB auto login variant tests.

@Johnny_Opao Thanks so much for the step-by-step instructions! Got the button working on our unbouncepages.com/samwise, but as you mentioned, it no longer works at go.samwiseapp.com.

Could you elaborate a bit more on the Facebook settings we need to change to get it up and running again?

Thanks in advance!

Hi Stefano. It worked fine for me. We did tests on several different mobile devices.