Memasang Messenger Fanpage Facebook di Blog

Sahabat memiliki website toko online atau media online yang ingin banyak berinteraksi dengan pengunjung? Jika ya, maka sudah saatnya sahabat memasang kirim pesan ke fanpage facebook di website tersebut. Pemasangan ini tentu akan memberikan banyak nilai positif selain kepada website anda juga fanpage facebook anda semakin familiar bagi pengunjung.

Apa Bedanya dengan Live Chat dan Messenger Fanpage Facebook?

Sebelum sahabat memasang messenger fanpage facebook ini, sahabat perlu memahami dulu bentuk dan bagaimana interaksinya agar tidak salah persepsi. Jika live chat, maka pengunjung dan pemilik blog akan bisa saling balas di website tersebut, namun untuk messenger fanpage facebook ini tidak bisa. Proses saling balasnya terjadi di fanpage facebook. Ini tentu akan menguntungkan fanpage facebook sahabat yang pada akhirnya kebanjiran juga view-nya yang tentunya akan menjadi lebih familiar di mata pengunjung sahabat.

Biar tidak penasaran, silahkan lihat saja demo daripada pemasanan Fanpage Facebook di Blog berikut
DEMO

OK, tidak perlu berlama-lama berikut akan diterangkan bagaimana cara memasang messenger fanpage facebook di blog sahabat. Tutorial ini adalah milik kang Adhy Suryadi, pemilik kompiajaib.COM.

Cara Memasang Messenger Fanpage Facebook di Blog

Untuk memasang kirim pesan seperti messenger fanpage di blog, silahkan ikut langkah demi langkah berikut ini dengan baik:

#Langkah Pertama

Silahkan pasang kode CSS berikut pada kode html blog sahabat, tepatnya di atas kode

<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: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 10px 50px 0px 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>

#Langkah Kedua

Silahkan pasang kode java script di bawah ini tepat di atas kode
pada html blog sahabat.

 <div class="chat_box" id="chat">
  <div class="chatheader" onclick='showhidechat()'>Messenger Ngonline06
  </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>Hai! Kamu bisa kirim pesan ke Admin di sini, jangan lupa LIKE Ngonline06 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%3Dwww.blog.pustakamadrasah.web.id%26origin%3Dhttps%253A%252F%252Fwww.blog.pustakamadrasah.web.id%252Ff8f907cf72f9a4%26relation%3Dparent.parent&amp;container_width=0&amp;height=310&amp;hide_cover=true&amp;href=https%3A%2F%2Fwww.facebook.com%2Fpustakamadrasah%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>

Silahkan sesuaikan kode di atas dengan alamat blog dan fanpage sahabat sendiri. Yups sekarang website sahabat sudah terpasang messenger fanpage facebook dengan OK punya. Dan, pengunjung blog sahabat sudah bisa berinteraksi dengan baik di fanpage facebook melalui website sahabat dengan baik. Maka bersiap-siaplah dengan interaksi yang padat merayap... #salamSUKSESdariNGONLINE06