WordPressでSNSシェアボタンを作るためのコードの書き方とCSSデザイン

2018年2月4日2021年11月28日

WordPressでオリジナルなSNSボタンを作りたい時の必要情報についてまとめておきます。

対象は、「Twitter」「FaceBook」「Google+」「Pocket」「はてなブックマーク」「LINE」です。

はにわまん

コピペしてお使いください！

SNSボタンリンクの作り方

コピー & ペーストで好きなテンプレートファイルに貼り付けてください。

Twitter

<a href="http://twitter.com/home?status=<?php echo urlencode(the_title_attribute('echo=0')); ?>%20<?php the_permalink(); ?>" target="_blank">Twitter</a>

FaceBook

<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank">FaceBook</a>

Google+

<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank">Google+</a>

Pocket

<a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" target="_blank">Pocket</a>

はてなブックマーク

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">はてなブックマーク</a>

LINE

<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>">LINE</a>

ちなみに、%0D%0Aは「改行」を表していいます。

ボタンのデザイン

せっかくなので、ボタンのデザインも調整していきましょう。以下のような見栄えになります。

Font Awesome 5というアイコンフォントを使っているので、まずはfont-awesome.min.cssを読み込む必要があります。
Font Awesomeの使い方はこちらを参考にしてください！
→ Font Awesome 5の使い方

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Getting Started | Font Awesome

<div class="sns">
 <ul>
	 <li class="twitter"><a href="http://twitter.com/home?status=<?php echo urlencode(the_title_attribute('echo=0')); ?>%20<?php the_permalink(); ?>" target="_blank"><i class="fab fa-twitter"></i></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-f"></i></a></li>
	 <li class="googleplus"><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank"><i class="fab fa-google-plus-g"></i></a></li>
	 <li class="pocket"><a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" target="_blank"><i class="fab fa-get-pocket"></i></a></li>
	 <li class="hatebu"><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank"><span>B!</span></a></li>
	 <li class="line"><a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank"><span>LINE</span></a></li>
 </ul>
</div>

.sns ul {
 overflow: hidden;
 margin: 0;
 padding: 0;
}
.sns li {
 float: left;
 width: 33.333333333%;
 list-style: none;
 padding: 4px 1%;
 box-sizing: border-box;
}
.sns li > a {
 padding: 16px 0;
 display: block;
 text-align: center;
 color: #fff;
 border-radius: 8px;
 text-decoration: none;
}
.sns li > a:hover {
 cursor: pointer;
}
.sns li.twitter > a {
 background-color: #1da1f2;
 border-bottom: #0387d8 solid 8px;
}
.sns li.facebook > a {
 background-color: #3b5998;
 border-bottom: #213f7e solid 8px;
}
.sns li.googleplus > a {
 background-color: #dd4b39;
 border-bottom: #c3311f solid 8px;
}
.sns li.pocket > a {
 background-color: #ef4056;
 border-bottom: #d5263c solid 8px;
}
.sns li.hatebu > a {
 background-color: #00a4de;
 border-bottom: #008ac4 solid 8px;
 font-weight: bold;
}
.sns li.line > a {
 background-color: #00c300;
 border-bottom: #00a900 solid 8px;
 font-weight: bold;
}