「LINEで送る」ボタンの設置方法 (WordPressでの簡単分岐方法付き)

「LINEで送る」ボタン

本日、公式の「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」関数は、今回の用途に限らず様々な場面で使用できるかと思いますので、覚えておいて損はないはずです。

この投稿が何かしらのお役に立てれば何よりです。

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

このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
コメントを残すには、Twitter、Facebook、Google、OpenID、Disqus の、いずれかのアカウントでの認証が必要となります。(各アイコンか「コメントする」ボタンを押すと認証ウィンドウが開きます)