コピペでできるWordPress用のソーシャルボタンの設置の仕方

WordPress用のソーシャルボタンを作って設置してみます。
プラグインもあるんですがコード的に汚くなるのでテーマに直接貼り付けます。

あまりベタベタとソーシャルボタンを付けても仕方ないので、はてなブックマークとTwitterとFacebookとGoogleプラスのソーシャルボタンだけつけることにします。

参考サイト：WordPressサイトにソーシャルボタンを横並びで設置する方法(コピペ用メモ)

完成すると記事の下に下記のようなソーシャルボタンが表示されます。

(これは画像です)

WordPressのテーマの編集で、単一記事の投稿(single.php)の好きなところに下記のコードをコピペしてください。テーマによって単一記事の投稿ではない場合があるので、それっぽいいところにコピペして試しましょう。

<div class="social-buttons clearfix">
<!-- Hatena -->
 <div class="social-button hatena-button">
 <a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title();?>" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
 </div>

<!-- Twitter -->
 <div class="social-button twitter-button">
 <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical">ツイート</a>
 </div>
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https'; if(!d.getElementById(id)){js=d.createElement(s); js.id=id;js.src=p+'://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

 <!-- Facebook -->
 <div id="fb-root"></div>
 <script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <div class="social-button facebook-button">
 <div class="fb-like" data-href="<?php the_permalink() ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
 </div>
 
<!-- Google+ -->
 <script type="text/javascript">
 window.___gcfg = {lang: 'ja'};
 (function() {
 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
 po.src = 'https://apis.google.com/js/plusone.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
 </script>
 <div class="social-button gplus-button">
 <div class="g-plusone" data-size="tall"></div>
 </div>
</div>

スタイルシート (style.css)

.social-buttons { margin-top:10px; }
.social-button { float: left; margin: 0 0 15px 10px; }
.hatena-button{ min-width:80px; max-width:125px; margin: 0 0 0 0px; }
.twitter-button{ min-width:87px; max-width:90px; }
.facebook-button{ min-width:70px; max-width:115px; margin: 0 0 0 -5px; }
.gplus-button{ min-width:50px; max-width:80px; }

@media screen and (max-width: 350px) {
    .gplus-button{ display:none; }
}

ボタンを4つ並べるとiPhoneだと1段で収まらずに2段になって不格好になります。iPhone等の幅の小さい画面の場合、たいして使われないと思われるGoogleプラスのソーシャルボタンを非表示にして1段で収まるようにしました。

WordPressのデフォルトのCSSにはClearfixがすでにあると思いますが、ない人はCSSに付け加えておいてください。

スタイルシート (style.css)

/* =Clearfix
-------------------------------------------------------------- */
.clearfix:after,
.clearfix:before,
#container:after,
#container:before,
.widget-wrapper:after,
.widget-wrapper:before {
	content: ' ';
	display: table;
}

.clearfix:after,
#container:after,
.widget-wrapper:after {
	clear: both;
}

.ie7 .clearfix,
.ie7 #container,
.ie7 .widget-wrapper {
	zoom: 1;
}

以上でソーシャルボタンの設置は完了です。

このサイトはほとんどGoogleからの検索から人が来ているので、少しは他のところから来てくれるようになると良いなーと思います。

ツイート