Cara Pasang Facebook Messenger di WordPress

0
1
Cara Pasang Facebook Messenger di Wordpress

Cara Pasang Facebook Messenger di WordPress | Facebook Messenger adalah fitur chat di facebook yang sudah banyak digunakan. Jika anda seorang penggiat internet, pastinya sudah sering menggunakan facebook messenger. Fitur Facebook ini juga banyak digunakan para pebisnis untuk menjangkau pelanggan dari manapun. Karena memang, jika anda seorang pebisnis sudah seharusanya mengunakan media facebook sebagai komunikasi.

Facebook kini semakin memudahkan pengguna untuk menggunakan fiturnya dari manapun. Jika kita lihat jumlah unduhan di Google Play Store, Facebook Messenger ini sudah diunduh sampai 67 Juta kali di seluruh dunia. Data ini menjadi tolak ukur betapa banyaknya pengguna facebook messenger di dunia.

Untuk lebih mendekatkan layanan pada pengguna, Facebook juga memfasilitasi pemilik situs untuk pasang Facebook Messenger ini di situs web mereka. Hal ini facebook lakukan karena semakin banyaknya situs online shopping yang ada di jagad maya. Dengan memasang facebook messenger ini maka pengguna atau pelanggan akan lebih mudah untuk menghubungi penjual.

Jika anda sebagai pemilik situs wordpress self hosted, anda bisa pasang facebook messenger pada situs wordpress tanpa menggunakan plugin. Meskipun ada beberapa plugin yang disarankan namun memasang facebook messenger tanpa plugin lebih disarankan agar tidak mempengaruhi kecepatan loading situs anda. Jika ingin membuat situs wordpress Self Hosted, baca dulu artikel Cara Membuat Blog WordPress Self Hosted sebagai panduan anda.

Nah saya rasa tidak perlu panjang lebar, ikuti panduan ini jika anda ingin pasang facebook messenger di wordpress anda.

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. Namun agar tidak merepotkan, sebaiknya pasang saja di widget sidebar dengan cara menambahkan widget Custom HTML.

<div class="fb-livechat"> 
<div class="bumianoa fb-overlay"></div>
<div class="fb-widget"> 
<div class="bumianoa fb-close"></div>
<div class="fb-page" data-href="https://www.facebook.com/bumianoaindonesia/" 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/bumianoaindonesia/" class="fb-xfbml-parse-ignore"></blockquote> </div>
<div id="fb-root"></div></div><a href="https://m.me/bumianoaindonesia" title="Chat Kami di Facebook" class="bumianoa 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), $(".bumianoa").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>

Jangan lupa untuk mengganti username facebook “bumianoaindonesia” dengan username facebook fans page anda. Caranya, buka facebook fans page anda dan temukan username setelah slash (garis miring) url facebook.com.

Agar tampilannya menarik, maka anda bisa membuat facebook messenger dengan icon melayang pada samping wordpress anda. Caranya sangat mudah hanya perlu kode tambahan saja. Kodenya seperti berikut ini.

<style>.fb-livechat,
.fb-widget {
 display: none
}

.bumianoa.fb-button,
.bumianoa.fb-close {
 position: fixed;
 right: 24px;
 cursor: pointer
}

.bumianoa.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
}

.bumianoa.fb-button:focus,
.bumianoa.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
}

.bumianoa.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
}

.bumianoa.fb-close {
 z-index: 4;
 padding: 0 6px;
 background: #365899;
 font-weight: 700;
 font-size: 11px;
 color: #fff;
 margin: 8px;
 border-radius: 3px
}

.bumianoa.fb-close::after {
 content: 'x';
 font-family: sans-serif
}
</style>

Kode diatas akan membuat icon Facebook Messenger tampil melayang pada sisi wordpress anda. Dan jika diklik maka akan muncul kolom chat messenger.

Sampai disini panduan pasang facebook messenger di wordpress. Semoga Bermanfaat.

LEAVE A REPLY

Please enter your comment!
Please enter your name here