Facebook Messenger Page Plugin With Show Hide For AMP HTML

Sebenarnya postingan ini melanjutkan dari postingan sebelumnya tentang Facebook messenger page plugin, namun kali ini khusus untuk blog AMP HTML.

Berbeda dengan blog non-AMP yang bisa menampilkan widget di tengah-tengah layar, pada blog AMP widget ditempatkan di bagian bawah blog agar amp-iframe bisa tampil.

Dengan trik yang berbeda dengan Facebook messenger page plugin untuk blog non-AMP, akhirnya saya berhasil membuat tampilan widget untuk blog AMP mirip dengan widget untuk blog non-AMP.

Silahkan lihat di pojok kanan bawah blog.

Nah jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

Langkah Pertama

Silahkan simpan kode CSS ini di amp-custom style untuk halaman utama, halaman postingan, dan halaman static.


.fb_plugin section:not([expanded]) .show-less,.fb_plugin section[expanded] .show-more{display:none}
.fb_plugin amp-iframe{position:absolute;top:40px;right:0;width:300px;height:330px}
.overlay{position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);overflow:hidden;transition:opacity .2s;z-index:100000}
.modal{bottom:0;right:50px;padding:0;width:300px;height:370px;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}
.fb_plugin section .show-more .open_fbplugin{position:fixed;bottom:0;right:0;cursor:pointer;width:44px;height:44px}
.fb_plugin section .show-less{z-index:100001;}
.fb_plugin section .show-less .fb_header{position:fixed;bottom:330px;right:50px;cursor:pointer;z-index:100001;width:280px;height:40px;background:#3b5998;color:#fff;border-radius:3px 3px 0 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:lighter;text-align:left;line-height:40px;padding:0 10px;animation:myclose 1s;-moz-animation:myclose 1s;-webkit-animation:myclose 1s}
.fb_plugin section .show-less .close_fbplugin{position:absolute;top:8px;right:10px;cursor:pointer;width:25px;height:25px;color:#fff;font-size:24px;text-align:center;line-height:25px;}
.show-more svg{width:44px;height:44px}
.show-more svg path{fill:#007fff}
@keyframes myclose{from{bottom:0}
to{bottom:330px}
}
@-moz-keyframes myclose{from{bottom:0}
to{bottom:330px}
}
@-webkit-keyframes myclose{from{bottom:0}
to{bottom:330px}
}
@-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)}}
.fb_plugin section h4 .open_fbplugin:hover .popover{display:block;}
.fb_plugin section h4 .open_fbplugin .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;}
.fb_plugin section h4 .open_fbplugin .popover p{margin:0;padding:0}
.fb_plugin section h4 .open_fbplugin .popover:before{bottom:-19px;right:10px;content:" ";border-top-color:#fff;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-bottom-width:0;border-width:10px;position:absolute;width:0;height:0;border-style:solid;z-index:2}
.fb_plugin section h4 .open_fbplugin .popover:after{bottom:-20px;right:10px;content:" ";border-top-color:#999;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-bottom-width:0;border-width:10px;position:absolute;width:0;height:0;border-style:solid;z-index:1}

Untuk mengatur letak tombol show widget (ikon messenger) silahkan atur bottom dan right di kode CSS di bawah ini, jika ingin di sebelah kiri maka ganti right menjadi left.


.fb_plugin section .show-more .open_fbplugin{position:fixed;bottom:0;right:0;cursor:pointer;width:44px;height:44px}

Untuk mengatur letak widget (Facebook messenger) silahkan atur bottom dan right di kode CSS di bawah ini, jika ingin di sebelah kiri maka ganti right menjadi left.


.modal{bottom:0;right:50px;padding:0;width:300px;height:370px;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}

Langkah Kedua

Silahkan simpan kode HTML di bawah ini di atas </body>


  <amp-accordion class='fb_plugin'>
    <section>
<h4>
<span class="show-more">
<span class='open_fbplugin'>
<svg 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>
<span class="popover">
<p>Hello, how may we help you? Just send us a message now to get assistance.</p>
</span>
</span>
  </span>
<span class="show-less fb">
<span class="fb_header">
Facebook Messenger <span class='close_fbplugin'>&amp;times;</span>
</span>
  </span>
</h4>
<div>
<div class="overlay">
<div class="modal">
<amp-iframe src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/fb_pageplugin_amp.html?page=kompiajaib" frameborder="0" scrolling="no" width="300" height="330" layout="responsive" sandbox="allow-forms allow-scripts allow-same-origin allow-popups">
</amp-iframe>
                    ></div>
            </div>
        </div>
            </section>
  </amp-accordion>

Silahkan ganti kode kompiajaib dengan username fanspage blog Anda.

Dan pastikan Anda sudah memasang amp-iframe.js dan amp-accordion.js seperti di bawah ini


<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>
<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'></script>

Reactions:

You Might Also Like:

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