最近公式にリリースされたLINEで送るボタンについてちょっと仕事で調べる機会があったので今後のためにメモします。

公式の設置方法｜LINEで送るボタン にて記述例をコピペしたところ何やら変な動き？

記事上でLINEで送るボタンを押すと当然アプリが立ち上がるんですが、
LINEでの共有が終わったあとブラウザに戻ると、そこにはLINEのサイトが開かれていました。

まぁ何も不思議なことではなくて、公式にも

ボタンタップ後、LINEが起動する前にWebブラウザが表示されます。

とあるようにそういう仕様なので、LINEで送るボタンのaタグにtarget=”_blank”を指定してあげればとりあえずはOKです。

記述例

<a href="http://line.naver.jp/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.naver.jp%2F" target="_blank"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?$gt;%0D%0A<?php the_permalink(); ?>" target="_blank"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

これでよし :)

直接LINEアプリを開く方法

そもそもLINEのサイトを開かずにURLスキームで直接アプリを開く方法が以下のブログで紹介されていました。

参考：【WordPress】ブログに「LINEで送る」ボタンを付ける方法 ｜ しらさかブログZ

こっちのがもたつかないし便利ですね。さすがシラサカさん。
ただしこちらの場合アプリが入っていない端末では正常に動かないので注意。

LINEで送るボタン設置時の注意点

最後に注意点を。
ガイドラインにある通り、LINE側が用意した5種類のボタン画像以外の使用は認められていないようです。気をつけなくては。。

以上、霙でした。

参考：LINEで送るボタン｜メディア運営者の方へ

参考：ガイドライン｜LINEで送るボタン