ブログにLINEで送るボタン（公式）を設置する方法

another-hotaka 2012年12月22日

[PR]

LINEで送るボタンの公式設置方法をNHN Japanさんが公開しました。

すでに非公式のやり方で設置していたのですが、公式に発表されたとなれば取り替えた方がいいでしょうから、公式のやり方で設置してみようと思います。

[PR]

ボタン設置にあたってのガイドラインはこちらになります。ざっと目を通しましょう。特段に妙な表現もなく、常識的な内容だと思います。
ボタンを設置した時点でこのガイドラインに同意したと見なされることになります。
ガイドライン｜LINEで送るボタン

このブログはwordpressで作ってますので、wordpress用のコードを使います。
[sourcecode language=”plain”]<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>[/sourcecode]

ボタンに使用する画像をダウンロードします。以下のリンクから無料で手に入ります。
ガイドライン

基本的にガイドラインに沿って作成する必要がある以上、この公式が配布する画像以外は使えません。使ったらガイドライン違反になるのでご注意を。しかし60 x 60のサイズの画像がないのが個人的にショックである。

このボタン、サイズは変えてもいいんだろうか。よくわからないので変えないでおこうか。

とりあえず画像は40×40のものを使用することにしました。

使用するアイコンを決めたら、ブログのサーバーにアップしておきましょう。

そして画像のURLを上述のコードの『ボタン画像のURL』の箇所に挿入。ボタンサイズを正しく入力して完了。完成したコードは以下。
[sourcecode language=”plain”]<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="http://another.hotakasugi-jp.com/wp-content/uploads/2012/12/linebutton_40x40.png" width="40" height="40" alt="LINEで送る" /></a>[/sourcecode]

そして完成品がこれ。うーん、だから60×60にしたかったのだが。。。

まあ、しょうがないかな。

ついでにモバイルのテーマにもボタンを設置します。モバイルとデスクトップで違うテーマを当ててるんで、このブログ。
使うコードは一緒ですが、モバイルなのでボタンを小さいものに変えます。
細長い86×20のモノにしてみましょうか。

今度はこういうコードになる。
[sourcecode language=”plain”]<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="http://another.hotakasugi-jp.com/wp-content/uploads/2012/12/linebutton_86x20.png" width="86" height="20" alt="LINEで送る" /></a>[/sourcecode]

結果こうなりました。ちょうどいいかな。