Add Source Link or Copyright Note When Someone Copies Text

On Internet it is very easy to copy text from one place and paste it on another. But when this activity happens across domains, it may be deliberate plagiarism. Technically, if someone is copying text from a website, she should provide a credit link to the source website. But mostly people ignore this (and they get punished by Google for such deliberate acts).

You might have noticed that when you copy text from a website, link of the source page gets automatically copied to the clipboard and when you paste it, source link gets pasted along with text on the target page. A number of themes provided by free blogging sites support this feature. But if your theme does not support it, you may want to know how to automatically add source link to the copied text using JavaScript. You can also add a copyright symbol and copyright notice.

I recently added this feature to my TechWelkin theme. And today, I am going to tell you about how to do it.

We can define and then call a JavaScript function on copy event of the Document Object Model (DOM). This function basically prepares the link to be appended and add it to the copied text.

The trick lies in how we capture the copied text, add our link into it and then automatically copy the new text back into the clipboard.

JavaScript is beautiful!

To grab the copied text we use a window function called getSelection(). Then we add our link to it and insert the text+link into a newly created temporary DIV element.

After this we call selectAllChildren() to select the content of the temporary div. This selection copies our new text into the clipboard.

In the end, we just need to do give finishing touch to the whole process. We do it by removing the the temporary div.

Now let’s see the code, initially this code was developed by C.Bavota and later refined by folks on Stackoverflow. Here is the code:

function addLink() {
    //Get the selected text and append the extra info
    var selection = window.getSelection();
    pagelink = ". Read more at: " + document.location.href;
    copytext = selection + pagelink;
	//Create a new div to hold the prepared text
    newdiv = document.createElement('div');

    //hide the newly created container
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';

    //insert the container, fill it with the extended text, and define the new selection
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);

    window.setTimeout(function () {
        document.body.removeChild(newdiv);
    }, 100);
}
document.addEventListener('copy', addLink);

//****************************************

This code works in all major browsers (including Internet Explorer, how unbelievable!, version 8.0). You may use it anywhere in your page but I would recommend to use it in footer so that this JavaScript does not hamper in rendering of page. Quick rendering enhances user experience and also such speedy websites are loved by search engine.

I know, most of the plagiarizing people who copy text will automatically or manually remove our appended source link, nevertheless, it is a good to implement such a measure. You can use the above function to add a copyright note, source link, or anything else to the copied text. If you’re familiar with JavaScript, it is very easy to play around with the code and come up with exactly the text that you want to copy to clipboard.

As always, do let me know if you face any problems in this regard. Thank you for using TechWelkin.