Facebok login on custom login form

Discussion in 'aMember Pro v.4' started by dale_sellers, May 13, 2013.

  1. dale_s

    dale_s aMember Pro Customer

    Joined:
    Apr 12, 2013
    Messages:
    96
    Does anyone know of the correct code for adding a facebook login button to a custom login form located outside of amember?

    I have a simple login form I am using outside of amember:

    Code:
                <form name="loginform" id="loginform" action="http://www.lifeleap.org/manage/login" method="POST">
                    <p><label><?php print $instance['username_title'];?></label><br/>
                        <input type="text" name="amember_login" class="input" id="user_login" size="15"></p>
                    <p><label><?php print $instance['password_title'];?></label><br/>
                    <input type="password" name="amember_pass" id="user_password" class="input" size="15"></p>
                    <input type="hidden" name="amember_redirect_url" value="http://www.lifeleap.org/communn/index.php">
                    <p class="submit">
                        <input type="submit" name="wp-submit" id="wp-submit" value="Login">
                    </p>
            </form>

    Along with the standard form, I copied the facebook button login code (from amember login page). The standard form login works correctly, but when trying to login through facebook, login is unsuccessful.

    Here is a link to the login form (form is on side of forum):
    http://www.lifeleap.org/communn/index.php

    Username and password; test_user

    Code:
    Here is the facebook login code currently be used on form:
     
    div id="fb-root"></div>
    <div class="facebook-login-connect" style="display:none"><!-- user is logged-in to facebook, connect -->
        <a href="javascript:" onclick="facebook_login_connect()"><img src="/manage/misc/facebook/connect-btn" width="107" height="25" alt="Connect with Facebook"/></a>
     
    <img src='https://graph.facebook.com/100000082142465/picture'
        align='left' style='padding-right:1em;'>
        <strong></strong>, you've successfully logged in to Facebook.
        <span style="color: red">
        Now please login to your account on our site to complete the link.    </span>
        You will only have to do this once. If you don't have an account with us, please <a href="/manage/signup">signup</a></div>
     
    <div class="facebook-login-login" ><!-- user is not logged-in to facebook, login -->
        <a href="javascript:" onclick="facebook_login_login()"><img src="/manage/misc/facebook/login-btn" width="107" height="25" alt="Login using Facebook"/></a>
    </div>
    <!-- $output = "<p style='margin:1em 0;text-align:center;'><fb:login-button size=\"medium\" perms=\"$fbperms\">$button_txt</fb:login-button></p>";-->
     
    <script type="text/javascript">
      window.fbAsyncInit = function() {
        FB.init({
          appId  : '207111002665914',
          status : true, // check login status
          cookie : true, // enable cookies to allow the server to access the session
          xfbml  : true,  // parse XFBML
          channelUrl  : 'http://www.yourdomain.com/channel.html', // Custom Channel URL
          oauth : true //enables OAuth 2.0
        });
        FB.getLoginStatus(function(response){ });
      };
     
     
     
      jQuery(function(){
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementsByTagName("head")[0].appendChild(e);
      });
     
    function facebook_login_login()
    {
    FB.login(function(response) {
      if (response.authResponse) {
          var href = window.location.href;
          if (href.indexOf('?') < 0)
              href += '?fb_login=1';
          else
              href += '&fb_login=1';
          window.location.href=href;
      } else {
          // cancelled
      }
    }, {scope: 'email'}); 
    }
    </script>  
    Thank you for any suggestions.
  2. dale_s

    dale_s aMember Pro Customer

    Joined:
    Apr 12, 2013
    Messages:
    96
    I edited login form to make it more clear when user is logged in or logged out (whether using Facebook login or not). A different version of form appears when user is logged in. This should clear up any confusion when testing form.

    Of course, to test Facebook login, a user will have to first go to our main aMember signup page and create account using Facebook:

    http://www.lifeleap.org/manage/signup/index

    The name of the subscription to sign up to is "Community Member Access"

    Then, user can logout, and then go back to the area of our site which contains the login form and test/troubleshoot Facebook login:

    http://www.lifeleap.org/communn/index.php

    I know many aMember users would benefit from having a login form, which includes a Facebook button, that can be put anywhere on a website. Please let me know if anyone has any suggestions on how to integrate this feature.
  3. xtrememarketer

    xtrememarketer New Member

    Joined:
    Nov 9, 2011
    Messages:
    20
    I'd like to know this as well. What i need is simple...I just want to add the FB Connect button to the Wordpress Widget, like it's currently displayed on the Amember login form.

Share This Page