Server side Facebook login image

Question

I suspect there is a simple answer to this question, but since I'm at a standstill, let me throw it there.

I use the "Login with Facebook" function for the website. Facebook allows you to use most of the work on the server or on the client side. We chose the first one.

So, the link that the user clicks to initiate the entry is as follows:

https://www.facebook.com/dialog/oauth? client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream 

My simple question is: I want the user to click on the familiar Facebook Login image to go to this URL. I can’t use <fb:login-button> , since it initiates authentication and javascript based login. So basically, I want a link that looks like this:

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

Answer 1

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

There is another option ... If you enabled the JS-SDK on the page, you can use the following markup to get a button that looks exactly the same as the Social Login plugin in the Login button :

 <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.

To translate text to a button, you can use the internationalization of Facebook , gettext, or any other technology / technique that you are familiar with ...

Regarding Auth, you definitely need to add the href attribute pointing to the OAuth Dialog (for the server-side stream. This is the question itself) or bind the JavaScript click event that is called by FB.login (for the client-side stream).

Answer 2

You must manually enter the facebook login button. Facebook does not offer an image button for a manual login button. You can get the facebook login button from this site .:

- login_button

They have the same features as 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.

Answer 3

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' }); } 

Answer 4

A bit inconvenient, but the best way I know is to use <fb:login-button> to generate the button, and then use css to place the empty div directly on top of it. Then you can bind the onclick handler to the div, which will be redirected to the URL of your choice. The size of the div should be determined approximately to the height and width of the button, which you do not know in advance, but you can either just go "close enough" or do some javascript to dynamically set the size of the div after the button is displayed. In most cases, the login button does not overlap other elements, so no one will notice if the click area is a bit larger than the button itself.

Edit: some code examples are likely to make this clearer. The first is a fixed-size version, which is likely to work in 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 version of the dynamic size that should work, but has not 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> 

Answer 5

I use a simple href link to login with facebook, then I use some css to put the image button to me, or maybe you can use the image link as always.

 <div class="signupBtn"><a href="<?php echo $loginUrl; ?>"><span>Enter</span></a></div> <a href="<?php echo $loginUrl; ?>"> <img src="your image here"> </a> 

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