Tùy chỉnh nút Đăng nhập Facebook * SỬ DỤNG JSSDK không phải FBML *

Question

Tôi đang sử dụng SDK Javascript Facebook để tạo nút đăng nhập bằng cách sử dụng đánh dấu sau.

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

Điều này làm việc tốt. Tuy nhiên, tôi muốn tùy chỉnh điều này một chút bằng cách làm cho nó lớn hơn. Tôi biết điều này có thể sử dụng các giá trị khác nhau (ví dụ: size=) trong đánh dấu XFBML. Tôi đã tìm thấy các lớp css FB chính xác cần được áp dụng bằng cách xem html đã tạo để tôi luôn có thể hack nó bằng một số phép thuật JQuery.

Tôi sẽ chỉ muốn đặt thuộc tính data-* thích hợp và có FB-JSSDK tự mình thực hiện.

Tôi đã cố gắng data-size= mà hoàn toàn không hoạt động

Answer 1

Tôi chỉ cố gắng data-size="large", và nó làm việc. Kiểu fb_button_large được áp dụng cho nó và nó lớn hơn một chút. Mặc dù nó không lớn hơn nhiều, tôi hầu như không nhận thấy. Ngoài ra, nó không phải là tài liệu vì vậy tôi cho rằng nó sẽ được khấu hao cuối cùng? Tuy nhiên,

data-size="xlarge" lớn hơn NOTICEABLY.

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

Vì vậy, tôi không chắc chắn lý do tại sao nó không hoạt động cho bạn. Những gì tôi sẽ làm thay vào đó, sau đó, chỉ là sử dụng CSS nếu bạn muốn tùy chỉnh đầy đủ các nút.

Nút mới chỉ được lồng vào nhau <div class="fb-login-button"><a class="fb_button"><span class="fb_button_text"> Cấu trúc DOM và bạn có thể sử dụng CSS để tạo kiểu cho nó theo cách bạn muốn.

Nếu bạn đang gặp vấn đề ưu tiên xếp tầng với kiểu Facebook đang sử dụng, chỉ cần sử dụng !important ở cuối tuyên bố kiểu của bạn để ghi đè lên Facebook.

Bạn thậm chí có thể thay đổi kích thước của hình ảnh "F", vì đó là một hình ảnh sprite with multiple sizes. Khi bạn ghi đè các kiểu, chỉ cần phát với thuộc tính background-position cho đến khi bạn nhận được đúng.

Chúc may mắn!