Memasang Messenger Fanpage Facebook Di Blog

Sahabat mempunyai 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 menawarkan banyak nilai kasatmata 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 semoga tidak salah persepsi. Jika live chat, maka pengunjung dan pemilik blog akan dapat 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 jadinya 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 ialah milik kang Adhy Suryadi, pemilik kompiajaib.COM.

Cara Memasang Messenger Fanpage Facebook di Blog

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

#Langkah Pertama

Silahkan pasang instruksi CSS berikut pada instruksi 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 instruksi java script di bawah ini sempurna di atas instruksi
pada html blog sahabat.

<div class="chat_box" id="chat">
<div class="chatheader" onclick='showhidechat()'>Messenger
</div>
    <div class='close-chatfb' onclick='hidechatfb()'>×</div>
    <div class='maxi-chatfb' id='maxi-chatfb' onclick='showhidechat()'>&square;</div>
    <div class='mini-chatfb' id='mini-chatfb' onclick='showhidechat()'>_</div>
<div class="pesan_chat">
    <p>Hai! Kamu dapat kirim pesan ke Admin di sini, jangan lupa LIKE 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="Memasang Messenger Fanpage Facebook di Blog" data-src="https://www.facebook.com/v2.5/plugins/page.php?adapt_container_width=true&app_id=&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&container_width=0&height=310&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2Fpustakamadrasah%2F&locale=en_US&sdk=joey&show_facepile=false&show_posts=true&small_header=true&tabs=messages&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 instruksi di atas dengan alamat blog dan fanpage sahabat sendiri. Yups kini website sahabat sudah terpasang messenger fanpage facebook dengan OK punya. Dan, pengunjung blog sahabat sudah dapat berinteraksi dengan baik di fanpage facebook melalui website sahabat dengan baik. Maka bersiap-siaplah dengan interaksi yang padat merayap... #salamSUKSESdariNGONLINE06
Sumber https://www.blog.pustakamadrasah.web.id/

Stories From Heart

Minggu, 12 November 2017