STORK(ストーク)のSNSボタンに「LINEで送る」を追加したのでどうぞシェアしてください

Stork line botton3このブログは「STORK(ストーク)」というWordPressの有料テーマを使って運営しています。

テーマのカスタマイズをしなくてもめちゃくちゃシンプルで見やすいのでに気に入ってるんですが、SNSボタンの「Google+ボタン」は使ってる人いない説があるので、ユーザー数の多いLINEの「LINEで送る」ボタンに変更することにしました。

ちなみにSNSボタンってこういうやつです。
Stork line botton

STORKのSNSボタンを「LINEで送る」ボタンに変更する手順

  1. LINEのアイコンフォントを用意する
  2. 「Google+」ボタンと「LINEで送る」ボタンを入れ替える
  3. CSSで調整する

こんな手順で変更していきます。

LINEのアイコンフォントを用意する

アイコンフォントで有名なFont Awesomeにいつの間にかLINEアイコンが追加されていたので、これを使わせていただきます。

line | line | Font Awesome

アイコンフォントの使い方はサルワカさんのこの記事が参考になります。

「Google+」ボタンと「LINEに送る」ボタンを入れ替える

STORKのSNSボタンのコードが書かれているこの2つのファイルを編集していきます。

  1. parts_sns_short.php:ページ上部のSNSボタン
  2. parts_sns.php:ページ下部のSNSボタン

parts_sns_short.phpの25行目、parts_sns.phpの30行目にあるこのコードを

<li class="googleplus">
<a href="https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo get_permalink() ?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;" rel="tooltip" data-toggle="tooltip" data-placement="top" title="GooglePlusで共有"><i class="fa fa-google-plus"></i><span class="text">Google+</span><span class="count"><?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></span></a>
</li>

以下に書き換えます。

<li class="line">
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank"><i class="fab fa-line"></i><span class="text">送る</span></a>
</li>
はじめ
コピペでOK!

CSSで調整

おなじみのラインカラーの緑色をボタンに設定します。

/* LINE */
.sns .line a {
	background:#25af00;
	box-shadow:0 3px 0 #219900;
}
.sns .line a:hover {
	background:#219900;
}

完成

Stork line botton2
PCでもスマホでもちゃんとページのURLがシェアできるようになっているので、実際にボタンを押してシェアしてみてください。

まとめ

無事に「LINEで送る」ボタンを追加する事ができました。

Google+は海外では今でも活発に使われていますが、日本では全くと言っていいほど話題にならないSNSなので「LINEに送る」ボタンでどんどんシェアしてこのブログのアクセス数が伸びるといいですね。



Amazon JSをカスタマイズしてカエレバのような楽天のアフィリエイトリンクを表示させたり、デザインをカスタマイズをしてブックマークレットを改良したら使いやすくなった

2017.11.12

WordPressの表示速度改善!mixhostサーバーを使い始めたら絶対にやっておくこと

2017.07.15

hazilog.comへドメイン変更した理由とドメイン変更の手順をまとめてみた

2017.06.23

コメントを残す