spider web

URL Copy Button for non-English Unicode

in

— 5 reads

If you run a website in non-English language, URLs can be encoded in non-English Unicode character. For example, check the following URL in Bengali: bigganblog.org/2023/12/কীভাবে-গ্রহাণু-শনাক্ত-কর/

This is good for intended audience, since they can just look at the URL and know what is it about in their native language. However, manually copying the URL from browser address-bar can be troublesome, since this will render the URL in UNICODE encoded URI. For example, the previous URL may look like following after you copy it:

https://bigganblog.org/2023/12/%e0%a6%95%e0%a7%80%e0%a6%ad%e0%a6%be%e0%a6%ac%e0%a7%87-%e0%a6%97%e0%a7%8d%e0%a6%b0%e0%a6%b9%e0%a6%be%e0%a6%a3%e0%a7%81-%e0%a6%b6%e0%a6%a8%e0%a6%be%e0%a6%95%e0%a7%8d%e0%a6%a4-%e0%a6%95%e0%a6%b0/

This is not user-friendly. So you might need to provide a way to your user to copy the URL in its native-user friendly form, so that they are sharable in social media or anywhere in the web.

Here’s a code-chunk you can use to render a button to copy UNICODE link in its native form. This use PHP and JavaScript.

<div class="copyURL">
<?php echo "<button onclick=\"copyToClipboard()\">🔗 Copy Link</button>
<script> function copyToClipboard(text) 
    {
    var inputc = document.body.appendChild(document.createElement(\"input\"));
					    inputc.value = decodeURI(window.location.href);
					inputc.style.position='fixed';
					inputc.focus();
					inputc.select();
					document.execCommand('copy');
					inputc.parentNode.removeChild(inputc);
					alert(decodeURI(\"URL copied!\"));
					}
</script>"; ?>
</div>

Just put the code in WordPress post template file, i.e. single.php file.

Enjoy sharing non-English unicode URLs!


Comments

Leave a Reply

Join as a subscriber

Only the posts on data visualization, bioinformatics how to tutorials, web-development, and general comments on research and science will be sent.

Join 10 other subscribers