WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >サービス

最近ではSNSの利用者の増加に伴い、サービスによってはシェアすることができるものが増えてきました。
代表的なものだと、TwitterやFacebookなどがありますが、今回はLINEでシェアができる「LINEで送る」の設置方法について紹介します。

LINEで送るとは？

「LINEで送る」はWebサイトをLINEを用いて友だちに共有できる仕組みです。FacebookやTwitterの様に複数人にシェアするのではなく、個人に向けて送る事ができるのが特徴です。
サイト上に設置された「LINEで送る」ボタンをタップするとLINEアプリが起動し、送信相手である友だちを選択することが可能で、もちろんグループに送信することもできます。

タイムラインに投稿するには友だち選択画面の下部の「ホームに投稿する」を選択します。タイムラインに投稿すると友だち全員にシェアすることができます。

それでは早速、TwitterやFacebookのシェアボタンのようにLINEのシェアボタンも設置してみましょう！

設置方法

まずLINEの公式サイトに載っている方法を見てみましょう。

１．LINE公式の「設置方法」ページへアクセス

LINE公式サイトに生成方法が記述されているのでまずはアクセス。
http://media.line.me/howto/ja/

２．次に、ボタンのタイプを選択します。
表示させたいサイトに合うものを選びましょう。

３．次はURLの設定です。
「ページタイトルとURLを使う」もしくは「直接入力」を選択します。
「ページタイトルとURLを使う」で問題ないサイトであればそちらで大丈夫です。
直接指定する場合は、リンクをコピーして貼り付けましょう。

４．最後に表示されたコードをコピーして、表示させたい場所へ貼り付けるだけで完了です！

PCでは表示されない仕様に気をつけよう

先ほど生成されたコードをコピーして貼り付けてPCから確認して見たところ…

「LINEで送る」のボタンが表示されていません！
大丈夫です。実は「LINEで送る」ボタンはPCで表示されない仕様になっている為です。

先ほど貼ったコードの中身を見てみましょう。

<script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
<script type="text/javascript">
new media_line_me.LineButton({"pc":false,"lang":"ja","type":"a","text":"http://www.i-cept.jp/test/qam_lead/html/share.html","withUrl":true});
</script>

3行目にある、「new media_line_me.LineButton({“pc”:false,”lang”:”ja”,～～」という記述があり、「”pc”:false」という記述でPCでは見えないようになっています。
ここで、falseになっている部分をtrueにするとPCでは表示されますが、指定したリンクでシェアすることは出来ず、LINEの公式サイトに飛んでしまう為、ここは触らずそのままにしておいたほうが良さそうです。

PCで表示がされない仕様の為、確認する際にはタブレット端末やスマートフォンから見てみましょう。
iphoneで確認して見たところ、きちんと表示がされていました！

ここから「LINEで送る」ボタンをタップしてみると、「LINEアプリで開いて続行して下さい。」と、アプリへと誘導されます。
※すでにアプリが入っている場合、そのまま送信先を選択する画面に飛びます。

これで送りたい人へwebページのシェアをすることができます。

まとめ

シェアボタンが増えてきましたが、サービスによってやり方は様々です。
LINEは特に利用者も多いので、是非設置して試してみてください。