Adding Read More link to Copied Text from your Website using jQuery

In this tutorial, I am going to explain How to add read more link or copyright information to the bottom of the selected content who is trying to copies contents from your website.

If you implement this trick in your website, then chance of getting backlinks to your website will be higher.  It will also help you to track your content.

I have used document.body.oncopy property – It returns the onCopy event handler code on the current element.

Oncopy Property Syntax

element.oncopy = functionRef;

And another javascript function called window.getSelection(); – Returns a selection object representing the range of text selected by the user.

jQuery Code

$(document).ready(function () {

    document.body.oncopy = function () {

        var body_element = document.getElementsByTagName('body')[0];

        var selection;

        selection = window.getSelection();

        var pagelink = "<br />Read more at: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />";

        var copytext = selection + pagelink;

        var newdiv = document.createElement('div');

        body_element.appendChild(newdiv);

        newdiv.innerHTML = copytext;

        selection.selectAllChildren(newdiv);

        window.setTimeout(function () {

            body_element.removeChild(newdiv);

        }, 0);

    };

});

If someone selects the text from your website, the extra content is added as a hidden <div> included in your selection.  When the user paste their copied content, the extra link will appear at the end of the copied content.

Live Demo

Just copy any content from my site & paste it in your notepad or any editors. You will see the result 🙂

I hope you will like this tutorial. You can use this code in your website to track your contents

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome!

Thanks!