Unicodes URL Copy Button for non-Roman Alphabet

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. Add the following in your themes functions.php file.

// Link copy button
 
function copy_url_shortcode() {
	return '
	<div class="copyURL">
    	<button onclick="copyToClipboard()">Copy URL</button>
    	<script>
        	function copyToClipboard() {
            	try {
                	// Use navigator.clipboard API for better compatibility and security
                	navigator.clipboard.writeText(decodeURI(window.location.href))
                    	.then(() => {
                        	alert("URL copied!");
                    	})
                    	.catch(err => {
                        	console.error("Failed to copy: ", err);
                        	alert("Failed to copy URL. Please try again.");
                    	});
            	} catch (err) {
                	console.error("Clipboard API not supported: ", err);
                	alert("Your browser does not support clipboard copying.");
            	}
        	}
    	</script>
	</div>';
}
 
// Register the shortcode
add_shortcode('copy_url_link', 'copy_url_shortcode');

Then, you can call the shortcode in your post, or put it in a location in your theme’s i.e. single.php file. Alternatively, use WordPress’s Site Editor and put the shortcode in the single-post template, where you want to show the copy-button.

Enjoy sharing non-English unicode URLs!