Facebook Messenger Page Plugin With Show Hide For AMP HTML

Ditulis oleh: Adhy Suryadi
Ditulis pada: 12/31/2016

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.

DEMO

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>

Facebook Messenger Page Plugin With Show Hide For AMP HTML

Ditulis oleh: Adhy Suryadi Ditulis pada: 12/31/2016

Langkah Pertama

Langkah Kedua

Berbagi itu peduli:

Comment Policy:

Menarik Untuk Dibaca Juga:

Ditulis oleh: Adhy Suryadi
Ditulis pada: 12/31/2016