「LINEで送る」ボタンの設置方法 (WordPressでの簡単分岐方法付き)
本日、公式の「LINEで送る」ボタンが公開されました。
現在はスマートフォン限定ですが、現在とてつもないシェアを持っているLINEとの連動はしておいたほうが良いかもしれませんね。
設置方法を簡単にご紹介します。
なお、上述のとおり、現在はスマートフォン限定のため、例えばPCからこのボタンが押されてしまうとLINEのトップページに飛ばされてしまいますので、ここではWordPressで1行で分岐対応できる方法もご紹介したいと思います。
設置方法
以下のタグで設置が可能です。
<a href="http://line.naver.jp/R/msg/text/?[メッセージ欄に入るエンコード(UTF-8)した任意文字列]"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>
WordPressのテンプレートに記述する場合は、下記のように関数を呼び出すことによって、自動的にページタイトル・URLをセットできます。
<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>
ボタン画像については、 こちら からダウンロードできます。
WordPressでスマートフォンのみに表示させる
WordPressでは、バージョン3.4から、PC用サイトとスマートフォン用サイトを振り分ける条件分岐関数「wp_is_mobile」が実装されました。
3.4以降をご利用の方は、以下のタグで「LINEで送る」ボタン設置タグを囲むことにより、スマートフォンでアクセスされた場合のみ「LINEで送る」ボタンが表示されるようにすることができます。
<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>[スマートフォンで表示させるコンテンツ]<?php endif; ?>
「LINEで送る」ボタンの場合は以下のようになります。
<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?><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><?php endif; ?>
この「wp_is_mobile」関数は、今回の用途に限らず様々な場面で使用できるかと思いますので、覚えておいて損はないはずです。
この投稿が何かしらのお役に立てれば何よりです。
