JavaScript Copy to Clipboard with Branding

By  on  

I published a post a year ago detailing how you can copy to the clipboard using JavaScript.  The post was very popular and why would it be?  Copying content from a webpage without needing to use the default browser functions is awesome.  One trend I've seen recently is that when the use copies content from a given post, the copy function (Zero Clipboard, in this example) appends the page title, a link, and a special message telling the recipient to view the post.  Here's how to do it.

The JavaScript

Assuming the user is using ZeroClipboard functionality:

//set path
ZeroClipboard.setMoviePath('https://davidwalsh.name/demo/ZeroClipboard.swf');
//create client
var clip = new ZeroClipboard.Client();
//event
clip.addEventListener('mousedown',function() {
	clip.setText(document.getElementById('box-content').value + ".\n\nRead " + window.title + " at " + window.location + " to learn more!");
});
//glue it to the button
clip.glue('copy');

Appending the special message to the given text is done with basic JavaScript string concatenation of available window properties.

This post is more about the idea than it is the execution.  This type of marketing is good for newspaper-style websites that host thousands of posts and want to give themselves credit for the content that's been copied.

Recent Features

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • By
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

Incredible Demos

  • By
    Google Font API

    Google recently debuted a new web service called the Font API.  Google's Font API provides developers a means by which they may quickly and painlessly add custom fonts to their website.  Let's take a quick look at the ways by which the Google Font...

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Discussion

  1. addEventListener only works in non-IE browsers, you’ll want to use a cross-browser solution when implementing this on a public-facing website.

    I remember seeing a script used on some website that appends a message to any text that’s copied from the page. I can’t find it now though :(. Totally forgot how it worked, but it’d be perfect to append a message to the copied text.

  2. There’s a system available called “Tynt” (http://www.tynt.com) that does a similar thing. It also tracks all copied text and links clicked from the copied text into your account.
    Boss uses it

    Its not very lightweight though, all links generated have an ugly #hash tag and you can’t customize the message.

    Won’t be long before they’re charging for it either in my opinion, so finding a cross browser solution before they do (Tynt appears to be cross browser) would be fantastic

  3. Tim Branyen

    I don’t understand why someone would advocate to mainstream this approach. Nothing is worse than when I want to paste someone a snippet from an article only to find a massive block of unwanted text unintentionally spammed.

    This sort of practice should be rejected by the web development community the same way as unwanted audio, pop ups, and trailing mouse widgets.

  4. Leo

    Hi,
    Can anybody explain how to move the initial position of the popup Alert box?
    Currently it initially pops up in the center of the webpage.
    Thank you !

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!