Sunday, February 04, 2018

Cara Memasang Plugin Facebook Massenger Pada Blog

Cara Memasang Plugin Facebook Massenger Pada Blog

Tags

Plugin Facebook Massenger Pada Blog
Facebook

Hallo sobat blogger kita masih membahas seputar tips oprek blog. Beberapa tips yang pernah di bagikan juga sudah saya coba dan work 100%. Kali ini kita akan membahas tentang cara memasang facebook massenger pada blog. Kode inipun saya dapat dari sebuah blog namun saya lupa menyimpan linknya.

Pasti sobat disini sudah taukan tentang aplikasi massenger dari facebook. Setiap orang yang memiliki akun facebook pasti di haruskan untuk menginstal aplikasi ini jika mau login melalui phonsel. Kalo tidak menginstal aplikasi massenger ini maka pesan yang masuk pada inbox fb tidak akan bisa dibaca melalui hp.

Setiap pengguna smartphone di indonesia pada umumnya sudah memiliki akun facebook. Saya rasa tips memasang massenger pada blog akan sangat bermanfaat dalam interaksi antara admin blog dengan pengunjung. Dengan memasang massenger ini pada blog maka pengunjung menjadi lebih mudah menghubungi admin blog melalui massenger facebook.

Gimana apakah sobat tertarik untuk memassangnya pada blog. Perlu di ingat cara memasang massenger ini sangat berbeda dengan cara memasang winget fanpage facebook yang terbilang cukup mudah. Untuk penampakanya sobat bisa lihat gambar di atas. Baiklah tanpa berbelit belit lagi mari kita tuju pokok pembahasan.

Cara memasang massenger facebook pada blog. Langkah pertama yang harus sobat lakukan adalah login dan buka dashboard blog sobat. Selanjutnya pilih thema dan edit HTML, ingat sebaiknya template di backup dulu menghindari kemungkinan buruk karna gagal memasang. Selanjutnya sobat copy kode di bawah ini dan letakan sebelum kode
]]></b:skin>


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

Selanjutnya copy kode javascript berikut sebelum kode
</body>
pada template sobat.

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

Simpan template lalu buka menu tata letak blog. Pilih tambahkan gadget lalu pilih HTML/javascript. Copy kode di bawah dan letakan pada kolom yang kosong. Untuk yang saya beri tanda #### silahkan ganti dengan id facebook sobat.

<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/####/" 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/####/" class="fb-xfbml-parse-ignore"></blockquote> </div>
<div id="fb-root"></div></div><a href="https://m.me/####" title="Chat Kami di Facebook" class="sberpikir fb-button"></a>
</div>

Selanjutnya simpan winget dan lihat hasilnya. Nah sampai di sini seharusnya sobat sudah berhasil memasang massenger pada blog. Jika masih belum berhasil silahkan ulangi lagi langkah satu sampai lima dengan teliti barangkali ada yang ketinggalan. Jika masih ragu boleh tanya pada kolom komentar happy blogging sobat blogger.

Buka Komentar

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
EmoticonEmoticon