Изображение входа в Facebook в реализации на стороне сервера

Question

Я подозреваю, что есть простой ответ на этот вопрос, но, поскольку я в тупике, позвольте мне выбросить это там.

Я реализую функцию «Войти через Facebook» для веб-сайта. Facebook позволяет выполнять большую часть работы на сервере или на стороне клиента. Мы выбрали первое.

Итак, ссылка, по которой пользователь нажимает для входа в систему, выглядит следующим образом:

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

Мой простой вопрос: я хочу, чтобы пользователь щелкнул знакомое изображение «Войти через Facebook», чтобы перейти на этот URL. Я не могу использовать <fb:login-button>, так как это инициирует аутентификацию на основе JavaScript и вход в систему. Итак, в основном, я хочу ссылку, которая выглядит следующим образом:

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

Как получить изображение в качестве ссылки в моей реализации на стороне сервера? Или мне в значительной степени приходится обрабатывать вход на клиентской стороне, используя <fb:login-button>, если я хочу, чтобы Facebook автоматически сгенерировал изображение? (Кстати, я использую Ruby on Rails 2.3.5.)

Answer 1

Вы должны либо использовать свое собственное изображение (или другую разметку) для представления кнопки входа в систему, либо использовать один из логотипов Facebook из «Центра разрешений брендов» .

Существует еще один варианттоже ... Если вы включите JS-SDK на странице, вы можете использовать следующую разметку, чтобы получить кнопку, которая выглядит точно так же, как кнопка в Кнопка входа социальный плагин:

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

Обновление: Использование пользовательской разметки вместо fb:login-button наверняка потребует дополнительной работы.

Для перевода текста на кнопку вы можете использовать Интернационализация Facebook , gettext или любая другая технология / техника, с которой вы знакомы ...

Что касается аутентификации, вам обязательно нужно добавить атрибут href, указывающий на OAuth Dialog (для серверана стороне. У вас уже есть этот вопрос) или связать событие щелчка JavaScript, которое вызовет FB.login (для потока на стороне клиента).

Answer 2

Это немного неловко, но лучший из известных мне способов справиться с этим - использовать <fb:login-button> для генерации кнопки, а затем использовать css для размещения пустого элемента div прямо над ним.Затем вы можете прикрепить обработчик onclick к div, который будет перенаправлять на выбранный вами URL.Размер div должен быть примерно равным высоте и ширине кнопки, которую вы заранее не знаете наверняка, но вы можете просто выбрать «достаточно близко» или сделать некоторый javascript для динамического задания размера div послекнопка отображается.В большинстве случаев кнопка входа в систему не перекрывает другие элементы, поэтому никто не заметит, что область, по которой можно нажимать, немного больше, чем сама кнопка.

Редактировать: некоторые примеры кода, вероятно, сделают это более понятным.Сначала версия фиксированного размера, которая, вероятно, будет работать в большинстве случаев:

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

А также версия динамического размера, которая должна работать, но не была протестирована во всех браузерах:

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

вы можете попробовать это

В HTML:

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

В 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

Вы должны поставить вручную кнопку входа в Facebook. Facebook не предлагает кнопку изображения для кнопки входа в систему вручную. Вы можете получить кнопку входа в Facebook с этого сайта.

login_button

Они имеют такую ​​же функциональность, как и вы.

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

И скопируйте их css и изображение.

Answer 5

Я использую простую ссылку href для входа в Facebook, затем я использую некоторые CSS, чтобы поместить понравившуюся кнопку изображения или, возможно, вы можете использовать ссылку для изображения как всегда.

<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 создаст для вас URL, если вы используете Facebook php sdk.