Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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'?

like image 310
diegueus9 Avatar asked Sep 13 '10 15:09

diegueus9


1 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>
like image 185
serg Avatar answered Oct 11 '22 19:10

serg