LINEの共有ボタンをHTMLに設置する方法

LINEの共有ボタン、いわゆる友達に送る、友達に教える、といったボタンをHTMLに設置する方法を紹介しますね。

最初になんですがとってもわかりづらい事にLINEの共有ボタンの実装方法は2つあります。一応両方とも紹介しますが、片方は公式のドキュメントもやる気がないので個人的にはおすすめしません。

おすすめ：URLスキームを使う方法

とりあえずさくっと実装方法から。

<a href="https://line.me/R/share?text="○○">LINEで送る</a>

注意点があり「○○」の部分は必ずパーセントエンコーディングをしてください。phpならurlencode()ですね。ほかの言語の場合は各自「言語名　パーセントエンコーディング」として、調べていただければと思います。

と、こんな風に「○○」の所にLINEのメッセージで表示したいテキストやURLを入れるだけです。ちなみにLINEの共有ボタンは画像や動画は非対応で、シェアできるのはテキストのみとなります。

改行も可能で例えばPHPなら「\n」を入れたりすればOK。そうすることで単にURLだけシェアするんじゃなくて、記事タイトルもシェアできるのでよりユーザーフレンドリーだと思います。

phpの場合の実装例はこんな感じです。

<?php
$text = "記事のタイトル\n";
$text .= "https://△△";
$encode = urlencode( htmlspecialchars($text) );
$url = "https://line.me/R/share?text=" . $encode;
?>
<a href="<?php echo($url); ?>">友達に送る</a>

公式ドキュメント

非推奨：LINE Social Plugins

もう一つの方法が個人的に非推奨な方法「LINE Social Plugins」を使う方法です。

まずは公式ドキュメントを見てほしいんですが、LINEの提供するボタンを使うならただこのページの指示通りにやればあとはコピペするだけでHTMLに共有ボタンが設置できます。

ただ、オリジナルボタン、公式ドキュメントで言う所の「カスタムアイコン」を使おうとすると「本当にこれが公式ドキュメントなのか」というくらい不親切で、LINEほどの企業でもこのレベルなのかと思ってしまうくらい粗末なものになっています（わたし自身韓国が嫌いなので普段よりもかなり辛らつな意見になってる可能性はあります）。

まず、「LineIt.loadButton()」って何？っていうのがファーストインプレッション。

<script type="text/javascript">LineIt.loadButton();</script>

仮にHTMLやjavascriptの知識がなかった場合、このドキュメント通りに実装するとjavascriptがエラーを吐きます。なぜなら「LineIt」なんていうjavascriptを読み込んでいないから。ものすごく不親切極まりないです。

そしてこの公式ドキュメントの指示する「LineIt.loadButton()」を一切記述しなくてもLINEに送れちゃうという、意味の分からなさ。ならこの「LineIt.loadButton()」は何をやっているのでしょう。わかりません。

きっとこういうコト？

LINEの作った公式ドキュメントが公式ドキュメントになってないんで、推測するしかありませんが、たぶんですが、この「LineIt.loadButton()」を呼ぶことで公式ドキュメント下部にある「シェア数（「LINEで送る」ボタンが使用された回数）」を表示したりする機能が正常に動くようになるのだと思います。

なので、回数を表示しなくていいなら、もう「LineIt.loadButton()」を記述する必要もなく、もちろん後述する「<script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async" defer="defer"></script>」も読み込まずに、ただ単にLINEに送りたい個所のaタグに「https://social-plugins.line.me/lineit/share?url=○○」と入れればいいんだと思います。

通常そこを説明するのが公式ドキュメントの役割と思うのですが、日本と韓国では考え方が違うのかもしれません。

話を戻します。

たぶんですがその前の「LINE公式アイコンを使用」でコピペするコードで表示されている「<script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async" defer="defer"></script>」をどこかで読み込んでいる前提でこの公式ドキュメントは書かれているんだと思います。

ならカスタムアイコンの場合であってもそのjavascriptの読み込みを提示しないといけない。公式ドキュメントとしてあるまじき、というか公式ドキュメントとして成立していません。

また、こちらの「LINE Social Plugins」を用いたLINE共有ボタンはURLしかシェアできないようなので、基本的には1つ目の方法の「URLスキームを使う方法」を強くおすすめします。

「URLスキームを使う方法」だとURL以外にもテキストを含められますし、何をしているのかまるでわからない「https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js」なるjavascriptファイルも読み込まないでいいので楽です。

まとめ

LINE共有ボタンを自身のホームページに埋め込む方法を紹介しました。

まとめるとLINEで共有ボタンを設置するには2つやり方があり、それぞれ「URLスキームを使う方法」と「LINE Social Plugins」となっています。ただ、公式ドキュメントがもはや説明として成り立っていないですし、URLのみしか共有できないので「LINE Social Plugins」は個人的に非推奨、「URLスキームを使う方法」で設置するのがおすすめ、という感じ。