开发者

Facebook login image in server side implementation

I suspect that there's a simple answer to this, but since I'm stumped, let me throw this out there.

I am implementing a "Login with Facebook" feature for a website. Facebook allows ways to do most of the work either on the server or the client side. We have opted for the former.

So, the link that a user clicks on to initiate the login looks like:

https://www.facebook.com/dialog/oau开发者_如何学Goth?
     client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream

My simple question: I want the user to click the familiar "Login with Facebook" image to get directed to this URL. I cannot use the <fb:login-button> since that initiates the javascript based authentication and login. So, basically, I want a link that looks like:

<a href="https://www.facebook.com/dialog/oauth? client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream"><img Login with Facebook image goes here /></a>

How do I get the image as a link in my server side implementation? Or, do I pretty much have to handle the login on the client side using <fb:login-button> if I want Facebook to automatically generate the image? (By the way, I'm using Ruby on Rails 2.3.5.)


You should either use your own image (or other markup) to represent the login button or use one of the Facebook logos from "Brand Permissions Center".

There is another option too... If you include JS-SDK on page you can use the following markup to get a button that looks exactly like the one in Login Button social plugin:

<a class="fb_button fb_button_small">
  <span class="fb_button_text">Log In</span>
</a>

Update: Using custom markup instead of fb:login-button will require additional work for sure.

For translation of text on button you can use Facebook internationalization, gettext or any other technology/technique you're familiar with...

Regarding the Auth you'll need for sure add href attribute pointing to OAuth Dialog (for server-side flow. You already have this one in question itself) or bind JavaScript click event that will call FB.login (for client-side flow).


You have to put manually facebook login button. Facebook doesn't offer image button for manually login button. You can get facebook login button from this site.:

-login_button

They have same functionality like you.

<a href="https://www.facebook.com/dialog/oauth? client_id=YOUR_APP_ID&
redirect_uri=YOUR_URL&scope=email,read_stream"><img class='facebookLoginBtn'/></a>

And copy their css and image.


you can try this

In Html:

<a href="javascript:void(0)" onclick="facebookLogin()">
     <img Login with Facebook image goes here />
</a>

In Javascript:

function facebookLogin() {
     FB.init({ appId: 'AppId ', xfbml: true, cookie: true, frictionlessRequests: true });
     FB.login(function (response) {
         if (response.authResponse) {
              //Login
         }
         else {
              //Not Login
         }
     }, { scope: 'email' });    
}


It's a little awkward, but the best way I know of to handle this is to use <fb:login-button> to generate the button, and then use css to position an empty div directly on top of it. Then you can attach on onclick handler to the div that will redirect to the url of your choice. The div will need to be sized to approximately the height and width of the button which you don't know for certain in advance, but you can either just go for "close enough", or do some javascript to set the div size dynamically after the button is rendered. In most cases a login button doesn't overlap other elements so no one will notice if the clickable area is a bit bigger than the button itself.

Edit: Some code samples will probably make this clearer. First the fixed size version, which will probably work for most cases:

<div style="position:relative">
<fb:login-button></fb:login-button>
<div style="position:absolute;left:0;top:0;width:70px;height:20px;cursor:pointer" onclick="location.href='https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream'"></div>
</div>

And also a dynamic size version, which should work but hasn't been tested in all browsers:

<span style="position:relative">
<fb:login-button></fb:login-button>
<a href="https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream"><span style="position:absolute;width:100%;height:100%;left:0;top:0;font-size:200px;overflow:hidden">&nbsp;</span></a>
</span>


i use a simple href link to loging with facebook, then i use some css to put the image button i like or maybe you can use a image link as allways.

<div class="signupBtn"><a href="<?php echo $loginUrl; ?>"><span>Enter</span></a></div>

<a href="<?php echo $loginUrl; ?>"> <img src="your image here"> </a>

The $loginUrl it will buil the url for you if you use the facebook php sdk.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜