» » » Cara Memasang Facebook Messenger Di Blog

Cara Memasang Facebook Messenger Di Blog

, Edit

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


Salah satu fitur terkenal yang terkenal yang dimiliki Facebook yakni Facebook Messenger.


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


Baca Juga: 10 Aplikasi iPhone Untuk Blogger yang Wajib Digunakan


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


Hanya saja, jika Anda memakai Facebook untuk bisnis dan mempunyai Facebook Fan Page sendiri, Facebook Messenger akan sangat bermanfaat jika dipasang di blog.


Baca Juga:



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


Cara Memasang Facebook Messenger di Blog


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


Pasang instruksi 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="Cara Memasang Facebook Messenger di Blog" 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 instruksi 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, menyerupai https://www.facebook.com/username.


Baca Juga: Cara Membuat Efek Parallax di Postingan WordPress


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


Untuk mempercepat loading blog Anda, sehabis instruksi tersebut diubah untuk menyesuaikan dengan blog Anda, aku rekomendasikan untuk me-minify kode-kode di atas dengan tool menyerupai Minifier.


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


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



Penutup


Itulah cara memasang Facebook Messenger di blog. Praktis sekali, bukan? Apabila Anda alternatif tambahan, bagi pengguna WordPress sanggup memakai plugin WordPress yang juga tersedia.


Baca Juga: Cara Membuat Daftar Isi di Dalam Tulisan


Semoga tutorial ini bermanfaat untuk Anda!



Sumber https://www.seniberpikir.com

Berlangganan Informasi Terbaru:

0 Response to "Cara Memasang Facebook Messenger Di Blog"

Posting Komentar

Langganan: Posting Komentar (Atom)