Facebook login image in server side implementation

Question

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/oauth?
     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.)

Answer 1

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

Answer 2

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.