title: Custom facebook connect button
body: <p>How would I replace the generated facebook login button with my own custom one?</p>
  
  <p>I am guessing it can either be done by creating a function of the code that fires up the dialog or driving the button off the screen with some css tricks. I'd prefer the first solution. </p>
  
  <p>How could I make my own button do what theirs does and get rid of the the default button?</p>
  
  <p>Here's the example code from the facebook developers site:  </p>
  
  <p>
  
  <pre><code>require 'fb/facebook.php';
  
  $facebook = new Facebook(array(
    'appId'  =&gt; 'X',
    'secret' =&gt; 'X',
  ));
  
  // See if there is a user from a cookie
  $user = $facebook-&gt;getUser();
  
  if ($user) {
    try {
      // Proceed knowing you have a logged in user who's authenticated.
      $user_profile = $facebook-&gt;api('/me');
    } catch (FacebookApiException $e) {
      echo '&lt;pre&gt;'.htmlspecialchars(print_r($e, true)).'&lt;/pre&gt;';
      $user = null;
    }
  }
  
  ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html xmlns:fb="http://www.facebook.com/2008/fbml"&gt;
    &lt;body&gt;
      &lt;?php if ($user) { ?&gt;
        Your user profile is
        &lt;pre&gt;
          &lt;?php print htmlspecialchars(print_r($user_profile, true)) ?&gt;
        &lt;/pre&gt;
      &lt;?php } else { ?&gt;
        &lt;fb:login-button&gt;&lt;/fb:login-button&gt;
      &lt;?php } ?&gt;
      &lt;div id="fb-root"&gt;&lt;/div&gt;
      &lt;script&gt;
        window.fbAsyncInit = function() {
          FB.init({
            appId: '&lt;?php echo $facebook-&gt;getAppID() ?&gt;',
            cookie: true,
            xfbml: true,
            oauth: true
          });
          FB.Event.subscribe('auth.login', function(response) {
            window.location.reload();
          });
          FB.Event.subscribe('auth.logout', function(response) {
            window.location.reload();
          });
        };
  
        (function() {
          var e = document.createElement('script'); e.async = true;
          e.src = document.location.protocol +
            '//connect.facebook.net/en_US/all.js';
          document.getElementById('fb-root').appendChild(e);
        }());
  
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>