Pada kesempatan kali ini kita akan berguru cara memasang facebook messenger di blog, ibarat yang sudah kita ketahui pengguna facebook dikala ini sudah mencapai milyaran orang diseluruh dunia, hal ini menegaskan dominasi Facebook di pasaran media sosial.
Facebook mempunyai berbagai fitur unggulan yang dapat di nikmati oleh setiap penggunanya, dari sekian banyak fitur yang dimiliki facebook, messenger yaitu fitur yang paling terkenal. kalau sebelumnya fitur ini hanya terintegrasi di website utama Facebook, maka secara pelahan namun niscaya messenger berevolusi menjadi aplikasi independen yang berhasil mendapat banyak loyalis.
Fitur messenger ini sesungguhnya mempunyai prinsip yang sama dengan whatsapp, line dan aplikasi chatting sejenisnya, Namun kalau kau yaitu seorang pebisnis yang memakai facebook dan mempunyai fanspage, maka messenger yaitu aplikasi chatting yang terbaik.
Kembali ketopik utama, untuk memudahkan komunikasi antara pengunjung dan pemilik blog, alangkah baiknya kalau kau mau memasang facebook messenger di blog, adapun caranya sebagai berikut.
Cara Memasang Facebook Messenger di Blog
Facebook messenger ini dapat dipakai untuk pengguna blogger ataupun wordpress, adapun posisinya dapat kau tentukan sendiri, namun posisi yang paling cantik untuk menempaykan facebook messenger yaitu dibagian sidebar blog.
Langkah pertama yang harus kau persiapkan adalah kode HTML untuk menempatkan Facebook chat box di setiap halaman blog Anda. Silahkan pasang script dibawah ini dibagian sidebar atau di manapun Anda ingin Facebook Messenger tampil.
<div class="fb-livechat">
<div class="sberpikir fb-overlay"></div>
<div class="fb-widget">
<div class="sberpikir fb-close"></div>
<div class="fb-page" data-href="https://www.facebook.com/lapaklama/" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false">
<blockquote cite="https://www.facebook.com/lapaklama/" class="fb-xfbml-parse-ignore"></blockquote> </div>
<div id="fb-root"></div></div><a href="https://m.me/lapaklama" title="Chat Kami di Facebook" class="sberpikir fb-button"></a>
</div>
<script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>$(document).ready(function(){var t={delay: 125, overlay: $(".fb-overlay"), widget: $(".fb-widget"), button: $(".fb-button")}; setTimeout(function(){$("div.fb-livechat").fadeIn()}, 8*t.delay), $(".sberpikir").on("click", function(e){e.preventDefault(), t.overlay.is(":visible")?(t.overlay.fadeOut(t.delay), t.widget.stop().animate({bottom: 0, opacity: 0}, 2*t.delay, function(){$(this).hide("slow"), t.button.show()})):t.button.fadeOut("medium", function(){t.widget.stop().show().animate({bottom: "30px", opacity: 1}, 2*t.delay), t.overlay.fadeIn(t.delay)})})});</script>
Catatan: Jangan lupa ganti lapaklamadengan username fanspage facebook teman-teman. biasanya username Facebook Fan Page Anda berada di belakangURL facebook, seperti: www.facebook.com/username.
Sampai tahap ini sesungguhnya kau sudah simpulan Memasang Facebook Messenger di Blog, untuk menciptakan widget tersebut tidak tampil dan menjelma tombol messenger, kau harus memasang arahan CSS dibawah ini pada widget mana saja yang kau inginkan.
Berikut ini yaitu arahan CSS yang dapat Anda ubah dengan gampang untuk diadaptasi dengan tampilan blog Anda:
<style>.fb-livechat,
.fb-widget {
display: none
}
.sberpikir.fb-button,
.sberpikir.fb-close {
position: fixed;
right: 24px;
cursor: pointer
}
.sberpikir.fb-button {
z-index: 1;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;
width: 40px;
height: 40px;
text-align: center;
top: 270px;
border: 0;
outline: 0;
border-radius: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16);
-webkit-transition: box-shadow .2s ease;
background-size: 80%;
transition: all .2s ease-in-out
}
.sberpikir.fb-button:focus,
.sberpikir.fb-button:hover {
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, .09), 0 4px 40px rgba(0, 0, 0, .24)
}
.fb-widget {
background: #fff;
z-index: 999;
position: fixed;
width: 360px;
height: 435px;
overflow: hidden;
opacity: 0;
bottom: 0;
right: 24px;
border-radius: 6px;
-o-border-radius: 6px;
-webkit-border-radius: 6px;
box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
-webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
-moz-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
-o-box-shadow: 0 5px 40px rgba(0, 0, 0, .16)
}
.fb-credit {
text-align: center;
margin-top: 8px
}
.fb-credit a {
transition: none;
color: #bec2c9;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
border: 0;
font-weight: 400
}
.sberpikir.fb-overlay {
z-index: 0;
position: fixed;
height: 100vh;
width: 100vw;
-webkit-transition: opacity .4s, visibility .4s;
transition: opacity .4s, visibility .4s;
top: 0;
right: 0;
background: rgba(0, 0, 0, 0);
display: none
}
.sberpikir.fb-close {
z-index: 4;
padding: 0 6px;
background: #365899;
font-weight: 700;
font-size: 11px;
color: #fff;
margin: 8px;
border-radius: 3px
}
.sberpikir.fb-close::after {
content: 'x';
font-family: sans-serif
}
</style>
Supaya script diatas tidak menciptakan loading blog menjadi berat, saya rekomendasikan untuk me-minify kode-kode di atas dengan tool Minifier
Kode diatas dapat kau letakan pada bagian widget sidebar. Setelah semuanya berhasil diterapkan dengan baik, silakan lihat hasilnya.
Nah itulan panduan Cara Memasang Facebook Messenger di Blog dari lapaklama.com, kusus untuk pengguna wordpress, kau dapat memasang facebook messenger di blog dengan memakai plugin kusus yang dapat kau cari pada halaman plugin.
Sumber aciknadzirah.blogspot.com