WordPressに「Lineで送る」ボタンを設置してみた(賢威6.1対応)

この記事は約4分で読めます。

  • LINEで送る

lineで送るボタン設置

Lineで送るボタンが公式から正式発表されて1年以上経過しました。
ようやく、当ブログにも「Lineで送る」ボタンを設置しました。

Lineでどれほど共有されるかは定かではないですが、
設置することで、より共有しやすくなるので置いておきます。

A:「なになにそのページ~?」
B:「待って、今Lineで送るよ~!!」
B:「…って、このページ『Lineボタン』ねーじゃん!!」
B:「後で送っておくね…(めんどくせぇ)」
A:「いや、いいよ。ありがとう…」

こんな会話がどこかで繰り広げられているとかいないとか。

Lineで送るボタンの設置は2手順(+1)で完了

Lineで送るボタンの設置方法は至って簡単です。
WordPress用のコードもLine公式で用意してくれているので、貼りたい位置に貼り付けて終わり!

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

画像を取得してアップロード

lineで送るボタン設置

Lineボタンは、他のSNSとは異なり自サーバーに画像を取り込む必要があります。
ダウンロード用の直リンクも貼っておきますので、画像をダウンロードしてください。
Lineボタン画像直リンク

lineで送るボタン設置

zipファイルなので解凍して、使用したいファイルを「メディア > 新規追加」から追加しましょう。
その画像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>

変更するのは以下の3箇所です。

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

ボタン幅・高さは使用する画像にあわせて変更してください。

画像にスタイルが適用される場合は打ち消し

当ブログでLineボタンを設置した際に、小さな問題が起こりました。
他のソーシャルボタンと違って、自サーバーに配置した画像を使うので、
当ブログの画像スタイルがそのまま適用されてしまいました。

img{
	border: 1px solid #ddd;
	padding: 0.2em;
	background: #F0F0F0;
}

このように、画像に枠線や隙間を設定していました。
これによりLineボタンにも適用されてしまい、他のソーシャルボタンと合わなくなってしまいました。

というわけで、CSSによりLineボタンのみ画像のスタイルを打ち消しています。

.sb-line img{
	border: none;
	padding: 0;
	background: none;
}

Lineボタンのアンカータグを「sb-line」で囲み、スタイルを全てなくしました。
ちょっとした問題(?)ですので、同じ悩みのある人はやってみてください。

賢威6.1にコードを貼り付ける場合のひと工夫

lineで送るボタン設置

賢威6.1でLineで送るボタンを貼り付ける場合にひと工夫します。
賢威6.1では、ツイートボタンやいいね!ボタンがデフォルトで追加されているので、
それに合わせた形で、Lineで送るを追加します。

まずは、リンクタグを追加します。
「外観 > テーマ編集」から「social-button.php」を開きます。

<ul class="sb m20-b">
<li class="sb-tweet"></li>
<li class="sb-hatebu"></li>
<li class="sb-gplus"></li>
<li class="sb-fb-like"></li>
<li class="sb-line"><a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/linebutton_88x20.png" width="88" height="22" alt="LINEで送る" /></a></li>
</ul>

6行目にLineで送るボタンを追加しました。
JavaScriptの設置もないので、これで完了です。

後は、友達と共有したくなる記事をどんどん書いていきましょう!!

  • LINEで送る

コメントを残す

このページの先頭へ