Script Pop Up Facebook Responsive Pada Tampilan Mobile

Fanpage Facebook adalah salah satu media yang umum digunakan untuk menjaring audien. Sehingga audien akan selalu mendapatkan informasi terkini dari pemilik fanpage tersebut. Fanpage facebook menjadi sangat penting untuk keperluan komersial ataupun non komersial mengingat facebook ialah salah satu media sosial dengan pengguna paling banyak saat ini. Menurut situs Smarth Insight facebook pada tahun ini (2018) memiliki 1,870 miliar pengguna aktif. Indonesia ialah negara ke empat pengguna facebook terbanyak, dimana peringkat pertama ditempati oleh Amerika Serikat, kemudian India, dan ketiga disusul Brazil. 

melalui atau bersama ini pengguna aktif yang begitu besar facebook ialah salah satu media penjaring audien yang sangat potensial. 

Dibandingkan dengan memiliki akun personal, fanpage facebook memiliki kelebihan terutama menjaring audiens yang tak terbatas. Para pengguna facebook dapat selalu terhubung dengan fanpage kita dengan cara yang sangat mudah, spesial untuk dengan menyukai (like) fanpage kita. melalui atau bersama ini demikian secara otomatis orang tersebut akan mendapatkan setiap informasi/status dari fanpage tersebut pada beranda facebooknya. 

Sebagai seorang pemilik website atau blog anda sebaiknya memiliki fanpage. Namun, memiliki sebuah fanpage saja tidaklah berguna jika tidak memiliki follower yang banyak. Untuk mendapatkan follower (orang yang menyukai fanpage anda) dapat dilakukan dengan beberapa cara yaitu dengan mengundang kawan-kawan facebook anda untuk menyukainya, mempromosikan dengan melalui jasa pengiklanan faceboo (berbayar), atau dengan mempromosikannya melalui website anda sendiri.

melalui atau bersama ini mempromosikan melalui website anda sendiri ialah cara yang cukup bagus menurut aku pribadi. Ini dapat diibaratkan seperti "menyelam sambil minum air". Sambil membangun  website, sekaligus anda mendapatkan like untuk fanpage facebook anda. Tekniknya sangat mudah, yaitu dengan memasang kota fanpage pada website kita. Kotak fanpage ini dapat anda pasang pada sidebar atau tempat lain yang anda rasa strategis, mudah dilihat, dan bahkan dilike oleh pengunjung website anda.

Selain itu, ada cara yang lebih jitu yaitu dengan memasang pop up fanpage facebook. Pop up sendiri ialah bentuk tayangan jendela (window) baru yang akan menampilkan fanpage facebook anda. Pop up pada umumnya akan muncul ketika pengunjung membuka salah satu laman pada website kita. Nah dengan demikian pengunjung akan secara otomatis dihadapkan pada window yang menampilkan fanpage kita. Pengalaman pribadi aku, aku banyak mendapat like dengan memasang pop up ini. Saat artikel ini ditulis fanpage  sudah disukai sebanyak 11.000 orang dan terus bertambah.

Untuk memasang fanpage facebook pada website dengan platform blogger anda dapat memasang script di bawah ini

<!-- facebook like box starts --> <!-- popup box stylings --> <style type="text/css"> #fb-back { display: none; background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999;} #fb-exit { width: 100%; height: 100%; } .fb-box-inner { width:300px; position: relative; display:block; padding: 20px 0px 0px; margin:0 auto; text-align:center; } #fb-close { cursor: pointer; position: absolute; top: 5px; right: 5px; font-size: 18px; font-weight:700; color: #000; z-index: 99999; display:inline-block; line-height: 18px; height:18px;width: 18px; } #fb-close:hover { color:#06c; } #fb-box { min-width: 340px; min-height: 360px; position: absolute; top: 50%; left: 50%; margin: -220px 0 0 -170px; -webkit-box-shadow: 0px 0px 16px #000; -moz-box-shadow: 0px 0px 16px #000; box-shadow: 0px 0px 16px #000; -webkit-border-radius: 8px;-moz-border-radius: 8px; border-radius: 8px; background: #fff; /* pop up box bg color */ border-bottom: 40px solid #f0f0f0; /* pop up bottom border color/size */ } .fb-box-inner h3 { line-height: 1; margin:0 auto; text-transform:none;letter-spacing:none; font-size: 23px!important; /* header size */ color:#06c!important; /* header color */ } .fb-box-inner p { line-height: 1; margin:0 auto 20px;text-transform:none;letter-spacing:none; font-size: 13px!important; /* header size */ color:#333!important; /* text color */ } a.fb-link { position:relative;margin: 0 auto; display: block; text-align:center; color: #333; /* link color */ bottom: -30px; } #fb-box h3,#fb-box p, a.fb-link { max-width:290px; padding:0; } </style> <!-- facebook plugin --> <div id='fb-back'> <div id="fb-exit"> </div> <div id='fb-box'> <div class="fb-box-inner"> <div id="fb-close"> X</div> <!-- edit your popup header text here --> <h3> Suka melalui atau bersama ini Blog Ini?</h3> <!-- edit your supporting text here --> <p> Silahkan Klik Tombol Sukai Halaman</p> <!-- edit your fb name below --> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/.net&width=290&height=275&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false'style='border: 0 none; overflow: hidden; width: 290px; height: 270px;text-align:center;margin:0 auto;'></iframe> <!-- edit your supporting link here --> <a class="fb-link" href="http://www..net/p/contact-us.html">Contact Us</a> </div> </div> </div> <!-- popup plug-in snippet --> <!-- facebook like box ends -->

Script ini ialah script yang aku peroleh dari situs http://blog.irsah.com namun aku sudah edit dibagian tertentu yang menggunakan bahasa Inggris dan aku sesuaikan dengan bahasa Indonesia. Script di atas memiliki kelebihan dibandingkan dengan script lainnya yaitu tampilan yang responsive (otomatsi menyesuaikan) pada tampilan dekstop (PC/Laptop) maupun mobile (smartphone/tablet). Teknik memasangnya sangat mudah yaitu:

• Masuk ke blogger
• Kemudian masuk ke Tata Letak, dan tambahkan widget baru
• Pilih HTML/Javascript, copy kode di atas dan paste (judul dikosongkan saja)
• Terakhir klik Simpan (Anda dapat menaruh widget ini dimana saja)

Jangan lupa mengganti link fanpage dengan link fanpage milik anda caranya adalah dengan 

• Pada script fanpage cari kode "<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/.net&width=290&height=275&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false'style='border: 0 none; overflow: hidden; width: 290px; height: 270px;text-align:center;margin:0 auto;'></iframe>"
• Ganti link yang diwarnai merah dengan link fanpage anda sendiri.
• Ganti juga link kontak pada script yaitu pada "<a class="fb-link" href="http://www..net/p/contact-us.html">Contact Us</a>" dengan link kontak anda (dapat berupa link laman kontak)

Kelebihan dari script ini adalah adanya tombol close, menggunakan cookies artinya fanpage akan muncul pada saat seorang pengunjung baru pertama kali mengunjungi website kita dan script ini responsive pada tampilan dekstop maupun mobile. Namun, terdapat pula belum sempurnanya penerapan pop up fanpage adalah dapat menambah bounce rate website anda karena pengunjung merasa terganggu dengan munculnya fanpage ini secara tiba-tiba.

Berbagi :