LINEで送る ボタンをWordPress + WP Touchに設置する方法

WordPressに[LINEで送る]ボタンを設置しよう

当Axel Gamesはスマートフォンゲーム専用の情報サイトゆえ、当たり前ではあるのですが、既にアクセスの半数以上がスマートフォンorタブレットからとなっており、日に日にスマートフォンの比率が上がっています。

特にiPhoneからのアクセスが凄いです。
そこで、今更ではありますが、慌てて[LINEで送る]ボタンを設置しました。

Axel GamesはWordPressで動いており、かつスマートフォンサイトにはWP Touchを使用しています。なので、この環境での設置方法となりますが、非常に簡単なのでMTや無料ブログサービスでもすぐ設置できます。

まずはLINEの設置手順ページをチェック

■LINEで送る ボタン 設置手順

もの凄く丁寧に書いてあります。
他の説明サイトさんググる必要性もないくらいに。さすがですねえ・・・

なので、実際今更私が記事にする必要あんのかしら?と思ったりw

ボタン画像をダウンロードするのだ

上記ページの下段にあるボタン素材をダウンロードしましょう。
私は一番左の細長いヤーツを使いました。


Retina用に2倍のサイズで作ってあるんよ!とまで説明してくれています。
もう書くことないですw

画像をサーバーにアップ

使用するボタン素材をサーバーにアップします。
この記事では、独自ドメインでWordPressを使用している前提で書いてますので、画像アップはメディアメニューから行います。

アップできたらそのボタン画像自体のアップロードURLをコピペします。
※画像をアップした際のページ(パーマリンクURL)をコピペしないよう注意。

画像をアップしたメディア編集ページの右側に上記にように[ファイルのURL]が出ているのでこれをコピペね。

LINEで送るボタン用の埋め込みコード

WordPressのテンプレートに記述する場合

<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>

と、そのまま使える形で記載してくれています。

よって、[ボタン画像のURL]には先ほどコピペしたURLを、ボタンのwidthとheightは使用するボタン素材の1/2を記載します。
横に長いヤーツボタンなら、幅88x高さ20になりますね。

このコードをWP Touchテンプレートに貼る

WordPressでWP Touchプラグインを使っていれば、スマートフォンからのアクセスはWP Touchのテンプレートが表示されています。

で、この[LINEで送る]ボタンはスマートフォン専用なので、WP Touchテンプレートにだけ[LINEで送る]ボタンのコードを入れればいいことになります。

WP Touchテンプレート内のsingle.phpを編集する

FTPアプリで以下のディレクトリからsingle.phpをダウンロードします。
/wp-content/plugins/wptouch/themes/default

このsingle.php内で以下の記述を検索します。
<?php the_content(); ?>

ここが記事詳細ページ内の記事部分にあたりますので、[LINEで送る]ボタンを記事冒頭に置くなら上記記述の上側に、記事最後に置くなら上記記述の下に置けばOKです。

再度FTPで修正したsingle.phpをアップします。
これで最低限の設置自体はできたことになります。


現状のAxel Games画面です。
<?php the_content(); ?>の上にコードを置いただけの状態です。

ちょっとまだきちんと調整していないので、変なホワイトスペースありまくりですが・・
※キャッシュが効いてボタン表示がされない場合があるので、もしそうならsafariのキャッシュをクリアしてみましょう。

LINEで送るボタンを押すと…

LINEで送るボタンを押すと、LINEアプリが起動し「誰に送信するか」を選択します。
で、そのままトークで送れます。

デフォルトでは記事名とURLが挿入されるようになっています。

ブログには必須ボタンになるんだろうね

もう最近電車内でスマホ触ってる人を覗き込むと、
・LINE 3割
・パズドラ 3割
・その他ゲーム系 3割
・Facebook or Twitter 1割

みたいな感じで、めっきりメールをしてる人を見かけなくなったなあと。
※それにしてもパズドラ強えですw

面白い記事を見つけた時、誰かに伝えたい欲求がその伝えたい層によってTwitter,Facebook,LINEで分かれる気がしています。

不特定多数に気楽に：Twitter
知り合いだけどちょっと背伸びした(おめかしした)集団に：Facebook
ごく親しい身近な友人、家族：LINE
特にピンポイントで友人に特定の記事を伝える手段としてLINEは鉄板になりつつあります。
いいね!やメールでは無理or面倒ですからね。

このLINEで送るがどれくらい世間で利用されるのか注目です。