Membuat Tombol Login Facebook dengan CSS Sendiri

Di era digital ini, Login Facebook telah menjadi fitur yang populer bagi pengguna untuk masuk ke berbagai situs web menggunakan akun Facebook mereka. Ini memberikan cara yang mudah dan cepat bagi pengguna untuk mengakses layanan kamu tanpa harus repot membuat akun baru. Meskipun Facebook menyediakan Plugin Konfigurator untuk membuat tombol login tanpa banyak kerumitan, namun mungkin tidak selalu memenuhi kebutuhan kustomisasi dari setiap pemilik situs web. Dalam artikel ini, saya akan menjelajahi bagaimana cara membuat tombol login Facebook kustom yang disesuaikan dengan preferensi kamu.

Daftar Isi

Plugin Configurator Tidak Fleksible
Membuat Custom Button Facebook
Implementasi Lengkap HTML, CSS, Javascript

Plugin Configurator Tidak Fleksible

Meskipun Plugin Konfigurator Facebook menawarkan kemudahan, namun memiliki keterbatasan. Konfigurator ini memungkinkan opsi kustomisasi seperti mengubah teks, ukuran, bentuk layout, dan lebar tombol. Namun, itu kurang fleksibel dalam hal opsi kustomisasi yang lebih canggih. Tombol yang dihasilkan mungkin tidak selalu sesuai dengan estetika atau branding situs web kamu.

Seperti contoh di bawah ini ketika kamu ingin melakukan custom button facebook menggunakan plugin configurator yang telah disediakan facebook tetapi kendala yang dihadapi adalah custom button facebook yang tidak fleksible, kamu hanya bisa mengganti text, size, layout shape dan width saja. Yang mana hasil buttonnya tidak jauh seperti gambar di bawah ini:

Membuat Custom Button Facebook

Solusi agar kamu bisa membuat button facebook sesuai keinginan kamu adalah dengan membuatnya secara custom. Di artikel ini saya akan memberikan tutorial bagaimana cara membuat button login sendiri untuk facebook.

Penggunaan HTML untuk Struktur Dasar

Pertama buatlah button login sesukamu menggunakan HTML. Disini saya akan membuat button yang sederhana saja tanpa ada tambahan icon-icon apapun:

<button type="button" class="standard">
  Login Facebook Disini
</button>

Tambahkan CSS

Agar button tersebut lebih menarik saya akan menambahkan style pada class standard yang sudah saya buat seperti di bawah ini. Kamu dapat menyesuaikan kode CSS ini sesuai dengan preferensi desain kamu. Misalnya, Kamu dapat mengubah warna latar belakang, ukuran teks, atau gaya font untuk mencocokkan dengan tata letak situs web kamu.

button.standard{
  border:none;
  background: black;
  padding:10px 20px;
  border-radius:100px;
  box-shadow: #000 0 10px 20px -10px;
  cursor: pointer;
  color:#FFF;
  font-size:16px;
  font-weight:bold;
}

Tambahkan Event OnClick

Setelah custom button selesai, saya akan memberikan event onclick pada button untuk mentrigger facebook SDK tersebut. Pastikan untuk value config_id dan appID sesuai dengan akun facebook kamu.

<button type="button" class="standard" onclick='FB.login(function(response){ checkLoginState() }, {config_id:"xxxxxxxxxx"});'>
  Login Facebook Disini
</button>

Membuat Function

Dan saya akan membuat function untuk memanggil SDK Facebook agar custom facebook button yang saya buat dapat berfungsi.

function statusChangeCallback(response) { 
  console.log(response);                
  if (response.status === 'connected') {
    getDataFromFacebook(response.authResponse.accessToken);
  } else {
    document.getElementById('status').innerHTML = 'Please log ' +
      'into this webpage.';
  }
}

function checkLoginState() {
    FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
        console.log(response);
    });
}

function getDataFromFacebook(token) {
  FB.api('/me', function(response) {
    console.log('Successful login for: ' + response.name);
    document.getElementById('status').innerHTML =
      'Thanks for logging in, ' + response.name + '!';
  });
}

window.fbAsyncInit = function() {
    FB.init({
    appId      : 'xxxxxxxxxxx',
    cookie     : true,
    xfbml      : true,
    version    : 'v17.0'
    });
    
    FB.AppEvents.logPageView(); 
};

(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Dan berikut penjelasan dari codingan di atas:

Inisialisasi SDK Facebook: Pertama-tama, SDK Facebook diinisialisasi dengan memanggil fungsi FB.init(). Pada saat inisialisasi, parameter yang diberikan termasuk ID aplikasi, pengaturan cookie, pengaturan xfbml, dan versi SDK yang akan digunakan.
Memuat SDK Facebook secara asinkron: Untuk memastikan bahwa SDK Facebook dimuat dengan benar sebelum digunakan, sebuah fungsi anonim dieksekusi secara langsung. Fungsi ini bertanggung jawab untuk membuat elemen <script> dinamis yang memuat SDK Facebook dari URL yang diberikan. Setelah itu, elemen <script> ditambahkan ke dalam dokumen HTML.
Pemanggilan fungsi checkLoginState(): Setelah SDK Facebook dimuat, fungsi checkLoginState() dipanggil. Fungsi ini bertugas memeriksa status login pengguna saat ini dengan menggunakan fungsi FB.getLoginStatus(). Status login tersebut kemudian diteruskan ke fungsi statusChangeCallback().
Pemeriksaan status login: Fungsi statusChangeCallback() dipanggil sebagai respons terhadap perubahan status login pengguna. Jika pengguna terhubung (statusnya ‘connected’), maka akan dilakukan panggilan ke fungsi getDataFromFacebook() untuk mengambil data pengguna dari Facebook. Jika pengguna tidak terhubung, pesan “Please log into this webpage” akan ditampilkan.
Mengambil data pengguna dari Facebook: Fungsi getDataFromFacebook() digunakan untuk mengambil data pengguna dari Facebook menggunakan API /me. Data yang diambil adalah nama pengguna, yang kemudian ditampilkan di dalam elemen dengan ID ‘status’.

Dengan demikian, flow code tersebut memastikan bahwa SDK Facebook dimuat dengan benar, status login pengguna diperiksa, dan data pengguna dapat diambil dari Facebook sesuai kebutuhan. Hal ini memungkinkan integrasi custom button login yang kita buat dengan Facebook menjadi lebih responsif dan efektif dalam aplikasi web yang sedang dibangun.

Implementasi Lengkap HTML, CSS, Javascript

Berikut adalah implementasi lengkap custom facebook login button yang telah kita buat menggunakan HTML, CSS, dan JavaScript:

<style>
button.standard{
  border:none;
  background: black;
  padding:10px 20px;
  border-radius:100px;
  box-shadow: #000 0 10px 20px -10px;
  cursor: pointer;
  color:#FFF;
  font-size:16px;
  font-weight:bold;

}
</style>

<script>
function statusChangeCallback(response) { 
  console.log(response);                
  if (response.status === 'connected') {
    getDataFromFacebook(response.authResponse.accessToken);
  } else {
    document.getElementById('status').innerHTML = 'Please log ' +
      'into this webpage.';
  }
}

function checkLoginState() {
    FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
        console.log(response);
    });
}

function getDataFromFacebook(token) {
  FB.api('/me', function(response) {
    console.log('Successful login for: ' + response.name);
    document.getElementById('status').innerHTML =
      'Thanks for logging in, ' + response.name + '!';
  });
}

window.fbAsyncInit = function() {
    FB.init({
    appId      : '982975905555944',
    cookie     : true,
    xfbml      : true,
    version    : 'v17.0'
    });
    
    FB.AppEvents.logPageView(); 
};

(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

</script>

<button type="button" class="standard" onclick='FB.login(function(response){ checkLoginState() }, {config_id:"1020306482481304"});'>
  Login Facebook Disini
</button>

<div id="status"></div>

Hanya dengan beberapa step, kamu udah bisa membuat custom button login facebook sesuai keinginan kalian. Selamat mencoba, semoga bermanfaat buat teman-teman semua.