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 merupakan salah satu media sosial dengan pengguna paling banyak saat ini. Menurut situs Smarth Insight facebook pada tahun ini (2017) memiliki 1,870 miliar pengguna aktif. Indonesia merupakan negara ke empat pengguna facebook terbanyak, dimana peringkat pertama ditempati oleh Amerika Serikat, kemudian India, dan ketiga disusul Brazil. 

Dengan pengguna aktif yang begitu besar facebook merupakan 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, hanya dengan menyukai (like) fanpage kita. Dengan 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 teman-teman facebook anda untuk menyukainya, mempromosikan dengan melalui jasa pengiklanan faceboo (berbayar), atau dengan mempromosikannya melalui website anda sendiri.

Dengan mempromosikan melalui website anda sendiri merupakan cara yang cukup bagus menurut saya pribadi. Ini dapat diibaratkan seperti "menyelam sambil minum air". Sambil membangun  website, sekaligus anda mendapatkan like untuk fanpage facebook anda. Caranya 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 merupakan 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 saya, saya banyak mendapat like dengan memasang pop up ini. Saat artikel ini ditulis fanpage madematika telah 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 Dengan 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/madematika.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.madematika.id/p/contact-us.html">Contact Us</a> </div> </div> </div> <!-- popup plug-in snippet --> <script type='text/javascript'> //<![CDATA[ //grab user's browser info and calculates/saves first visit jQuery.cookie = function (key, value, options) { if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options); if (value === null || value === undefined) { options.expires = -1; } if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days); } value = String(value); return (document.cookie = [encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : ''].join('')); } options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; }; // the pop up actions (function((function() { if (.cookie('popup_fb') != 'yes') { $('#fb-back').delay(400).fadeIn("slow"); // options slow or fast $('#fb-close, #fb-exit').click(function () { $('#fb-back').stop().fadeOut("slow"); // options slow or fast }); } //initiate popup function by setting up the cookie expiring time.cookie('popup_fb') != 'yes') { $('#fb-back').delay(400).fadeIn("slow"); // options slow or fast $('#fb-close, #fb-exit').click(function () { $('#fb-back').stop().fadeOut("slow"); // options slow or fast }); } //initiate popup function by setting up the cookie expiring time.cookie('popup_fb', 'yes', { path: '/', expires: 3 }); }); //]]> </script> <!-- facebook like box ends -->

Script ini merupakan script yang saya peroleh dari situs http://blog.irsah.com namun saya telah edit dibagian tertentu yang menggunakan bahasa Inggris dan saya 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). Cara 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/madematika.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.madematika.id/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 kekurangan penggunaan pop up fanpage adalah dapat menambah bounce rate website anda karena pengunjung merasa terganggu dengan munculnya fanpage ini secara tiba-tiba.

Share :