プラグインなしでSNSのシェアボタンを設置するスニペット

2021年7月14日2021年9月13日 5分

今や、ほとんどのブログには標準搭載されているSNSのシェアボタンですが、一部のWordPressテーマでは搭載されておらず、いざ設置しようと思うとプラグインを入れたりと、面倒だったりします。

この記事は、そんなプラグインなしでSNSのシェアボタンを設置する方法について、

シェアボタン設置後のデザインサンプル。
シェアボタン設置の3つの手順と方法。
コピペ用コード一式の解説。

の内容です。

プラグインなしで、SNSシェアボタンを簡単に設置する方法について興味ある方は、是非最後までご覧ください。

デザインサンプル
設置と実装の手順
コピペ用コード一式
ちょっとしたコードの解説
- PHP：target=”_blank”
- CSS：FontAwesomeとはてブのアイコン

デザインサンプル

早速デザインサンプルです。

左から順にTwitter・Facebook・はてなブックマーク・LINE・Pocketの5つで、各ボタンは設置したページのURLをシェアしてくれる仕様です。

かかかず

デザインは、完全にSANGOのシェアボタンですね・・・。

設置と実装の手順

SNSシェアボタンの設置手順についてです。主に3つのSTEPで設置が完了します。

PHPのショートコード用のファイルを作る

WordPressの記事ページや、固定ページなどの投稿画面からは、PHPを記述しても出力することができません。

その為、以下のコードを使って、PHPのショートコード用のファイルを作る必要があります。

PHP

<ul class="snsshare">
	<li class="twitter"><a href="http://twitter.com/share?text=<?php echo urlencode(the_title_attribute('echo=0')); ?>&url=<?php the_permalink(); ?>" rel="nofollow" target="_blank"><i class="fab fa-twitter"></i>Twitter</a></li>
	<li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank"><i class="fab fa-facebook"></i>Facebook</a></li>
	<li class="hatena"><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>"  rel="nofollow" target="_blank"><i class="fa fa-hatena"></i>はてブ</a></li>
	<li class="line"><a href="https://social-plugins.line.me/lineit/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank"><i class="fab fa-line"></i>LINE</a></li>
	<li class="pocket"><a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" rel="nofollow" target="_blank"><i class="fab fa-get-pocket"></i>Pocket</a></li>
</ul>

PHPのショートコード用のファイルの作り方は、以下の記事を参考にして作りましょう。

関連記事プラグインなしでページ内にPHPを読み込む方法

CSSをコピペ

PHPのショートコード用のファイルが出来たら、次にCSSをコピペします。

CSS

/* SNS */
.fa-hatena:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold
}
ul.snsshare {
    border: none;
    list-style: none;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0;
}
ul.snsshare li {
    width: 20%;
    text-align: center;
    transition: 0.3s ease-in-out;
    font-size: 0.8rem;
}
ul.snsshare li i {
    display: block;
    font-size: 2.2rem;
}
li.twitter a {
    color: #39b4ff;
}
li.facebook a {
    color: #3a8df7;
}
li.hatena a {
    color: #45b5f7;
}
li.pocket a {
    color: #ff7b7b;
}
ul.snsshare li a {
    text-decoration: none;
}
ul.snsshare li:hover {
    opacity: 0.7;
}
@media screen and (min-width: 768px) {
/* ここにPC用スタイルを記述） */
ul.snsshare {
    padding: 0 40px;
}
}

ショートコードで設置

設置したいページに、STEP.1 で作ったショートコードを使って設置をします。

STEP.1 の通りにいくと、call_php file='●●●●●' で、●●●●●には.php を除いたファイル名の記述で完了です。

かかかず

ショートコードなので、ウィジェットなど好きなところに設置できます。

コピペ用コード一式

PHPと、CSSのコピペ用コード一式です。

PHPは、WordPressの関数を使っているのでWordPress専用のコードです。

このコードを、HTMLの静的なページで使う場合はPHPファイル内の a タグにある<?php the_permalink(); ?>の部分を、HTMLで設置するURLに書き換えれば使えます。

コードを表示する

PHP

<ul class="snsshare">
	<li class="twitter"><a href="http://twitter.com/share?text=<?php echo urlencode(the_title_attribute('echo=0')); ?>&url=<?php the_permalink(); ?>" rel="nofollow" target="_blank"><i class="fab fa-twitter"></i>Twitter</a></li>
	<li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank"><i class="fab fa-facebook"></i>Facebook</a></li>
	<li class="hatena"><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>"  rel="nofollow" target="_blank"><i class="fa fa-hatena"></i>はてブ</a></li>
	<li class="line"><a href="https://social-plugins.line.me/lineit/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank"><i class="fab fa-line"></i>LINE</a></li>
	<li class="pocket"><a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" rel="nofollow" target="_blank"><i class="fab fa-get-pocket"></i>Pocket</a></li>
</ul>

CSS

/* SNS */
.fa-hatena:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold
}
ul.snsshare {
    border: none;
    list-style: none;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0;
}
ul.snsshare li {
    width: 20%;
    text-align: center;
    transition: 0.3s ease-in-out;
    font-size: 0.8rem;
}
ul.snsshare li i {
    display: block;
    font-size: 2.2rem;
}
li.twitter a {
    color: #39b4ff;
}
li.facebook a {
    color: #3a8df7;
}
li.hatena a {
    color: #45b5f7;
}
li.pocket a {
    color: #ff7b7b;
}
ul.snsshare li a {
    text-decoration: none;
}
ul.snsshare li:hover {
    opacity: 0.7;
}
@media screen and (min-width: 768px) {
/* ここにPC用スタイルを記述） */
ul.snsshare {
    padding: 0 40px;
}
}