Making Permalink With Copy To Clipboard Keys For AMP Blogs - Permalink is short for Permanent Link which can simply be interpreted as a permanent link that leads to a blog post page.
Because permalink is an address of a web page that is permanent, the permalink is uniquely created. This means that the permalink is made different from one another so that when accessed it is not the wrong address.
And this time I will share how to make or display permalinks with the Copy button to clipboard for the AMP blog. This is useful to make it easier for visitors to copy Permalink or post URL.
Permalink with the Copy to clipboard button for this AMP blog can be stored in a post, for example under a post.
This uses an amp-iframe, running a custom JS that is loaded in the background with a placeholder button that remains visible.
For the demo, please try JSFiddle below. Please click the Copy icon to clipboard to copy the permalink.
If you want to try it, please follow the steps below.
Please install the following js amp-iframe in the HTML edit of your blog, if it is already there then no need to install it again.
<script async="async" custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>Then add the following CSS in the style of your amp-custom blog.
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}
Then please use the following HTML to display the permalink with the Copy button to clipboard for this AMP blog, please save it below the post.
<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>
</code></pre>Then please use the following HTML to display the permalink with the Copy button to clipboard for this AMP blog, please save it below the post.
Finish and have a good try.