diwao日記

Web、ガジェット、仙台のお話

スマホから見た時にだけ「LINEで送るボタン」を表示させる方法(WordPress用)

ここ最近LINEの勢いがハンパないですよね。スタンプだけじゃなくてゲームも大人気で、もはや完全にインフラ状態。スマホ利用者の中では使っていない人を探す方が難しいくらいなのではないでしょうか。そんなLINEから、ブログやサイトに設置できる「LINEで送る」ボタンが公開されたので、このブログにも設置してみました!

ちょっと手を加えてスマホで見た時だけ表示されるようにしたので、メモかねて設置方法をご紹介。

LINEで送るボタンとは

Webサイトやブログの情報を簡単にLINEでシェアできるボタン。これによって、ユーザーは気に入った情報を友達や家族に気軽にシェアすることが可能となります。また、サイト運営者としてもLINEユーザーからの集客が期待できる。双方にメリットのあるボタンというわけですな。詳しくは以下のページをご覧ください。

作業にあたって

今回、LINEで送るボタンを設置するにあたり、以下のふたつの記事を参考にさせていただきました!

スマホから見た時だけ表示するという部分は「アナザーディメンション」さんの記事。

LINEで送るボタンの設置方法については「あかめ女子のwebメモ」さんの記事。

どちらもすごく分かりやすい記事でした!ありがとうございます。

設定方法

※ご注意

LINEボタンを設置するだけならコピペしてちょちょいと手直しするだけなので簡単なのですが、スマホで見た時だけ表示させるためにはfunctions.phpというデリケートな部分をいじるので、必ずバックアップを取ってから行いましょう(>Д<;) なお、作業は必ず自己責任でお願いします。環境によっては正常に動作しない可能性もありますのでご了承ください。また、この作業によって何かトラブルが発生しても一切責任を負いかねますので、その認識でお願いします。

作業手順

まずはfunctions.phpに以下の記述を追加します。これはスマホから見たときとPCから見たときの表示を切り替えるための下準備みたいなものです。

function is_mobile(){
  $useragents = array(
    'iPhone', // iPhone
    'iPod', // iPod touch
    'Android', // 1.5+ Android
    'dream', // Pre 1.5 Android
    'CUPCAKE', // 1.5+ Android
    'blackberry9500', // Storm
    'blackberry9530', // Storm
    'blackberry9520', // Storm v2
    'blackberry9550', // Storm v2
    'blackberry9800', // Torch
    'webOS', // Palm Pre Experimental
    'incognito', // Other iPhone browser
    'webmate' // Other iPhone browser
  );
  $pattern = '/'.implode('|', $useragents).'/i';
  return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

万が一functions.phpをいじったあとに画面が真っ白になってしまった時は以下の記事を参考に復旧を試みてください。焦ると思いますが落ち着いて。

[WordPress]functions.phpの修正方法

続いてLINEボタンの設置です。テーマを編集し、設置したい場所に以下のコードを追加します。

<!-- LINEボタンここから-->
<!--スマホで見た時の表示 -->
<?php if(is_mobile()) { ?>
<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank"><img src="ボタン画像のURL" width="ボタン幅" height="ボタン高さ" alt="LINEで送る" /></a>
<!--スマホで見た時の表示終わり -->
<!-- PCで見た時の表示 -->
<?php } else { ?>
<!-- 何も表示しない -->
<?php } ?>
<!-- PCで見た時の表示終わり -->
<!-- LINEボタン終わり -->

コード内の「ボタン画像のURL」および「ボタン幅」、「ボタン高さ」は自分の環境に合わせて書き換えてください。ボタンの画像については、あらかじめ以下の公式サイトで入手し、アップロードしておくといいでしょう。

作業自体はこれで終了です。

ちなみに、わたしの場合はこんな感じの記述になっております。場所は記事の終わり部分に設置しました。

<!-- LINEボタンここから-->
<!--スマホで見た時の表示 -->
<?php if(is_mobile()) { ?>
<div style="margin:10px 0px;">
<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank"><img src="/image/post/2012/12/linebutton.png" width="88px" height="20px" alt="LINEで送る" /></a>
</div>
<!--スマホで見た時の表示終わり -->
<!-- PCで見た時の表示 -->
<?php } else { ?>
<!-- 何も表示しない -->
<?php } ?>
<!-- PCで見た時の表示終わり -->
<!-- LINEボタン終わり -->

表示を確認してみよう

では、早速表示を確認してみましょう。まずはPCでチェック。何も表示されませんね。

line_button005

続いてiPhoneでチェック。こちらにはちゃんと表示されています!

line_button002

なお、iPhoneから見なくても、ブラウザのユーザエージェントというものを変更することで、iPhoneから見た表示を確認することもできます。Safariだったら「開発」というメニューから変更可能。

line_button001

動作を確認してみよう

続いて動作確認いってみましょう!iPhoneから先ほどのボタンをポチッと押してみます。するとLINEが開き、投稿欄に記事のタイトルとURLが自動的に投稿欄に追加されました(※LINEのアプリは必要です)

line_button003

タイムラインに投稿してみた。無事に動いてますね。大成功。

line_button004

おわりに

ちょっと一手間かかりますが、PCからLINEで送るボタンを押しても何も起こらないみたいですからね。無意味なものは表示しないにこしたことはないでしょう。これでこのブログからもLINEで送り放題になりました!読んでいて「良いね♪」と思う記事があったらぜひLINEで友達に教えてあげてください。

LINE
無料
(2016.11.18時点)
posted with ポチレバ
広告