Настройка кнопки входа в Facebook * ИСПОЛЬЗУЯ JSSDK, а не FBML * - PullRequest
Новая
       21

Настройка кнопки входа в Facebook * ИСПОЛЬЗУЯ JSSDK, а не FBML *

6 голосов
/ 22 ноября 2011

Я использую Facebook Javascript SDK для создания кнопки входа в систему с использованием следующей разметки. 

<div class="fb-login-button" data-show-faces="false" data-width="300px" 
     data-max-rows="1">Login with Facebook</div>

Это работает нормально.Тем не менее, я хочу немного изменить это, сделав его больше.Я знаю, что это было возможно при использовании других значений (например, size=) в разметке XFBML.Я нашел правильные классы FB CSS, которые нужно применить, посмотрев на сгенерированный HTML, чтобы я всегда мог взломать его с помощью некоторой магии JQuery.пусть FB-JSSDK сделает это самостоятельно.

Я уже пробовал data-size=, который полностью не работает

1 Ответ

5 голосов
/ 27 ноября 2011

Я только что попробовал data-size="large", и это сработало.Стиль fb_button_large был применен к нему, и он был немного больше.Это было не намного больше, хотя, я едва заметил.Кроме того, это не задокументировано, поэтому я предполагаю, что в конечном итоге это будет амортизироваться?

data-size="xlarge" было заметно больше, однако. 

<div class="fb-login-button" data-show-faces="false"
 data-max-rows="1" data-size="xlarge">Login with Facebook</div>

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

Новая кнопка является просто вложенной <div class="fb-login-button"><a class="fb_button"><span class="fb_button_text"> конструкцией DOM, и вы можете использовать CSS для стилизации ее по своему усмотрению.

Если у вас возникла проблема каскадного приоритета со сменой стилей Facebook, просто используйте !important в конце декларации стиля, чтобы переопределить стили Facebook.

Вы даже можете изменитьразмер изображения "F", так как это спрайт с несколькими размерами .Когда вы переопределяете стили, просто играйте со свойством background-position, пока не получите правильный.

Удачи!

...