Cara Memasang (Menyinkronisasi) Facebook Messenger di Blog

Selamat datang kembali di blog portal sumut, blog yang kata ibu-ibu tetangga gue adalah blog informatif. Apa iya?

Tak bosan-bosannya, blog portal sumut tetap masih setia untuk membahas dunia blogging. Ya, artikel kali ini membahas bagaimana menambahkan facebook messenger dapat tersambung (tersinkron) dengan blog anda.

Sebelum penulis membahasnya, anda harus mengetahui apa itu facebook messenger dan bagaimana manfaatnya memasang ataupun menambahkan facebook messenger di blog anda. Facebook Messenger itu sendiri adalah aplikasi resmi Facebook yang mengijinkan Anda untuk melakukan percakapan teks dengan semua teman - teman di jaringan sosial yang populer. Anda akan bisa mengirim dan menerima pesan teks dalam percakapan yang mana kemudian bisa anda lanjutkan di komputer ataupun smartphone anda. Selain memudahkan anda untuk berkomunikasi dengan teman-teman ataupun pengikut anda, memasang Facebook Messenger di blog ternyata sangat bermanfaat buat anda yang sedang menjalankan bisnis online.

Berikut ini adalah langkah-langkah memasang Facebook Messenger di blog, cekidot:

• Masuk (log in) ke blog anda
• Pilih dan klik 'tata letak' > tambahkan gadget
• Salin (copy) skript kode di bawah ini dan tempatkan di kolom tambahkan gadget

<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/blog.portalsumut/" 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/blog.portalsumut/" class="fb-xfbml-parse-ignore"></blockquote> </div>
<div id="fb-root"></div></div><a href="https://m.me/blog.portalsumut" 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>

• Ganti tulisan yang berwarna biru di atas sesuai link profil facebook atau fanspage anda
• Untuk menghiasi dengan kode CSS, salin skript kode di bawah ini

<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>

• Jangan lupa, setelah diatur sesuai dengan blog anda, jangan memindahkan skript kode di atas di kolom 'tambahkan gadget' sebelum dimeminify. Anda dapat meminify skript kode tersebut dengan tool seperti html Minifier. Hal ini bertujuan untuk mempercepat proses loading blog anda.

Dengan ini blog anda telah berhasil dipasangin widget facebook messenger. Anda dapat menggunakan skript kode di atas untuk blogspot maupun wordpress.

Demikian tutorial kali ini, semoga informasi yang disampaikan dapat bermanfaat bagi anda. Terakhir, selamat mencoba dan #salamprofit.

Bagikan Artikel ini