Cara Memasang Facebook Messenger di Blog

Cara Memasang Facebook Messenger di Blog – Sudah ada miliaran pengguna Facebook di dunia saat ini. Hal tersebut pun menegaskan dominasi Facebook di pasaran media sosial.

Salah satu fitur populer yang terkenal yang dimiliki Facebook adalah Facebook Messenger.

Makin lama, Facebook Messenger yang sebelumnya hanya terintegrasi di website utama Facebook, perlahan berevolusi menjadi aplikasi independen yang berhasil mendapatkan banyak loyalis.

Baca Juga: 10 Aplikasi iPhone Untuk Blogger yang Wajib Digunakan

Facebook Messenger memang memudahkan pengguna Facebook secara khusus untuk berkomunikasi, sama seperti media sosial lainnya seperti Line maupun WhatsApp.

Hanya saja, bila Anda menggunakan Facebook untuk bisnis dan memiliki Facebook Fan Page sendiri, Facebook Messenger akan sangat bermanfaat bila dipasang di blog.

Baca Juga:

Dalam tutorial kali ini, mari kita bahas bagaimana cara memasang Facebook Messenger di Blog hanya dengan menggunakan beberapa baris kode saja.

Cara Memasang Facebook Messenger di Blog

Yang pertama yang perlu kita persiapkan adalah kode HTML untuk menempatkan Facebook chat box di setiap halaman website Anda.

Pasang kode berikut di widget 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/seniberpikir/" 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/seniberpikir/" class="fb-xfbml-parse-ignore"></blockquote> </div>
<div id="fb-root"></div></div><a href="https://m.me/seniberpikir" 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>

Dari kode di atas, jangan lupa ganti seniberpikir dengan username Facebook Fan Page Anda. Untuk menemukannya, silakan buka profil Facebook Fan Page Anda dan biasanya username Facebook Fan Page Anda berada di belakang, seperti https://www.facebook.com/username.

Baca Juga: Cara Membuat Efek Parallax di Postingan WordPress

Apabila sudah, kita tinggal ‘menghiasnya’ dengan kode CSS. Berikut 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>

Untuk mempercepat loading blog Anda, setelah kode tersebut diubah untuk menyesuaikan dengan blog Anda, saya rekomendasikan untuk me-minify kode-kode di atas dengan tool seperti Minifier.

Baca Juga: Jangan Lewatkan! Begini 5 Cara Efektif Mendapatkan Uang dari Internet

Untuk pengguna WordPress dan Blogspot, kode di atas bisa ditempatkan di widget sidebar. Setelah semuanya berhasil diterapkan dengan baik, silakan lihat hasilnya. Anda bisa merujuk ke website ini untuk melihat hasilnya.


Penutup

Itulah cara memasang Facebook Messenger di blog. Mudah sekali, bukan? Apabila Anda alternatif tambahan, bagi pengguna WordPress bisa menggunakan plugin WordPress yang juga tersedia.

Baca Juga: Cara Membuat Daftar Isi di Dalam Tulisan

Semoga tutorial ini bermanfaat untuk Anda!

Walter Pinem
Walter Pinemhttps://walterpinem.me/
Traveler, Teknisi SEO, dan Programmer WordPress. Aktif di Seni Berpikir, A Rookie Traveler, GEN20, Payung Merah, dan De Quixote.

Bacaan SelanjutnyaPENTING
Topik Menarik Lain

2 KOMENTAR

  1. terima kasih atas informasinya dan jangan lupa…

  2. Bedanya apa ya dengan facebook comment biasa? Lagi nyari referensi untuk ganti komentar bawaan blog.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

Ikuti Kami!

1,390FansSuka
697PengikutMengikuti
210PelangganBerlangganan

Terpopuler