Skip to main content

follow us


Bloggerntt.com - Cara Pasang Plugin Facebook Messenger di Blog AMP HTML  - Facebook Messenger merupakan salah satu media sosial untuk saling chat sesama pengguna facebook. Dengan jumlah pemakai diseluruh dunia hampir miliaran orang tentunya facebook senantiasa memperbaharui aplikasinya untuk diterapkan disemua platform media.

Baca juga :

  1. Cara Memasang Image Lightbox Valid AMP Blogger Template
  2. Memasang Widget Multi Tab Valid AMP di Blogger Template 2019
  3. Cara Melindungi Konten Blog dengan Widget DMCA Badge di Blogger AMP HTML
  4. Memasang Kotak Subscribe Berlangganan FeedBurner Email di AMP Blogger
  5. Cara Terbaru Seting robot.txt dan Header Tag Super SEO 2019 pada Blog AMP


Kali ini saya akan berbagi cara bagaimana memasang atau membuat plugin facebook messenger di blog AMP HTML. Cara penerapannya agak berbeda dengan blog yang non-amp untuk blog non amp bisa melayang atu bisa ditampilkan di tengah-tengah layar, sedangkan penerapan Widget Facebook Plugin di Blog AMP HTML saya sengaja terapkan dibawah blog tujuannya agar amp-iframe dapat tampil dengan sempurna.


Ikuti langkah dibawah ini untuk penerapan di blog amp Anda
 Pertama
 - Pastikan di blog amp Anda sudah dipasang script amp-accordion.js dan amp-iframe.js, bagi yang belum memasangnya silahkan salin kode berikut, abaikan jika sudah dipasang di template blog Anda.

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

 - Anda copy/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}

kode yang ditandai di atas itu untuk mengatur posisi tombol show di widget (icon messenger). Anda bisa atur sendiri right dan bottom pada kode CSS berikut ini dan jika ingin mengganti posisinya di sebelah kiri 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}

Kedua
Salin kode html dibawah ini dan paste/simpan di atas 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, 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>

Sekian artikel Cara Pasang Plugin Facebook Messenger di Blog AMP HTML , semoga bermanfaat.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar