rcmdnk's blog

Japanese ver.: JavaScriptだけでブログがコピーされた時にその内容をメールで送る
Schleich Male Mandrill Toy Figure

It is interesting to know what parts are copied by readers.

Though GitHub Pages cannot use such PHP, I found a way to send email by JavaScript as written in Send a mail by JavaScript with Mandrill.

Using this function, copy notice function was implemented in this blog.

Sponsored Links

Sign up to Mandrill

Sign up to Mandrill, and get an API key.

Send a mail by JavaScript with Mandrill.

JavaScript

Prepare JavaScript like a blow:

source/javascript/utils.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
jQuery(function($){
  $(document).on('copy', function(e) {
    var selected = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            selected = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            selected = document.selection.createRange().htmlText;
        }
    }
    var title = document.title;
    var  url = location.href;
    $.ajax({
      type: "POST",
      url: "https://mandrillapp.com/api/1.0/messages/send.json",
      data: {
        'key': 'YOUR_API_KEY',
        'message': {
          'from_email': '[email protected]',
          'to': [
            {
              'email': '[email protected]',
              'name': 'your receiver',
              'type': 'to'
            }
          ],
          'subject': 'Copied at ' + title,
          'html': '<div><a href="' + url + '">' + title + '</a></div><br><br><div>' + selected + '</div>'
        }
      }
    });
  });
});

In Octopress, I made source/javascript/utils.js and put my functions there.

It is read from source/_includes/head.html:

source/_includes/head.html
1
2
3
4
5
6
7
8
...
<head>
...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
...
  <script src="/javascripts/utils.js"></script>
</head>
...

To use the script, you just need to change:

  • key: What you got from Mandrill.
  • from_email: Sender’s email address. Any adress with correct shape ([email protected]) can be used.
  • email: Receiver’s email address.
  • name: Receiver’s name.

In above JavaScript, the function is called when copy event occurs. (by Ctrl-C(Cmd-C) or from contextmenu.)

In the function, window.getSelection() is used to get a selected region. document.selection part is for old IE.

getselection - How to get selected html text with javascript? - Stack Overflow

In this way, API key is published. It is a bit bad, but the key is used only for this purpose, then I think it is ok for now.

How to send an email from JavaScript - Stack Overflow

Summary

Copy notice function was implemented rather easier than what I thought.

This method is not only for Octopress, but you can use in any sites/blogs. It is interesting to see it.

After the implementation, I some copies. It seems that there are many copies which are just accidents…stuck_out_tongue_winking_eye

Sponsored Links
Sponsored Links

« Send a mail by JavaScript with Mandrill Prevent to disconnect a ssh connection by 'Connection reset by peer' »