Add a Copyright Notice to Copied Text
I was checking out the CBC website and I noticed that if you copy and paste any text from the site a reference link appears at the bottom, indicating the source. I thought that was kind of neat and tried to figure out how to do it. Turns out, they use a service called Tynt. That’s cool and all, but I wanted to see if I could make it happen using JavaScript. All I needed my function to do was grab the copied selection, tack on a copyright notice and then add the two to the clipboard.
It took a lot of messing around and I was finally able to put something together that worked in most browsers. Sorry IE people, this one won’t work for you, though if anyone figures out a fix for IE let me know. Then the function will work for all major browsers.
Here is the JavaScript:
<script type="text/javascript"> function addLink() { var body_element = document.getElementsByTagName('body')[0]; var selection; selection = window.getSelection(); var pagelink = "<br /><br /> Read more at: <a href='"+document.location.href+"'>"+document.location.href+"</a><br />Copyright © c.bavota"; // change this if you want var copytext = selection + pagelink; var newdiv = document.createElement('div'); newdiv.style.position='absolute'; newdiv.style.left='-99999px'; body_element.appendChild(newdiv); newdiv.innerHTML = copytext; selection.selectAllChildren(newdiv); window.setTimeout(function() { body_element.removeChild(newdiv); },0); } document.oncopy = addLink; </script> |
Just add this between your page’s head tags, and change the copyright notice to whatever you want.
Demo
To test it out, copy something from the paragraph below and paste it into your favorite text editor.
WOW! This is great. Greatings.
Lovely. I am going to do a tutorial on my site right away, on how to create a plugin that attaches your copyright information to every content copied on your blog/website.
Sweet. Let me know when it is done.
Wow! what a magic. That’s really very lovely piece of code….
Just wondering.. can we trim out extra content so that only limited text to be copied?
Hmm. I guess that might be possible to limit the total number of characters allowed to be copied but then I really think you would have to explain that to your users or they might think something is broken.
Woah! Never thought that would be possible.
Thanks for sharing!
Is it possible to copy text with links inside?
Hey there, this is some nice work. FYI – I’m using the Tynt plugin and there is only one problem with doing this. I cut and paste some text from my own blog all of the time when I’m submitting articles to blog forums or social sharing sites. Each time I wanted to do this I would need to remove the copyright and it was really a pain. With the Tynt plugin I am able to supply them with my IP address so that the copyright doesn’t appear when I cut and paste. I’m not sure if it would be worth the time for you to code those exclusion options too.
I must say this concept is pretty cool and I caught someone that was cutting and pasting from other comments into their own comments. This person didn’t speak English (I assume since their site was a translation service). Needless to say their comments ended up in the spam folder. (maybe someone was paying them to do this now that I think about it.)
I just wanted to share that story, with you. Thanks for all of your hard work on themes and tweaking the code.
And those who came before us:
Thanks. I saw that TIME.com had done the same thing, so i started to do some research on it and came across your .js … awesome. Imma gonna try to work on the IE problem. Cheers.
Great, Nice tweaking of the code, great copyrigth system
Great code but
<a href= code will not added in many cases. Just only http:// without active link code (for my notepad, dreamweaver). Maybe, you must try with eval() and & lt; os so, but I’m not sure.
hahaha!! I like it very much!
Nice script bro!!
Now I used it at my blog. Thanks 4 share
great work! I have decided that people who use IE hate the internet. Otherwise they would use a decent browser (or update to IE 9 at least). Good job, and keep up the good work and tutorials.
In the Time.com Works in all Browser, is this code:
http://tcr.tynt.com/javascripts/Tracer.js
When you copy comes with this word “Read more:” and in this js has this word
I tried to change but I had no success.
Awesome, thank you.
Thats what I looking for, really very thanks for sharing.
Really cool…thanks for sharing. I understand how all of the code is working except for how you are manipulating what is being sent to the clipboard. I see how the value of var ‘selection’ is set and changed…but how does that intercept the value sent to the clipboard?
I am actually adding the link to your content before it gets added to the clipboard.
I have a solution for the IE.
replace “document.oncopy = addLink;” with:
function bindEvent(el, eventName, eventHandler) {
if (el.addEventListener){
el.addEventListener(eventName, eventHandler, false);
} else if (el.attachEvent){
el.attachEvent(‘on’+eventName, eventHandler);
}
}
bindEvent(document, ‘copy’, function () {
addLink();
});
Tested this IE solution and it does not work.
C.Bavota, is there a working solution for IE?
Great script!
I don’t have a solution for IE. Sorry.
SJL, ur solution doesn’t work!
Great.
That script is actually what i looking for.
Simple and awesome.
Hi, this is a very funny script. But do you have an idea, how not to modify the copied text while getting into clipboard? In my case I am using
Uups, I meant pre-tags.
Ok , great idea. but does half the job. If someone copy and pastes all the content to another website, has little value to include a link back to your site in the bottom … Ideally , I would love a tool that will not copy and paste more than 10 lines of text and after that will link back to my site, so I know visitors will visit to read the rest. any ideas?
add this line
var selectiontxt = selection.toString();
and change this line
var copytext = selectiontxt.substring(0,250)+pagelink;
This mod works great on regular HTMl pages but not on PHP pages.
I love this.
In order to keep new lines:
Put a inside the “”, it has been removed automatically.
Damn! Even with spaces! I meant a BR tag for god sake!
IE Support added with this simple modification:
function addLink() {
var body_element = document.body;
var selection;
selection = window.getSelection();
if (window.clipboardData) { // Internet Explorer
var pagelink = “\r\n\r\nRead more at: “+document.location.href+”\r\nCopyright \u00A9 CompanyName”; // change this if you want
var copytext = selection + pagelink;
window.clipboardData.setData (“Text”, copytext);
return false;
} else {
var pagelink = ” Read more at: “+document.location.href+”Copyright © CompanyName”; // change this if you want
var copytext = selection + pagelink;
var newdiv = document.createElement(‘div’);
newdiv.style.position=’absolute’;
newdiv.style.left=’-99999px’;
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}
}
I forgot to add…
document.oncopy=addLink
will add listener for all non-IE browsers.
IE needs
document.body.oncopy=addlink
added to your onload event. (body doesn’t exist until loaded)
Alternatively you can add oncopy=”addLink()” to your tag for all browsers… however if you use common JS files for your site, you probably want to add handlers in your JS files themselves.