Facebook Opengraph customize fb login button

I'm using facebook open graph, new api, and i can do this:

<fb:login-button show-faces="true" max-rows="9" perms="email" autologoutlink="true" onlogin="window.location = 'http://www.example.com/facebook/facebook_test/'"></fb:login-button>

but when i read the doc if i need more options in http://developers.facebook.com/docs/reference/javascript/FB.login says i can:

FB.login(function(response) {
  if (response.session) {
    if (response.perms) {
      // user is logged in and granted some permissions.
      // perms is a comma separated list of granted permissions
    } else {
      // user is logged in, but did not grant any permissions
    }
  } else {
    // user is not logged in
  }
}, {perms:'read_stream,publish_stream,offline_access'});

but if i need another image for fb button, and if i need another things, i can't find how do that, of in what part of html i can call FB.login, is between tags 'script'?

Answers


You need to use Javascript SDK for this. Just wrap that FB.login into some function and call it wherever you want. For example if you want to call it on image click:

<html>
    <head>
    </head>
    <body>
        <div id="fb-root"></div>
        <script>
          //initializing API
          window.fbAsyncInit = function() {
            FB.init({appId: 'your app id', status: true, cookie: true,
                     xfbml: true});
          };
          (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);
          }());
        </script>

        <!-- custom login button -->
        <a href="#" onclick="fblogin();return false;"><img src="images/my_login.png"></a>


        <script>
          //your fb login function
          function fblogin() {
            FB.login(function(response) {
              //...
            }, {scope:'read_stream,publish_stream,offline_access'});
          }
        </script>

    </body>
</html>

Need Your Help

Kubernetes - sharing secret across namespaces

namespaces kubernetes

Is there a way to share secrets across namespaces in Kubernetes?

Dealing with different iOS device resolutions in SpriteKit

ios sprite-kit xcode6

I'm playing around with SpriteKit in Xcode 6, iOS 8 beta 5. Everything is all laid out and working perfectly on the iPhone 4S simulator, however when switching to the 5S, the elements at the bottom...