【WordPress】プラグインなしでSNSシェアボタンを自作・設置する方法【CSSあり】

Twitter・Facebook・はてなブックマーク・LINE・Pocketの5つのサイトに対応したボタンです。

PHPコード

まずは、single.php内の表示したい部分に下のコードを貼り付けます。

<div class="sns-share-btn">
	<a class="btn-twitter" href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>" target="_blank"><i class="fab fa-twitter"></i><span class="sns-name">Twitter</span></a>
	<a class="btn-facebook" href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php echo get_the_title(); ?>" target="_blank"><i class="fab fa-facebook-f"></i><span class="sns-name">Facebook</span></a>
	<a class="btn-hatena" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>" target="_blank"><span class="sns-mark">B!</span><span class="sns-name">Hatena</span></a>
	<a class="btn-line" href="http://line.naver.jp/R/msg/text/?url=<?php the_permalink(); ?>" target="_blank"><i class="fab fa-line"></i><span class="sns-name">LINE</span></a>
	<a class="btn-pocket" href="http://getpocket.com/edit?url=<?php the_permalink();?>&title=<?php echo get_the_title(); ?>" target="blank"><i class="fab fa-get-pocket"></i><span class="sns-name">Pocket</span></a>
</div>

変えてはいけない部分はhref属性の中身だけなので、class名などは自由に変更してください。

CSSでデザインを調整

デザインを何パターンか用意しておきました。お好みで調整してください!

サンプル1

.sns-share-btn {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.sns-share-btn a {
	display: inline-block;
	padding: 10px 20px;
	color: #f7f7f7;
	font-size: 15px;
	font-weight: bold;
	transition: .2s;
}

.sns-share-btn a:hover {
	opacity: .6;
}

.btn-twitter {
	background-color: #1DA1F2;
}

.btn-facebook {
	background-color: #3C5A99;
}

.btn-hatena {
	background-color: #00A4DE;
}

.btn-line {
	background-color: #00B900;
}

.btn-pocket {
	background-color: #ee4056;
}

.sns-share-btn a i, .sns-mark {
	margin-right: 10px;
}

サンプル2

.sns-share-btn {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.sns-share-btn a {
	display: inline-block;
	padding: 10px 20px;
	margin: 2px;
	font-size: 15px;
	font-weight: bold;
	transition: .2s;
}

.sns-share-btn a:hover {
	color: #f7f7f7;
}

.btn-twitter {
	color: #1DA1F2;
	border: 1px solid #1DA1F2;
}

.btn-facebook {
	color: #3C5A99;
	border: 1px solid #3C5A99;
}

.btn-hatena {
	color: #00A4DE;
	border: 1px solid #00A4DE;
}

.btn-line {
	color: #00B900;
	border: 1px solid #00B900;
}

.btn-pocket {
	color: #ee4056;
	border: 1px solid #ee4056;
}

.btn-twitter:hover {
	background-color: #1DA1F2;
}

.btn-facebook:hover {
	background-color: #3C5A99;
}

.btn-hatena:hover {
	background-color: #00A4DE;
}

.btn-line:hover {
	background-color: #00B900;
}

.btn-pocket:hover {
	background-color: #ee4056;
}

.sns-share-btn a i, .sns-mark {
	margin-right: 10px;
}

サンプル3

.sns-share-btn {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.sns-share-btn a {
	display: inline-block;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: bold;
	color: #f7f7f7;
	margin: 3px 2px;
	position: relative;
	top: 0;
	transition: .2s;