Membuat Kirim Pesan Messenger Fanspage Facebook Di Blog

Setelah kemarin kita memasang chat box messenger di blog dengan popup window baik untuk profil maupun fanspage facebook, sekarang kita akan menciptakan kotak kirim pesan pengunjung blog ke admin blog melalui messenger fanspage Facebook.

Tutorial ini di-request sama sahabat Kompi Cara Terbaru untuk menciptakan live chat menyerupai pada web p-store.net. Namun berdasarkan aku ini tidak menyerupai live chat, melainkan menyerupai mirip kotak feedback alasannya yakni pengunjung dan admin tidak dapat eksklusif berinteraksi pada kotak tersebut. Pengunjung mengirimkan pesan melalui kotak messenger tersebut yang kemudian pesan akan terbaca dan interaksi akan terjadi di fanspage messenger atau melalui aplikasi messenger atau di messenger.com.

DEMO

Jika Anda pun ingin mencobanya, silahkan ikuti langkahnya di bawah ini.

Silahkan simpan instruksi CSS di bawah ini di atas instruksi </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: 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>

Kemudian simpan instruksi di bawah ini di atas instruksi </body>

 <div class="chat_box" id="chat">
   <div class="chatheader" onclick='showhidechat()'>Messenger Kompi Ajaib
   </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 dapat kirim pesan ke Admin di sini, jangan lupa LIKE Kompi Ajaib 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="Membuat Kirim Pesan Messenger Fanspage Facebook Di Blog" 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%3Dkompiajaib.com%26origin%3Dhttps%253A%252F%252Fkompiajaib.com%252Ff8f907cf72f9a4%26relation%3Dparent.parent&amp;container_width=0&amp;height=310&amp;hide_cover=true&amp;href=https%3A%2F%2Fwww.facebook.com%2Fkompiajaib%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 instruksi yang ditandai kompiajaib.com dengan domain blog Anda (ada 2 buah) dan kompiajaib dengan username fanspage Facebook blog Anda.

Pada widget ini sudah dilengkapi dengan script defer iframe semoga loading iframe tidak mengganggu loading blog.


Sumber https://www.kompiajaib.com/

Share this post