メールで共有するボタンをWebページに簡単に作る方法【HTML】

Webサイトに、そのページをLINEやTwitterなどで共有する機能を作ることがありますが、
「LINEとか使ってないから他の手段も作って」
と言われることもあると思います。

「メールでシェアする」「メールで共有する」
のようなボタンを作って、

  • クリックしたらメーラーが起動
  • 本文にページのURLを入れる
  • 宛先は空にして自由にアドレスを入力できるようにする

をパパっと実装する方法をご紹介します。

目次

aタグのリンクにmailto(宛先なし)を記述する

Javascriptなどは使わず、aタグのみで実装します。

<a href="mailto:?subject=件名&body=本文">メールでシェアする</a>
<a href="mailto:?subject=件名&amp;body=本文">メールでシェアする</a>

「mailto:」の後ろには本来、メールの宛先のアドレスを記入しますが、今回は必要ないので何も書きません。

そのまますぐに「?」を書いて、

  • 「subject=」の後にメールの件名
  • 「body=」の後に本文

を書きます。
「&amp;」は情報を区切るために必要なので、件名と本文の間に入れてください。

そして本文の中に、共有するWebページのURLをあらかじめ書いておきます。
これだけで大丈夫です。

共有するページのURLを動的に変えたい場合は、上記のコードはJavaScriptで生成して、location.hrefを使うといいと思います。

件名が不要な場合は、

<a href="mailto:?body=本文">メールでシェアする</a>

としてください。

参考:起動させたメールに件名や本文を入れる

文字化けを防ぐために、日本語を変換する

注意したいのが文字化けです。
aタグのURLの中に、件名や本文のような日本語が書かれていると、ユーザー環境によっては文字化けしてしまうことがあります。

文字化けを防ぐために、無料の変換ツールをつかって日本語を半角英数字&記号に変換(エンコード)しましょう。

無料の変換ツール↓
URLエンコード・デコード

たとえば上記のツールの場合、

  • 「エンコードする」を選択
  • 変換したい文字列を入力する
  • 変換ボタンをクリック

で、下記のように変換されます。

URLエンコード・デコードの画面

変換された文字列をコピーして、「body=」や「subject=」の後ろにペーストしてください。

あとはアイコンを入れたり、CSSでボタンを装飾しましょう。

mailtoって危険じゃないの?

「mailtoは、スパムメールが大量に来るのでオススメしない。メールフォームを使おう」
と、見たり聞いたりした方もいると思います。

これはなぜかというと、

<a href="mailto:example@example.com">お問い合わせはこちら!</a>

のように宛先を入れて設置してしまうと、mailtoに書かれたアドレス宛に悪意のある第三者がスパムメールなどを大量に送りつけるかもしれないからです。

今回は宛先を空にしてメーラーを起動するだけで、誰のアドレスも書かれていないので問題ありません。

最後に

今はWebブラウザ自体にも、簡単にURLをコピーして共有できる機能がついています。

そのため「メールで共有する」ボタンは必要ないと思いがちですが(私もそうでした)、機械が苦手な人やSNSに慣れていない人が一定数いるのも事実です。
そんな人達にもページの共有を促したい場合は、上記のような手段も必要かもしれません。

状況に合わせて活用していきたいですね。

よかったらシェアしてね!
目次
閉じる