Cara Memasang Facebook Messenger di Blog

  • Whatsapp
Cara Memasang Facebook Messenger di Blog

Pada kesempatan kali ini kita akan belajar cara memasang facebook messenger di blog, seperti yang sudah kita ketahui pengguna facebook saat ini sudah mencapai milyaran orang diseluruh dunia, hal ini menegaskan dominasi Facebook di pasaran media sosial.

Facebook memiliki banyak sekali fitur unggulan yang bisa di nikmati oleh setiap penggunanya, dari sekian banyak fitur yang dimiliki facebook, messenger adalah fitur yang paling terkenal. jika sebelumnya fitur ini hanya terintegrasi di website utama Facebook, maka secara pelahan namun pasti messenger berevolusi menjadi aplikasi independen yang berhasil mendapatkan banyak loyalis.

Fitur messenger ini sebenarnya memiliki prinsip yang sama dengan whatsapp, line dan aplikasi chatting sejenisnya, Namun jika kamu adalah seorang pebisnis yang menggunakan facebook dan memiliki fanspage, maka messenger adalah aplikasi chatting yang terbaik.

Kembali ketopik utama, untuk memudahkan komunikasi antara pengunjung dan pemilik blog, alangkah baiknya jika kamu mau memasang facebook messenger di blog, adapun caranya sebagai berikut.

Cara Memasang Facebook Messenger di Blog

Facebook messenger ini bisa digunakan untuk pengguna blogger ataupun wordpress, adapun posisinya bisa kamu tentukan sendiri, namun posisi yang paling bagus untuk menempaykan facebook messenger adalah dibagian sidebar blog.Cara Memasang Facebook Messenger di Blog

Langkah pertama yang harus kamu 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 sebenarnya kamu sudah selesai Memasang Facebook Messenger di Blog, untuk membuat widget tersebut tidak tampil dan berubah menjadi tombol messenger, kamu harus memasang kode CSS dibawah ini pada widget mana saja yang kamu inginkan.

Berikut ini adalah kode CSS yang bisa Anda ubah dengan mudah untuk disesuaikan 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 membuat loading blog menjadi berat, saya rekomendasikan untuk me-minify kode-kode di atas dengan tool Minifier

Kode diatas bisa kamu 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, kamu bisa memasang facebook messenger di blog dengan menggunakan plugin kusus yang bisa kamu cari pada halaman plugin.

Nilai Kualitas Konten

Pos terkait

Loading...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *