Cara Mudah Memasang Widget Feedback Di Blog Menggunakan Fanspage Facebook

Facebook Fanspage adalah sebuah halaman khusus layaknya blog yang menyediakan informasi yang beragam sesuai dengan keinginan pemiliknya, mulai dari perusahaan, pendidikan, layanan, produk fisik, artis, komunitas dan masih banyak lainnya.

Beberapa orang ahli pun pasti memiliki pengertian fanpage facebook sendiri sesuai dengan apa yang mereka pelajari.

Secara garis besar, facebook fanpage di manfaatkan bagi kalangan tertentu, misalnya pemilik toko online untuk memberikan informasi atau event kepada penggemarnya atau pelangganya melalui facebook.

Dengan demikian penyebaran informasi akan lebih cepat di terima oleh banyak orang.




Manfaat FanPage Facebook itu adalah untuk mengumpulkan prospek (fans) sebanyak-banyak nya dan kemudian kirimi pesan-pesan marketing untuk menghasilkan penjualan.

Dengan semakin banyaknya jumlah Fans / penggemar halaman / page facebook anda, maka akan semakin besar pula peluang anda mendapatkan uang.

Keuntungan membuat Facebook Fanspage itu sebenarnya memang banyak, nah kita bisa lihat beberapa keuntungan memiliki facebook fanspage dibawah ini :

• Gratis. Ya, facebook fanpage dapat dimiliki tanpa biaya alias gratis.
• Tidak ada batasan jumlah penggemar/fans untuk sebuah facebook fanpage. Ini berbeda dengan jumlah teman sebuah akun facebook yang dibatasi pada jumlah 5.000 teman.
• Ini memberi media baru dalam berkomunikasi dengan pembaca secara spesifik karena seperti halnya sebuah akun personal, pemilik facebook fanpage dapat membuat update status yang akan muncul dalam news feed seluruh fans.
• Tampil baik di mesin pencari. Facebook merupakan sebuah website nomor 2 terpopuler di dunia menurut alexa.
• Pemilik facebook fanpage dapat membuat media pengenalan merk atas suatu produk.
• Pemilik facebook fanpage dapat mempromosikannya menggunakan fasilitas facebook lainnya seperti sponsored page untuk mendapat publisitas lebih besar.
• Pemilik facebook fanpage dapat membuat komunitas untuk tujuan atau maksud tertentu.
• Facebook fanpage merupakan salah satu media promosi untuk sebuah website.
• Berbagai foto atau video dapat diunggah ke facebook fanpage tanpa batas. Ini sangat baik untuk menunjang pencapaian tujuan melalui sebuah facebook fanpage.

Nah karena kali ini saya akan membagikan tutorial Memasang Widget FeedBack di Blog Menggunakan Fasilitas dari Fanspage Facebook, maka dari itu kita langsung saja kedalam topik pembahasannya.

Kenapa saya bilang Widget FeedBack karena pengunjung dan admin tidak bisa berinteraksi secara langsung dengan widget ini.

Pengunjung blog hanya bisa mengirimkan pesan melalui widget tersebut yang kemudian pesan akan terbaca dan interaksi akan terjadi di fanspage messenger atau melalui aplikasi messenger.

Kamu bisa lihat demonya secara langsung dengan mengklik tombol dibawah ini.

D E M O

Jika berminat untuk memasang widget feedback di blog menggunakan fanspage facebook ini, silahkan kamu ikuti langkah-langkahnya dibawah ini.

Langkah pertama, silahkan kamu salin kode CSS dibawah ini dan tempel di atas kode </head>

<style type="text/css">
.chat_box{background:#fff;width:270px;height:435px;position:fixed;bottom:-400px;right:60px;transition:all .3s;border:none;border-radius:5px 5px 0 0;-webkit-box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);overflow:hidden;z-index:1000000}
.pesan_chat{text-align:center;text-decoration:none;display:block;height:100%;padding:5px 5px 15px}
.chatheader{margin:0 auto;padding:0 10px;height:35px;line-height:35px;font-size:16px;font-weight:700;color:#fff;text-align:left;display:block;cursor:pointer;background:#3a5897}
.pesan_chat p{color:#616161;font-size:14px;margin:10px}
.close-chatfb{position:absolute;top:0;right:0;font-family:Arial;font-size:24px;font-weight:700;cursor:pointer;width:24px;color:#fff;height:35px;line-height:35px;text-align:center;opacity:.7}
.maxi-chatfb,.mini-chatfb{position:absolute;top:0;right:20px;font-family:Arial;font-weight:700;cursor:pointer;width:18px;color:#fff;text-align:center;opacity:.7}
.maxi-chatfb{font-size:24px;height:30px;line-height:30px}
.mini-chatfb{font-size:20px;height:25px;line-height:25px;display:none}
.close-chatfb:hover,.maxi-chatfb:hover,.mini-chatfb:hover{opacity:1}
</style>

Setelah kamu tempel kode CSS diatas, langkah selanjutnya adalah simpan kode javascript dibawah ini tepat di atas kode </body>

<div class="chat_box" id="chat">
  <div class="chatheader" onclick='showhidechat()'>Kirim Feedback
  </div>
    <div class='close-chatfb' onclick='hidechatfb()'>&#215;</div>
    <div class='maxi-chatfb' id='maxi-chatfb' onclick='showhidechat()'>&amp;square;</div>
    <div class='mini-chatfb' id='mini-chatfb' onclick='showhidechat()'>&#95;</div>
  <div class="pesan_chat">
    <p>Kirim Feedback kepada Admin, jangan lupa LIKE Kang Wira ya... Terima kasih.</p>
    <script type='text/javascript'>
//<![CDATA[
document.write('<iframe name="f11b13dc65e614" width="250px" height="310px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" data-src="https://www.facebook.com/v2.5/plugins/page.php?adapt_container_width=true&amp;app_id=&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2Fbz-D0tzmBsw.js%3Fversion%3D42%23cb%3Df100e25f3ae8bb8%26domain%3Dkangwira.com%26origin%3Dhttps%253A%252F%252Fkangwira.com%252Ff8f907cf72f9a4%26relation%3Dparent.parent&amp;container_width=0&amp;height=310&amp;hide_cover=true&amp;href=https%3A%2F%2Fwww.facebook.com%2Fblogkangwira%2F&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=false&amp;show_posts=true&amp;small_header=true&amp;tabs=messages&amp;width=250" style="border: none; visibility: visible; width: 250px; height: 310px;" class=""></iframe>');
//]]>
</script>
  </div>
</div>

<script>
//<![CDATA[
function showhidechat() {
  var o = document.getElementById("chat");
  "0px" !== o.style.bottom ? o.style.bottom = "0px" : o.style.bottom = "-400px";
  var o = document.getElementById("maxi-chatfb");
  "none" !== o.style.display ? o.style.display = "none" : o.style.display = "block";
  var o = document.getElementById("mini-chatfb");
  "block" !== o.style.display ? o.style.display = "block" : o.style.display = "none";
};
function hidechatfb() {
  var e = document.getElementById("chat").style.display = "none";
};
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
//]]>
</script>

Ganti kode yang ditandai berwarna merah diatas seperti kangwira.com dengan domain blog kamu (ada 2 yang saya seleksi) dan blogkangwira dengan username fanspage Facebook yang kamu kelola.

Pada widget Feedback ini sudah dilengkapi dengan script defer iframe, supaya loading iframe tidak mengganggu loading blog kamu.

Sekian dulu Tutorial kali ini tentang cara mudah memasang widget feedback di blog menggunakan fanspage facebook.

Baca juga artikel sebelumnya tentang Cara Mudah Pasang Facebook Chat Kedalam Blog

Sumber Script yang saya terapkan, hasil karya kang adhi dari kompiajaib