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

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.