Kedua ukuran itu sesungguhnya sudah memadai jika tampilan laman website pada dekstop dan mobile dibuat terpisah. Yang small manis dan enak dilihat, yang large juga masih bagus jika diletakkan di mana saja di laman blog. Biasanya di awal atau di akhir tulisan, atau di keduanya.
Masalahnya timbul, jika karena satu alasan, tampilan mobile ditiadakan dan dibuat sama dengan tampilan desktop. Sebagaimana yang saya lakukan untuk situsweb LKers Radio. Ukuran font masih bisa dibesarkan dengan fleksibilitas tinggi, meski huruf di desktop jadi terlihat besar, namun penampakan di mobile masih bagus, mudah dibaca.
Tidak demikian dengan Facebook Like Button, yang hanya punya dua pilihan. Jika pun menggunakan ukuran yang large, penampakan button di mobile phone akan terlihat masih terlalu kecil. Susah untuk dilihat, dan susah pula untuk diklik, baik di-like atau pun di-share.
Bisa saja laman website dizoom dengan cara menarik layar ke kiri dan ke kanan dalam waktu bersamaan. Namun itu tak praktis, dan tampilan button tetap terlihat terlalu kecil dan bisa membuat orang malas untuk mengklik dan membagikannya.
Pilihan lain tentu membuat button sendiri, dan mengatur besarnya ukuran sesuka hati sesuai keperluan. Namun jika ada cara memperbesar Facebook Like Button tanpa harus repot membuatnya sendiri ya kenapa tidak.
Untuk itu ikuti langkah berikut ini yang merupakan salah satu cara memperbesar Facebook Like Button, dengan tetap menggunakan script dari versi aslinya, dan image dari aslinya juga.
- Login ke Blogger > Theme > Edit HTML.
- Selanjutnya copy paste CSS berikut ini di bagian yang Anda mudah untuk melihatnya jika hendak mengeditnya nanti, misalnya di sekitar CSS body:
.fb_iframe_widget iframe
{
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-moz-transform: scale(2);
transform-origin: bottom left;
-ms-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
} - Save perubahannya. Anda bisa mengganti angka 2 dengan angka lainnya, disesuaikan dengan selera dan keseimbangan dengan layout laman situswebnya.
- Script Facebook Like Button-nya menggunakan versi standar, yaitu:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : "xxxxxxxxxxxxxx",
xfbml : true,
version : "v6.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>
<div class="fb-like" data-action="like" data-layout="button_count" data-share="true" data-size="large" data-width="">
</div> - Lihat hasilnya dengan membuka salah satu Post, dan jika masih kurang puas terhadap ukurannya, ganti lagi angka perbesarannya hingga sesuai keinginan.
Lihat Video
Saran saya angka perbesarannya ada di sekitaran 2-2,5. Dengan perbesaran seperti itu penampilan di mobile phone akan cukup jelas dan mudah menarik perhatian. Selamat mencoba.
Label: Facebook, Tutorial
Bagikan ke: WhatsApp, Email. Print!.
