Permalink dengan tombol Copy to clipboard untuk blog AMP ini bisa disimpan di dalam postingan, misalnya di bawah postingan.Ini menggunakan amp-iframe, menjalankan JS kustom yang dimuat di latar belakang dengan tombol placeholder yang tetap terlihat.
Untuk demonya silahkan coba di JSFiddle berikut ini. Silakan klik ikon Copy to clipboard untuk menyalin permalink-nya.
Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.
Silahkan pasang js amp-iframe berikut di edit HTML blog Anda, jika sudah ada maka tidak perlu pasang lagi.
<script async="async" custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Kemudian tambahkan CSS berikut di style amp-custom blog AMP Anda.
button.copy-button{box-sizing:border-box;font:inherit;font-size:14px;line-height:1.2;border:2px solid transparent;background:#555;padding:0;text-align:center;color:#fff;display:block;cursor:not-allowed;width:100%;height:100%}
.copybutton{display:flex;align-items:center;padding:0;margin:0;font-size:14px;font-weight:400;background:#E53935;color:#B71C1C;}
.copybutton p{font-size:14px;font-weight:400;margin:0;padding:0 10px;height:35px;line-height:35px;background:rgba(255,255,255,.85);overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap;width:100%}
.copy-button svg{width:18px;height:18px;vertical-align:middle}
.copy-button svg path{fill:#fff}
Kemudian silahkan gunakan HTML berikut untuk menampilkan permalink dengan tombol Copy to clipboard untuk blog AMP ini, silahkan simpan di bawah postingan.
<div class='copybutton'>
<amp-iframe expr:src='"https://cdn.staticaly.com/gh/KompiAjaib/kompi-html/master/copier_1.6.html#" + data:post.url' frameborder='0' height='35' sandbox='allow-scripts' width='35'>
<button class='copy-button' disabled='' placeholder=''><svg width="24px" height="24px" viewBox="0 0 24 24"><path fill="#000000" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" /></svg></button>
</amp-iframe>
<p><data:post.url/></p>
</div>
Selesai dan selamat mencoba.
Sumber: https://ampbyexample.com/playground/#url=https%3A%2F%2Fampbyexample.com%2Fadvanced%2Fcopy_button%2Fsource%2F