Facebook Messenger Page Plugin With Show Hide For Amp Html

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

Berbeda dengan blog non-AMP yang dapat menampilkan widget di tengah-tengah layar, pada blog AMP widget ditempatkan di bab bawah blog semoga amp-iframe dapat tampil.

Dengan trik yang berbeda dengan Facebook messenger page plugin untuk blog non-AMP, alhasil aku berhasil menciptakan tampilan widget untuk blog AMP ibarat dengan widget untuk blog non-AMP.

DEMO

Silahkan lihat di pojok kanan bawah blog.

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

Langkah Pertama

Silahkan simpan arahan 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 arahan CSS di bawah ini, jikalau 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 arahan CSS di bawah ini, jikalau 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 arahan 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 arahan kompiajaib dengan username fanspage blog Anda.

Dan pastikan Anda sudah memasang amp-iframe.js dan amp-accordion.js ibarat 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>

Sumber https://www.kompiajaib.com/

Share this post