【WordPress】プラグインなしでSNSシェアボタンを実装する方法

今回、wordpressのプラグインを利用してSNSのシェアボタンを実装しようとしたのですが、使いたいプラグインが自分が使っているバージョンに対応していなかったため、プラグインを使わず実装してみました。

作ったシェアボタン

この記事の上部と下部に載っているシェアボタンを実装してみました。

画像はこちら

デザインを全て自分でカスタマイズできるところが、いいところですね。

SNSシェアボタンの作り方

だいたい、以下の三つの工程を経て作りました。

  1. 記事のタイトルなどを取得(php)
  2. htmlで骨子を作る
  3. cssでデザインのカスタマイズ

それでは、1番から見ていきましょう。

phpで記事のタイトルなどを取得する


<?php
$canonical_url=get_permalink();//記事のURL取得
$title=wp_title( '', false, 'right' ).'|'.get_bloginfo('name');//記事タイトル取得
$canonical_url_encode=urlencode($canonical_url);//記事URLエンコード
$title_encode=urlencode($title);//記事タイトルエンコード
?>

SNSのシェアボタンを挿入したい箇所より前に記述しましょう。

htmlを記述する

次に、htmlを書いていきましょう。

SNSボタンを挿入したい箇所に以下のコードをコピペしてください。

<div class="share-buttons mb100">
<div class="">
<a class="fb-iine" href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $canonical_url_encode;?>&amp;t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<span class="icon-facebook-squared-ffffff ion-social-facebook">&nbsp;like</span>
</a>
</div>
<div class="twee">
<a class="tweet" href="http://twitter.com/intent/tweet?url=<?php echo $canonical_url_encode;?>&text=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<span class="ion-social-twitter">&nbsp;tweet</span>
</a>
</div>
<div class="gplus">
<a class="gplus" href="https://plus.google.com/share?url=<?php echo $canonical_url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
<span class="gplus-squared-ffffff">&nbsp;+1</span>
</a>
</div>
<div class="hateb">
<a class="hatebu" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $canonical_url_encode;?>&title=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;">
<span class="hatebu-squared-ffffff">&nbsp;はてブ</span>
</a>
</div>
</div>

最後に、cssを見ていきましょう。

CSSを記述する

以下のコードをコピペしてください。


/*share buttons*/

.share-buttons div a{
vertical-align: middle;
}
.share-buttons div{
float:left;
width:25%;
}
.share-buttons div a {
 display: inline-block;
 font-size: 16px;
 margin: 0;
 width: 100%;
 text-align: center;
 text-decoration: none;
 padding: 13px 0;
 line-height: 1.5;
 height: 50px;
 color: #ffffff;
}
.share-buttons div a:hover{
 opacity:0.8;
 filter:alpha(opacity=80);
 -ms-filter: "alpha( opacity=80 )";
}
.share-buttons .tweet{
background:#4dccf5;
}
.share-buttons .fb-iine{
background: #455a9d;
}
.share-buttons .gplus{
background:#dc4935;
}
.share-buttons .hatebu{
background:#2c6dbd ;
}
.hatebu-squared-ffffff:before { 
content: 'B!';
color:#2c6dbd;
} 
.gplus-squared-ffffff:before { 
content: 'G+';
color:#dc4935;
} 
.hatebu-squared-ffffff:before ,
.gplus-squared-ffffff:before { 
background:#ffffff;
font-weight:bold;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
font-size:67%;
padding:0 2px;
vertical-align:1px;
} 

以上で、写真のようなSNSシェアボタンができあがります。

自分でカスタマイズしてみると面白いと思います。

参考にしたwebサイト

非常に参考になりました。ありがとうございました。

http://webshufu.com/seo-make-social-buttons-likes-tweets-plus1-hatebu/