Webサイトに、そのページをLINEやTwitterなどで共有する機能を作ることがありますが、
「LINEとか使ってないから他の手段も作って」
と言われることもあると思います。
「メールでシェアする」「メールで共有する」
のようなボタンを作って、
- クリックしたらメーラーが起動
- 本文にページのURLを入れる
- 宛先は空にして自由にアドレスを入力できるようにする
をパパっと実装する方法をご紹介します。
aタグのリンクにmailto（宛先なし）を記述する
Javascriptなどは使わず、aタグのみで実装します。
<a href="mailto:?subject=件名&body=本文">メールでシェアする</a><a href="mailto:?subject=件名&body=本文">メールでシェアする</a>
「mailto:」の後ろには本来、メールの宛先のアドレスを記入しますが、今回は必要ないので何も書きません。
そのまますぐに「?」を書いて、
- 「subject=」の後にメールの件名
- 「body=」の後に本文
を書きます。
「&」は情報を区切るために必要なので、件名と本文の間に入れてください。
そして本文の中に、共有するWebページのURLをあらかじめ書いておきます。
これだけで大丈夫です。
件名が不要な場合は、
<a href="mailto:?body=本文">メールでシェアする</a>としてください。
文字化けを防ぐために、日本語を変換する
注意したいのが文字化けです。
aタグのURLの中に、件名や本文のような日本語が書かれていると、ユーザー環境によっては文字化けしてしまうことがあります。
文字化けを防ぐために、無料の変換ツールをつかって日本語を半角英数字＆記号に変換（エンコード）しましょう。
無料の変換ツール↓
・URLエンコード・デコード
たとえば上記のツールの場合、
- 「エンコードする」を選択
- 変換したい文字列を入力する
- 変換ボタンをクリック
で、下記のように変換されます。
変換された文字列をコピーして、「body=」や「subject=」の後ろにペーストしてください。
あとはアイコンを入れたり、CSSでボタンを装飾しましょう。
mailtoって危険じゃないの？
「mailtoは、スパムメールが大量に来るのでオススメしない。メールフォームを使おう」
と、見たり聞いたりした方もいると思います。
これはなぜかというと、
<a href="mailto:example@example.com">お問い合わせはこちら！</a>のように宛先を入れて設置してしまうと、mailtoに書かれたアドレス宛に悪意のある第三者がスパムメールなどを大量に送りつけるかもしれないからです。
今回は宛先を空にしてメーラーを起動するだけで、誰のアドレスも書かれていないので問題ありません。
最後に
今はWebブラウザ自体にも、簡単にURLをコピーして共有できる機能がついています。
そのため「メールで共有する」ボタンは必要ないと思いがちですが（私もそうでした）、機械が苦手な人やSNSに慣れていない人が一定数いるのも事実です。
そんな人達にもページの共有を促したい場合は、上記のような手段も必要かもしれません。
状況に合わせて活用していきたいですね。