Plugin Fixed Facebook Messenger With Show Hide

Plugin Fixed Facebook Messenger With Show Hide

Plugin Fixed Facebook Messenger With Show Hide

Facebook merupakan sosial media yang saat ini paling banyak digunakan, jika kamu seorang pebisnis online/internet marketer sudah seharusanya mengunakan media facebook sebagai komunikasi. Misalnya jika kamu memiliki Website, Online shop, atau Blog kemudian ingin langsung mengarahkan user/pengunjung untuk komunikasi melalui Facebook Messenger, bisa menggunakan Plugin Fixed Facebook Messenger ini.
Plugin Fixed Facebook Messenger With Show Hide

Dan pada widget kali ini, tidak hanya messenger fanspage saja yang ditampilkan, namun menampilkan timeline dan event juga.

Tombol show hide widget akan melayang di pojok kanan bawah dan dilengkapi dengan popover ketika tombol di-hover mouse dan widget akan tampil di tengah-tengah layar monitor.

Untuk demo widget ini cek di bagian pojok kanan bawah blog saya.

Jika ingin mencobanya, silahkan ikuti langkahnya di bawah.

Langkah Pertama

Simpan style css di bawah ini di atas kode </head>

<style>
#modal1 iframe{border:0;margin-bottom:-5px}
.overlay{position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);overflow:hidden;transition:opacity .2s;display:none;z-index:100000}
.overlay .cancel{position:absolute;width:100%;height:100%;cursor:default}
.modal{margin:-165px 0 0 -150px;top:50%;left:50%;padding:0;width:300px;height:330px;box-shadow:0 0 50px rgba(0,0,0,.5);position:absolute;text-align:center;-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.open_fbplugin{position:fixed;bottom:0;right:0;cursor:pointer;}
.open_fbplugin:hover .popover{display:block;}
.popover{position:absolute;top:-60px;right:5px;z-index:1060;display:none;width:276px;padding:5px 10px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);line-break:auto;}
.popover p{margin:0;padding:0}
.popover:before{bottom:-19px;right:10px;content:" ";border-top-color:#fff!important;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-width:0;border-width:10px;position:absolute;width:0;height:0;border-color:transparent;
border-style:solid;z-index:2}
.popover:after{bottom:-20px;right:10px;content:" ";border-top-color:#999!important;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-width:0;border-width:10px;position:absolute;width:0;height:0;border-color:transparent;
border-style:solid;z-index:1}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
</style>

Langkah Kedua

Simpan kode di bawah ini di atas kode </body>

<div onclick="showDiv()" class="open_fbplugin">
<svg style="width:44px;height:44px" viewBox="0 0 24 24">
    <path fill="#007fff" d="M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z" />
</svg>
<div class="popover">
<p>Hello, how may we help you? Just send us a message now to get assistance.</p>
</div>
</div>
<div id="modal1" class="overlay">
    <a class="cancel" href="javascript:void(0)" onclick="hideDiv()"></a>
    <div class="modal">
<iframe src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/fb_pageplugin.html?page=cidoshare" frameborder="0" scrolling="no" width="300" height="330">
</iframe>
    </div>
    </div>

<script>
//<![CDATA[
function showDiv() {
   document.getElementById('modal1').style.display = "block";
}
function hideDiv() {
   document.getElementById('modal1').style.display = "none";
}
//]]>
</script>

Ganti cidoshare dengan username fanspage facebook blog Anda dan untuk pesan tombolnya silahkan sesuaikan dengan bahasa Anda sendiri. Semoga bermanfaat.

source code : www.kompiajaib.com/2016/12/fixed-facebook-messenger-page-plugin.html

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Blogger
Disqus
Pilih Sistem Komentar Yang Disukai

7 Comments Add Comment

mantep gan artikelnya, ini nih yang ane cari2.

Balas

oke mas. silahkan di coba :D

Balas

Wahh sipp nih, caranya simple juga :D
Makasih ya

Balas

Akhirnya ketemu juga solusinya
Thanks gan XD

Balas

makasih loh gan scriptnya ...ijin pratek gan

Balas

langsung ane praktekin nih gan

Balas
Add Comment

Berkomentarlah dengan baik, Kepribadian anda tercemin saat berkomentar.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like CIDOSHARE? Keep us running by whitelisting CIDOSHARE in your ad blocker.

This is how to whitelisting CIDOSHARE in your ad blocker.

Thank you!

×
×
×