2013年01月20日 category : Blog tags :

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

このエントリーをはてなブックマークに追加

line-send

”LINEの登録者数が1億人を突破!SNS対応にLINEを含めないわけにはいかない数値です。”

昨年末に技術者向けに公開されていた「LINEで送る」ボタンが一般公開されました。LINEの登録者数も1億人を突破したこともあり、ブロガーさんはTwitterやFacebookのシェアボタン同様に設置しておいたほうが良さそうですね。

一般公開ではボタンの種類を選んで吐き出されたHTMLコードを貼り付けるだけで設置できるようになっています。ブログのURLをLINEでシェア出来る「LINEで送る」ボタン、当ブログも早速導入してみましたので設置方法を紹介します。

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

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

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

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

line-01

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

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

line-02

line-03

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 . ラインで送るボタンのユーザフロー

1.ユーザが「LINEで送る」ボタンをタップ
2.LINEがインストールされていればLINEが起動
3.シェア先を選択(トークで友達に送るor自分のホーム(TL)に送る)
4.送信

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

line-04

04 . LINEのシェアに期待

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

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

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