ワードプレスにブログ記事のSNSシェアボタンを自作で設置【コピペで簡単】

プログラミング

2019.06.10 2019.05.04

困ってる人

ブログの記事をSNSにシェアするボタンを作りたいんだけど
プラグインを使うと表示が遅くなったりするんだよなぁ
何か簡単に出来る方法ってないかなぁ？

こんにちは、ヨロと申します。

という事で今回は、こちらのブログでも使用中のプラグインなしで作るシェアボタンについて。

今回は「HTML」と「CSS」だけのパターンではなく「sns.php」を使うパターンを紹介。

今回作るのは、

Twitter

Facebook

Line

はてなブックマーク

の４つのシェアボタン

PCで見た場合

タブレットで見た場合

スマートフォンで見た場合

という事でまずは「sns.php」に書く内容から。

ワードプレスにブログ記事のSNSシェアボタンを自作で設置【sns.php】
ブログ記事のシェアボタンを自作で設置【CSS：デザイン部分】
ワードプレスにブログ記事のSNSシェアボタンを自作で設置【HTML部分】

ワードプレスにブログ記事のSNSシェアボタンを自作で設置【sns.php】

今回は「share」というクラス名の中にシェアボタンを入れてみました。

// sns.php

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>

<div class="share">
  <ul>
    <!--Twitter-->
    <li class="button twitter">
      <a href="//twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&t=<?php echo urlencode(get_permalink()); ?>&url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterでシェアする">ツイート</a>
    </li>
    <!--Facebook-->
    <li class="button facebook">
      <a href="//www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="facebookでシェアする">Facebook</a>
    </li>
    <!--Pocket-->
    <li class="button line">
      <a href="//timeline.line.me/social-plugin/share?url=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="LINEでシェアする">LINE</a>
    </li>
    <!--はてなブックマーク-->
    <li class="button hatena">
      <a href="//b.hatena.ne.jp/add?mode=confirm&url=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" data-hatena-bookmark-title="<?php the_permalink(); ?>" title="このエントリーをはてなブックマークに追加する">はてブ！</a>
    </li>
  </ul>
</div>

ブログ記事のシェアボタンを自作で設置【CSS：デザイン部分】

// CSS部分

.share {
	text-align: center;
	margin: 20px 0px 30px 0px;
}

.share li {
	padding: 10px 0px;
	border-radius: 5px;
}

.button {
	display: inline-block; /* ここで横並び */
	width: 24%; /* ボタン間の空白を作るためにmarginが入っているので25%だとボタンが端で折り返してしまう */
	margin-bottom: 5px;
}

.button a {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 1px;
}

.button:hover {
	opacity: 0.8;
}

.button:active {
	transform: translateY(3px);
	margin-bottom: 8px;
	border-bottom: none;
}

.twitter {
	background-color: #55acee;
	border-bottom: 3px solid #008fde;
}

.facebook {
	background-color: #315096;
	border-bottom: 3px solid #2c4373;
}

.line {
	background-color: #00c300;
	border-bottom: 3px solid #009d00;
}

.hatena {
	background-color: #008fde;
	border-bottom: 3px solid #16679e;
}