遂に一般公開！「LINEで送る」ボタンのHTMLコード設置方法

01 . LINEで送るボタンの設置方法

まずは公式のボタン作成サイトにアクセスします。

設置方法｜LINEで送るボタン

ガイドラインを読んで頂き、内容に同意できるものであれば「スマートフォンサイトへの設置方法」に進みます。

使用するボタンを選んで、送るテキストを選択し、プレビューに表示されるHTMLコードをコピーしてブログやWebサイトの表示したい位置にコードを張り付ければ設置完了です。簡単に設置できますね。

LINEはiPhoneやAndroid向けのアプリケーションになりますのでPCからのアクセス時には表示されませんが、スマートフォンからアクセスされた時にはボタンが表示されます。

02 . HTMLコードの応用

ごすてっぷでは上の写真を見てもらえればわかるように記事下のシェアボタンと、追従型の縦向きシェアボタンの2つのSNSシェアボタン群を設置しています。

このように複数のLINEボタンを設置する場合は、吐き出された最初のHTMLコードの1行目のスクリプト呼び出しは1回でOKですので、ヘッダーなどに記載するなどし速度向上のためにアクセス回数を減らすと良いでしょう。

↓この1行目はヘッダーに書いても動作する

<script type="text/javascript" src="http://media.line.naver.jp/js/line-button.js" ></script>

あとは2行目以降を表示したい場所に記載すればOK

<script type="text/javascript">
new jp.naver.line.media.LineButton({"pc":false,"lang":"ja","type":"a"});
</script>

03 . ラインで送るボタンのユーザフロー

１．ユーザが「LINEで送る」ボタンをタップ
２．LINEがインストールされていればLINEが起動
３．シェア先を選択（トークで友達に送るor自分のホーム（TL）に送る）
４．送信

送る側も難しい操作なしに紹介したい記事のタイトルとURLをLINEで送ることができます。画面はこんな感じになりますが、LINEをインストールしていればすぐには送信されませんので一度タップしてみてください。

04 . LINEのシェアに期待

この「LINEで送る」、設置側とすれば今後のアクセス流入が気になるところですね。Twitterやはてななどのシェアに比べ友人度合いがよりリアルに近いため、リンクも信頼性の高いURLとしてクリックしてもらいやすくなります。

Facebookでシェアされやすい記事、Twitterでシェアされやすい記事と同様にLINEで送りやすい記事ってのも出てきそうですね。