Pertanyaan Menyesuaikan tombol Login Facebook * MENGGUNAKAN JSSDK bukan FBML *


Saya menggunakan Facebook Javascript SDK untuk membuat tombol login menggunakan markup berikut.

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

Ini berfungsi dengan baik. Namun, saya ingin menyesuaikan ini sedikit dengan membuatnya lebih besar. Saya tahu ini mungkin menggunakan nilai yang berbeda (size= misalnya) di markup XFBML. Saya telah menemukan kelas FB css yang benar yang perlu diterapkan dengan melihat html yang dihasilkan sehingga saya selalu dapat meretasnya dengan beberapa sihir JQuery.

Saya lebih suka hanya mengatur yang sesuai data-* atribut dan memiliki FB-JSSDK melakukannya sendiri.

Saya sudah mencoba data-size= yang sama sekali tidak berfungsi


6
2017-11-22 15:20


asal


Jawaban:


Saya baru saja mencoba data-size="large", dan itu berhasil. Gaya fb_button_large diaplikasikan untuk itu, dan itu sedikit lebih besar. Itu tidak jauh lebih besar, saya hampir tidak memperhatikan. Juga, itu tidak didokumentasikan jadi saya berasumsi itu akan terdepresiasi pada akhirnya?

data-size="xlarge" PENTING lebih besar, namun.

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

Jadi, saya tidak yakin mengapa itu tidak berhasil untuk Anda. Apa yang akan saya lakukan sebagai gantinya, kemudian, hanya menggunakan CSS jika Anda ingin sepenuhnya menyesuaikan tombol.

Tombol baru hanya bersarang <div class="fb-login-button"><a class="fb_button"><span class="fb_button_text"> Konstruksi DOM, dan Anda dapat menggunakan CSS untuk mengatur gaya yang Anda inginkan.

Jika Anda memiliki masalah preseden berjenjang dengan gaya Facebook mengambil alih, cukup gunakan !important di akhir deklarasi gaya Anda untuk mengganti yang Facebook.

Anda bahkan dapat mengubah ukuran gambar "F", karena itu a sprite dengan banyak ukuran. Saat Anda menimpa gaya, mainkan saja dengan background-position properti sampai Anda mendapatkan yang benar.

Semoga berhasil!


5
2017-11-27 19:34