Cara Pasang Facebook Plugin di Blog AMP HTML

Seperti yang sudah kita ketahui bersama Media sosial mempunyai tugas yang sangat besar bagi perkembangan dan trafik Blog. Pengguna Media Sosial sangat cepat sekali berkembangnya informasi yang diberikan sangat cepat pula menyebar hanya dalam hitungan detik, meskipun banyak diantara berita-berita yang HOAX yang sekarang ini banyak beredar.

Untuk postingan kali ini aku akan mengembangkan mengenai Cara Pasang Facebook Plugin di Blog , mungkin sahabat semua sudah paham bagaimana cara memasang Facebook Plugin ini di Blog, postingan kali ini aku hanya khususkan untuk Blog , sebab memang agak sedikit berbeda cara penerapannya terutama kode-kode harus valid HTML, menyerupai yang sudah pernah aku bahas sebelumnya di postingan Cara Edit Template di Blog  disitu dijelaskan bagaimana cara edit blog amp html dan penerapannya.

Di postingan ini cara penerapannya agak berbeda dengan blog yang non-amp dimana kalau yang non amp mampu melayang atu mampu ditampilkan di tengah-tengah layar, untuk penerapan Widget Facebook Plugin di Blog aku sengaja terapkan dibawah blog tujuannya semoga amp-iframe dapat tampil dengan sempurna.

Nah bagaimana penasaran mari kita simak bagaimana cara penerapan Cara Pasang Facebook Plugin di Blog , bagi sahabat yang ingin mencoba silahkan. 

Pertama

Silahkan salin dan simpan isyarat CSS berikut ini di amp-custom untuk dibagian halaman utama blog, halaman static, dan halaman postingan blog.

.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 yang aku mark atau tandai itu untuk mengatur posisi tombol show di widget (icon messenger) ini mampu sahabat atur sendiri right dan bottom pada isyarat CSS berikut ini dan kalau ingin mengganti posisinya di sebelah kiri silahkan ganti right menjadi left atau sebaliknya, berikut kodenya.

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

Kemudian untuk mengatur posisi pada widget facebook messenger sahabat atur sendiri right dan bottom pada isyarat CSS berikut ini dan kalau ingin mengganti posisinya di sebelah kiri silahkan ganti right menjadi left atau sebaliknya, berikut kodenya.

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

Kedua
Jika sudah langkah pertama diatas lanjut ke berikutnya, silahkan sahabat salin dan simpan isyarat HTML dibawah ini tepat diatas isyarat </body>, perhatikan baik-baik kodenya.

  <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, can i help you? Send us a message now to get help 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=dbalikcom" 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>

Terakhir
Jika sudah selesai silahkan di coba dan tampilkan di Pratinjau terlebih dahulu semoga kalau ada yang error dapat segera diperbaiki dan di cek kembali penerapan kodenya, Oia hampir lupa sahabat wajib pasang juga isyarat JS amp-accordion.js dan amp-iframe.js, bagi yang belum memasangnya silahkan salin isyarat berikut.

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

Baiklah sahabat ini saja yang mampu aku bagikan, semoga bermanfaat.