こんにちはけーすけです。
最近のWebサイトにはSNSでシェアする機能が必ずついていますが、珍しくメールでシェアする機能をつける機会があったのでメモとして残しておこうと思います。

メールでシェアするボタンの設置するコード

ぱぱっとコピペしたい方はこちらをどうぞ！！

var pageName = document.title,
    insertHtml = "<div class="mailShare"><a href="javascript:location.href='mailto:?Subject="+pageName+"&body=' + document.URL;void(0);">メールでシェアする</a></div>";
$('親要素').append(insertHtml);

HTMLはお好みに合わせてください。
リンクをJavaScriptで設置することになるのでHTMLには設置する場所だけ用意してあげてください。divタグはいらないことが多いかもしれませんね。

メールでシェアボタンの仕組み

では仕組みを解説したいと思います。

var pageName = document.title, // ページ名を取得し変数に入れておく
    insertHtml = "<div class="mailShare"><a href="javascript:location.href='mailto:?Subject="+pageName+"&body=' + document.URL;void(0);">メールでシェアする</a></div>"; // シェアするコード
$('親要素').append(insertHtml); // 任意の要素の子要素に追加

ポイントはもちろん「insertHtml」という変数です。
hrefの中に、mailtoでメーラーを起動して、その際にメールの題名と本文にページの内容を入れてあげることで完成です。
すっごく簡単ですよね、他にもBCCやCCの設定もできます。URLが日本語の場合は文字化けしてしまう可能性があるので、decodeURIComponentを使ってデコードしてください。
簡単ですが、この辺で。
それではまた次回の記事でおあいしましょう、けーすけでした。