changing facebook login button type

Currently I have the following button, when using facebook javascript:

and I want to get this one:

What should I change?

Currently the way I did this is using the following code:

<div id="fb-root"></div>
      <script src="http://connect.facebook.net/en_US/all.js"></script>
      <script>
         FB.init开发者_运维问答({ 
            appId:'YOUR_APP_ID', cookie:true, 
            status:true, xfbml:true 
         });
      </script>
      <fb:login-button>Login with Facebook</fb:login-button>

---

With Facebook PHP-sdk you can replace it with any button or icon

<?php if ($me) { ?>
  <a href="<?php echo $logoutUrl; ?>"><img src="logout-image.png"></a>
<?php } else { ?>
  <a href="<?php echo $loginUrl; ?>"><img src="login-image.png"></a>
<?php } ?>

Or http://fbrell.com/xfbml/fb:login-button

---

For that particular button, you will have to include the image yourself and bind the functionality with one of the SDKs available: http://developers.facebook.com/docs/sdks/

I personally prefer using the JS SDK to open the login prompt.

You can use regular login button, which is the approach that @MNVR has described in his answer.

---

Just replace the text "Login With Facebook" with "Connect With Facebook" in your login button code. Or use the below code.

<div id="fb-root">
        </div>
        <script src="http://connect.facebook.net/en_US/all.js">
        </script>
        <fb:login-button>Connect with Facebook</fb:login-button>
        <script>
          FB.init({
            appId: '123456',
            cookie: true,
            status: true,
            xfbml: true
          });

        </script>