title: Changing a facebook login button to a custom button
body: <p>I have search for this answer and have received different ideas, however none of them seem to work. It is likely that I am not attaching the onclick function to the correct element, so I just want to see where I am going wrong.</p>
  
  <p>I will use this modal window as an example of what my code looks like:</p>
  
  <pre><code>&lt;div id="modal" class="popupContainer" style="display:none;"&gt;
      &lt;header class="popupHeader"&gt;
          &lt;span class="header_title"&gt;Login&lt;/span&gt;
          &lt;span class="modal_close"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/header&gt;
  
      &lt;section class="popupBody"&gt;
          &lt;! -- Here Goes all the Login and signup Forms --&gt;
          &lt;!-- Social Login --&gt;
          &lt;div class="social_login"&gt;
              &lt;div class=""&gt;
                  &lt;a href="#" class="social_box fb"&gt;
                      &lt;span class="icon"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;    &lt;/span&gt;
                      &lt;span class="icon_title"&gt;Connect with Facebook&lt;/span&gt;
  
                  &lt;/a&gt;
  
                  &lt;a href="#" class="social_box google"&gt;
                      &lt;span class="icon"&gt;&lt;i class="fa fa-google-plus"&gt;&lt;/i&gt;    &lt;/span&gt;
                      &lt;span class="icon_title"&gt;Connect with Google&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="centeredText"&gt;
                  &lt;span&gt;Or use your Email address&lt;/span&gt;
              &lt;/div&gt;
  
              &lt;div class="action_btns"&gt;
                  &lt;div class="one_half"&gt;&lt;a href="#" id="login_form" class="btn"&gt;Login&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="one_half last"&gt;&lt;a href="#" id="register_form" class="btn"&gt;Sign up&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Username &amp; Password Login form --&gt;
          &lt;div class="user_login"&gt;
              &lt;form&gt;
                  &lt;label&gt;Email / Username&lt;/label&gt;
                  &lt;input type="text" /&gt;
                  &lt;br /&gt;
  
                  &lt;label&gt;Password&lt;/label&gt;
                  &lt;input type="password" /&gt;
                  &lt;br /&gt;
  
                  &lt;div class="checkbox"&gt;
                      &lt;input id="remember" type="checkbox" /&gt;
                      &lt;label for="remember"&gt;Remember me on this computer&lt;/label&gt;
                  &lt;/div&gt;
  
                  &lt;div class="action_btns"&gt;
                      &lt;div class="one_half"&gt;&lt;a href="#" class="btn back_btn"&gt;&lt;i class="fa fa-angle-double-left"&gt;&lt;/i&gt; Back&lt;/a&gt;&lt;/div&gt;
                      &lt;div class="one_half last"&gt;&lt;a href="#" class="btn btn_red"&gt;Login&lt;/a&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  
              &lt;a href="#" class="forgot_password"&gt;Forgot password?&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;!-- Register Form --&gt;
          &lt;div class="user_register"&gt;
              &lt;form&gt;
                  &lt;label&gt;Full Name&lt;/label&gt;
                  &lt;input type="text" /&gt;
                  &lt;br /&gt;
  
                  &lt;label&gt;Email Address&lt;/label&gt;
                  &lt;input type="email" /&gt;
                  &lt;br /&gt;
  
                  &lt;label&gt;Password&lt;/label&gt;
                  &lt;input type="password" /&gt;
                  &lt;br /&gt;
  
                  &lt;div class="checkbox"&gt;
                      &lt;input id="send_updates" type="checkbox" /&gt;
                      &lt;label for="send_updates"&gt;Send me occasional email updates&lt;/label&gt;
                  &lt;/div&gt;
  
                  &lt;div class="action_btns"&gt;
                      &lt;div class="one_half"&gt;&lt;a href="#" class="btn back_btn"&gt;&lt;i class="fa fa-angle-double-left"&gt;&lt;/i&gt; Back&lt;/a&gt;&lt;/div&gt;
                      &lt;div class="one_half last"&gt;&lt;a href="#" class="btn btn_red"&gt;Register&lt;/a&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  (function($) {
      $(".fa fa-facebook").on("click", function() {
          FB.login(function(response) {
              if (response.authResponse) {
                  _wdfb_notifyAndRedirect();
              }
          });
      });
  })(jQuery);
  &lt;/script&gt;
  </code></pre>
  
  <p>I am also not against using the facebook code, however for some reason their codes do not seem to work on my page either. </p>
  
  <p>The script codes to run the modal window works fine however if I add any other script to the page, they don't seem to work.</p>
  
  <p>Any ideas?</p>