「LINEで送る」ボタンをWordPressに(しかもスマホでのみ)設置・表示させる方法

  • このエントリーをはてなブックマークに追加
  • 0
ソーシャルメディア

2015.6.26 追記

LINEで送るボタンのデザインが変わっていたようなので、最新のものに解説画像などを変更しました。

ものすごい勢いでユーザー数を増やしている LINE。その LINE が公式のソーシャルメディアボタンをリリースしました。

それがこちら・・・

LINEで送るボタン!

LINEで送るボタンデザイン一覧

設置に関してはこちらに記載されています。とても簡単そうです。WordPress 向けのタグもちゃんと用意されていて、とてもありがたいですね。

早速設置してみようと思ったのですが、どうもスマホ対応のみのようです。スマホでサイトやブログを見ている人がこの「LINEで送るボタン」を押すと、記事タイトルや URL を簡単にシェアすることができるというわけです。

しかし、PC で閲覧している人が「LINEで送るボタン」を押してしまうと、LINE の公式サイトへとジャンプしてしまいます。つまり、せっかく見に来てくれているユーザーを、自分のブログから離脱させてしまうのです。なので、設置するのはいいけど、スマホでは表示・PC では非表示にした方がいいなという見解に至りました。

まず基本:LINEで送るボタンをWordPressに設置する方法

まずは LINEで送るボタンを設置する手順を示しておこうと思います。

(1) ボタン画像をダウンロード&アップロード

「LINEで送るボタン」の画像は自分のサーバーに自分で設置する必要があります。まずは、こちらのページの最下部から、ボタンの画像フォルダをダウンロードしてください。【linebutton】というフォルダがダウンロードできると思います。

中には画像ファイルが 5 種類入っています。

(2) ボタン画像をアップロード

ダウンロードした画像は、フォルダ(linebutton)ごとサーバーにアップしましょう。どこにアップしてもいいんですが、子テーマファイルに images フォルダを用意してその中に入れるのがいいと思います。

wp-content

∟ themes

∟ twentyfifteen(親テーマ)

∟ twentyfifteen-child(子テーマフォルダ)

∟ images

∟ linebutton( ← フォルダごとアップロード)

∟ 5つの画像ファイル

(3)「LINEで送るボタン」タグの編集

LINEで送るボタンの WordPress 用のタグは、以下のようになっています。

任意で指定するのは 3 つあります。

  • ボタン画像の URL
  • ボタン画像の幅
  • ボタン画像の高さ

URL は絶対パスで指定。幅や高さは使いたい画像ファイル名にある数字をそのまま当てはめれば大丈夫です( px などの単位は不要)。

(4) テンプレートに「LINEで送るボタン」を貼る

次に WordPress のテンプレートに「LINEで送るボタン」のタグを書き込みましょう。どのテンプレートに書き込むか悩むところですが、今回は【content.php】に書き込みました。他の候補としては、【content-single.php】や【comments.php】などが上げられます。

詳しくはこちらを参照ください。

どこに「いいね!」ボタンなどのソーシャルプラグインのタグを埋め込めばいいのか?
「いいね!」ボタンの設置方法をメモしようと思って、前回の記事を途中まで書いたのがもう 2 ヶ月くらい前の話・・・。ずいぶん間が空いてしまったよ・・・。 悪い癖が出てしまった。 設置の仕方に関して前回の続きから書いていきたいと思います。 【 手順 】 Facebookのデベロッパー(開発者)として登録してアプリ...

スマホで閲覧している人にのみ「LINEで送るボタン」を表示させる条件分岐分岐タグの使い方

さて、普通の設置方法が分かったところで、次は条件分岐タグを使ってスマホで見ている場合のみ「LINEで送るボタン」を表示させたいと思います。PC で見た場合は非表示なるというわけです。

条件としては・・・

もし、スマホでアクセスされている場合は表示、それ以外は非表示

という指定ができれば OK ですね。

PCサイトとスマートフォン用サイトを分ける条件分岐タグを発見

スマートフォン用のコンテンツを指定できる条件分岐タグを探してみたところ、やはりありました!さすがです!

そのタグはこちら

ただし、WordPress のバージョンが 3.4 以降ということで、使用する場合はバージョンに気をつけてください。

スマホ向け条件分岐タグの設置例

「LINEで送るボタン」をスマホ向けサイトでのみ表示されるようにする、具体的なソースコードはこちらです。

if の後に function なんたらかんたらと、なんだかややこしい事が書いてありますが、参考にさせて頂いたサイトに書かれていた通りのやっておりますので、詳しいことは分かりません。ただ、WordPress のバージョン 3.4 以前バージョンであったとしてもエラーにならない書き方のようです。

実際にどのように表示されているのか・・・?

条件分岐タグを使えばご覧の通り、

LINEで送るボタンのPC表示とスマホ表示

PC で見たときは「LINEで送るボタン」は表示されませんが、スマホで見ているときはちゃんと表示されています。

ちなみに、スマホ向けの表示を WordPress のプラグイン WPtouch で設定している場合は、テンプレートファイルに書き込んだソーシャルプラグイン関係がうまく表示できません。

この点は解決できませんでしたが、EZ zenback などを使って組み込むと上手くいくようです。ただし、その場合は条件分岐タグが使えなくなるので、スマホ用の CSS で表示・非表示を変えるしかないのかな〜・・・と思います。

ぜひ試してみてください。

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

無料メール講座

WordPress を活用している
社長、フリーランス、ウェブマーケターのための

ホームページ制作の 3 つの間違い
売上を上げるフレームワークを無料公開中……

無料メール講座

もっと楽に、簡単にホームページを作れないものだろうか?
もっと楽に、簡単にインターネットから集客できないものだろうか?
もっと楽に、簡単にインターネットから売上を上げられないものだろうか?

そんなことを思ったことがある方のために、このページを用意しました。

私たちは、ウェブマーケティングに携わる中で、多くの人が陥っているある「勘違い」に気づきました。

その勘違いとは・・・

コメントをどうぞ

メールアドレスが公開されることはありません。