Langkah Mudah Buat Plugin Facebook Messenger with Show Hide

BLOG MOBILE.





     Kembali lagi di blog mobile pada sore ini saya akan membuat cara memasang  plugin massanger facebook untuk blog valid AMP.
Sebelumnya di blog KOMPI AJAIB sudah di jelaskan tapi gak ada salahnya kan saya posting ulang untuk menambah nambah artikel saya hehe.


Sebelumnya anda bisa liat demonya di halama sitemap saya.

Demo
Liat di kiri bawah sitemap.

Karna kita akan memasang plugin massanger facebook ini d blog AMP harus pakai AMP js

LANGKAH PERTAMA

Silahkan simpan AMP js berikut ini di tag </head> berikut 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>

LANGKAH KEDUA

Simpan kode di bawah ini diatas kode </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 page facebook kompi ajaib dengan page facebook anda

LANGKAH KETIGA

Tambahkan CSS di bawah ini di AMP-COSTUM STYLE.
Silahkan anda atur letak icon massanger facebook nya button dan right seperti kode CSS di bawah ini.
Jika ingin di sebelah kirin ubah right menjadi left.

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

Dan untuk mengatur widget massanger silahkan sesuikan atur button right dan right sesuai selera anda
liat kode di bawah ini.

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

Pastikan anda atur dua duanya misalnya icon massanger di kiri maka widget massanger juga harus di kiri biar show hide nya keliatan rapi hehe begitu juga sebaliknya.

Mungkin hanya itu yang bisa saya sampaikan Terimakasih sudah membaca totorial LANGKAH MUDAH BUAT FACEBOOK MASSANGER WITH SHOW HIDE.

SOURCE : KOMPI AJAIB