Jan 25, 2017

Cara Pasang Facebook Plugin di Blog AMP HTML

Facebook Messenger

Seperti yang sudah kita ketahui bersama Media sosial mempunyai peran 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 saya akan berbagi mengenai Cara Pasang Facebook Plugin di Blog AMP HTML, mungkin sobat semua sudah paham bagaimana cara memasang Facebook Plugin ini di Blog, postingan kali ini saya hanya khususkan untuk Blog AMP HTML, karena memang agak sedikit berbeda cara penerapannya terutama kode-kode harus valid HTML, seperti yang sudah pernah saya bahas sebelumnya di postingan Cara Edit Template di Blog AMP 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 bisa melayang atu bisa ditampilkan di tengah-tengah layar, untuk penerapan Widget Facebook Plugin di Blog AMP saya sengaja terapkan dibawah blog tujuannya agar amp-iframe dapat tampil dengan sempurna.

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


Pertama
Silahkan salin dan simpan kode 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 saya mark atau tandai itu untuk mengatur posisi tombol show di widget (icon messenger) ini bisa sobat atur sendiri right dan bottom pada kode 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 sobat atur sendiri right dan bottom pada kode 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 sobat salin dan simpan kode HTML dibawah ini tepat diatas kode </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 agar jika ada yang error dapat segera diperbaiki dan di cek kembali penerapan kodenya, Oia hampir lupa sobat wajib pasang juga kode JS amp-accordion.js dan amp-iframe.js, bagi yang belum memasangnya silahkan salin kode 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 sobat ini saja yang bisa saya bagikan, semoga bermanfaat.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.