WordPress サイトに「LINEで送るボタン」を設置する方法

LINE公式サイト

無料通話・メールアプリ LINE(ライン)

LINE は特に日本で人気

こちらの記事によれば日本での LNE アプリの普及率は70%(!)を超えているそうです。

2013年4Q最新版、世界のソーシャルメディア・アプリ勢力図 〜 WhatsApp, WeChat, LINE など新興勢力が急伸 [in the looop]

こうやって見てみると日本国内での利用率は多すぎな感じがしますね。他の国でほとんど利用されていない現状を考えると、日本の特殊事情が浮き彫りになっているデータとして興味深いです。

知り合いの大学生に聞いても、ほぼ全員が LINE で家族・友人・知人と連絡を取っていますし、理由を聞いてみたら「無料」「簡単」「スタンプが使えて楽しい」「ゲームや企業とのコラボなどがある」といったことなど、しばらくはこの人気が衰えることはないのかとおもいます。

「LINEで送るボタン」を設置するメリット

2013年11月25日の公式発表では、世界での利用者数が3億人を突破したようです。

LINE、登録ユーザー数が世界3億人を突破

【LINE】LINE、登録ユーザー数が世界3億人を突破

これだけ利用されているのですから、LINE 用のシェアボタンを設置しておくと、LINE 経由で訪問してくれる方がいるかもせん。

「LINEで送る」ボタンというのは、スマートフォン用のWebページやアプリから、LINE で情報を簡単にシェアできるボタンのことです。

若い人たちを中心に LINE が人気なんだから、若い人向けのサイトであれば設置しておく必要があるでしょう。できるだけ多くの若い人にシェアしてもらいたい記事や、宣伝の場合にはなおさらです。

また、モバイルファーストの考え方が重視されているこの頃では、PC からのウェブページへのアクセスと、スマートフォンで訪問してくれる人の比率がほぼ同じくらいでもあります。スマートフォン向けのアプリに合わせたシェアボタンを、あらかじめ設置しておくことも考えておかないといけませんね。

(当ブログでの必要性はいまのところそんなにありませんが、実験的に設置しています。)

WordPress への設置手順

設置はこちらのページから行います。

「LINEで送る」ボタン設置方法ページ

設置方法|LINEで送るボタン

はじめににスマートフォン用のボタン設置手順が示されていますが、もうすこし下の「技術仕様」と書かれたあとが、Web サイト用の設置手順です。

ソースコードの取得

「技術仕様 3 記述例」のところに WordPress 用のコードがあるので、こちらをコピー&ペーストします。WordPress 用の設置コードと、他の CMS で作ったサイト用とでは違うことがあるので、ご注意ください。

「LINEで送るボタン」設置コード

コード内にページに関係のない情報を追加すると「ガイドライン」に抵触する可能性があるので、そのまま利用してください。

「LINEで送るボタン」用画像

このままでは、リンクは貼れても、画像が表示されません。「4 デザイン」の「ボタン画像をダウンロード」をクリックして、こちらを利用します。

「LINEで送る」ボタン設置用画像

自作したボタンの使用は禁止されているので、ご注意ください。当ブログでは右端のボタンを利用しています。

あとは画像をアップロードし、URL・幅・高さを指定すれば完了です。

Web ページ高速化へのちょっとした対策

ちなみに、Webページ高速化へのちょっとしたコツとして、ダウンロードした画像(PNG)のファイルサイズを圧縮しておくと、表示速度がほんのちょっとだけ改善されます。体感ではわからないレベルだとおもいますが、少なくとも PageSpeed Insights や GTmetrix などで指摘されることがなくなるので、おすすめです。

もちろん、これはテーマ内の画像すべてにいえることですので、たとえば配布されたテーマを使っている方でも、元から用意されている画像サイズを圧縮しておくといいでしょう。

たとえば、以下の2つのサイトは多くの方が利用しています。

TinyPNG – Compress PNG images while preserving transparency

JPEGmini – Your Photos on a Diet!

ローカル環境にファイル圧縮ソフトがあれば、それを使ってもいいですね。

LINE 関連書籍

さいごに LINE についての書籍を紹介しておきます。

 

 

関連記事

プラグインなしで WordPress サイトにソーシャルボタンを設置する方法

ソーシャルボタンを作るの備忘録 各種ソーシャルボタンの作成手順をまとめました。いろんなところで解説されている内容とほとんど同じです。自分が忘れないようにするためと、ひとつのページにまとめておくと、あとで修正するときに便利だからメモの代わりに…

Twitter Cards をプラグインなしで設定してみました:Twitter カードアナリティクスも使えるようになった!

Twitter Cards とは? 「Twitter Cards」というのは、ふだんのTwitter投稿で表示されるスペースの下の部分に、設定した説明内容を追加するサービスです。たとえばサイト名や紹介文や画像などを入れることができます(リッ…

PageSpeed Insights で「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript / CSS を排除する」と提案されたときの修正方法

Google Developer では無料サービスの1つとして「PageSpeed Insights」という「ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための修正方法を提案してくれるツール」が提供されています。 Pag…