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

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というアイコンフォントを使っているので、まずはfont-awesome.min.cssを読み込む必要があります。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

Quick Start · BootstrapCDN by MaxCDN

<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="fa 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="fa fa-facebook"></i></a></li>
	 <li class="googleplus"><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank"><i class="fa fa-google-plus"></i></a></li>
	 <li class="pocket"><a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" target="_blank"><i class="fa 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;
}

このページが気に入ったら
いいね!しよう

最新の情報をお届けします。

同じカテゴリーの記事