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

くりりん

2016/07/11

見つけた記事をLINEでシェアできるボタン「LINEで送る」の設置方法

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

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

LINEで送るとは?

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

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

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

設置方法

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

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

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

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

qam_01

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

qam_02

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

qam_03

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

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

qam_04

「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で確認して見たところ、きちんと表示がされていました!

qam_05

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

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

まとめ

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

コーディング業務のご依頼、ご相談の詳細についてはこちらから

最後までお読みいただき、ありがとうございました。

よろしければシェアしていただければ幸いです。

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

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ