title: Trigger fb:login-button with other button Javascript
body: <p>I want to trigger the <code>fb:login-button</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;fb:login-button show-faces="true" width="200" max-rows="1"&gt;&lt;/fb:login-button&gt;
  </code></pre>
  
  <p>with a second button. Why? I can't adjust the css of the Facebook and I want a fancy button with a custom image to replace it. My big problem is that I don't know what's the ID of the FB-button, and I can't give it one.</p>
  
  <p>My wrong code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
      function Ffirst()
      {
      alert("first");
      $("fb:login-button").click(); 
      //$("fb:login-button").trigger("click"); //doesn't work eiter
      }
  &lt;/script&gt;
  
  &lt;input type="submit" onclick="Ffirst()" name="savebutton" id="first" /&gt;
  &lt;fb:login-button show-faces="true" width="200" max-rows="1"&gt;&lt;/fb:login-button&gt;
  </code></pre>
  
  <p><em>FTR:</em>
  This is what happens when I press <code>the fb:login-button</code></p>
  
  <pre class="lang-js prettyprint-override"><code>FB.Event.subscribe('auth.authResponseChange', function(response) {
      // Here we specify what we do with the response anytime this event occurs. 
      if (response.status === 'connected') {
            testAPI();
      }
  
      } else if (response.status === 'not_authorized') {
        FB.login();
  
      } else {
            FB.login();
      }
    });
  
    // Load the SDK asynchronously
    (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
    }(document));
  </code></pre>