Injecting text when content is copied from Web Page

Question

I ran into a a site that injects a "Read More: " line at the end of any text that you highlight and copy from it's pages.

I've never seen this before, and without severely digging into their code, I can't find the code that does this.

Anyone know how this is done?

Example: http://peaceful-parenting.suite101.com/article.cfm/how_to_keep_kids_from_climbing_on

Copy a paragraph of text, and paste it into another application, and there will be a "read more" line afterwards.

Answer 1

Looks like it is tynt.com, which is some sort of tracer for text being copied off their page.

From the tynt.com site

Tracer automatically adds a link back to your site when content is copied and pasted. Read more: http://tracer.tynt.com/features-and-benefits-of-tracer#ixzz0MgaE6z6y Under Creative Commons License: Attribution No Derivatives

Heck... it just added the read more link and the CC license stuff to the text I copied from the tynt.com site.

Answer 2

Suite101 is using a 3rd party service called Tynt.

Tynt's JavaScript snippet is located at http://tcr.tynt.com/javascripts/Tracer.js

I explored the source for you (with some help from the Online JavaScript beautifier).

So here's what's happening:

• the code activates on events like mouseup, mousedown, and copy (in the startListeningForTraces function)
• if the user selected a range of text, then it:
  • creates the HTML for an attribution link, plus optional CC license URL
  • appends this HTML to the selection, placing it inside a zero-size <div> (to keep it invisible on-screen)
  • reports what was copied back to Tynt's servers

Tynt's code does a tremendous amount of work to make this work seamlessly across browsers.