［み］WordPressで、プラグインなしでソーシャルボタンを設置する方法

最近はどのサイトをみても、必ずと言っていいほどソーシャルボタンってついてますよね。逆に、ソーシャルボタンのついていないサイトを探す方が難しくなっているんじゃないでしょうか？もちろん、ソーシャルボタンがついていないサイトはありますが、まぁ、そう言わずに…

それで、みはら.comでもTwitterとか、Facebookのソーシャルボタンを設置しているワケですが、これは、まだまだWordPressを理解していない頃に、とにかくプラグインに頼りまくってサイトをつくっていたときに、「WP Social Bookmarking Light」というプラグインを使って設置して、そのまま放置しています。最近、少しづつWordPressを理解しはじめたので、プラグインをはずしてサイトを軽くしたい！という方のためにも、プラグインなしでソーシャルボタンを設置する方法を紹介します。

プラグインなしのソーシャルボタンの設置方法

ではさっそく設置方法を紹介します。

JavaScriptをコピペ

次のものから必要なものをコピペしてください。はりつけるのは、<body>～</body>であればどこでも大丈夫ですが、</body>の直前がいいって言われてますね。早くなるそうです。

このなかから、設置するものを選んでコピペします。コメントを残したままコピペすると、後から修正しようと思ったときに便利です。

Twitter

<!-- Twitter -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

はてなブックマーク

<!-- はてなブックマーク -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

Facebook

<!-- 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&appId=【ここに自分のAppID】";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Google+

<!-- Google+ -->
<script type="text/javascript">
  (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>

Evernote

<!-- Evernote -->
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>

ボタンを表示するコードをコピペ

JavaScriptが準備できたので、次は、実際に表示するコードを準備します。今回は、Twitter、はてブ、Facebook、Google+、Evernoteの全部表示するコードですが、要らないものは削除してください。

HTML

<ul>
 	<li class="tweetButton"><a class="twitter-share-button" href="https://twitter.com/share" data-count="vertical" data-url="&lt;?php the_permalink(); ?&gt;" data-text="&lt;?php the_title(); ?&gt;" data-via="【自分のアカウント名】" data-lang="ja">ツイート</a></li>
 	<li class="hatebuButton"><a class="hatena-bookmark-button" title="このエントリーをはてなブックマークに追加" href="http://b.hatena.ne.jp/entry/&lt;?php the_permalink(); ?&gt;" data-hatena-bookmark-title="&lt;?php the_title(); ?&gt;" data-hatena-bookmark-layout="vertical"><img style="border: none;" src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" /></a></li>
 	<li class="likeButton"><div class="fb-like" data-href="&lt;?php the_permalink(); ?&gt;" data-send="false" data-layout="box_count" data-width="72" data-show-faces="false"></div></li>
 	<li class="gplusButton"></li>
 	<li class="EvernoteButton"><a href="#"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a></li>
</ul>

これをそのまま、ソーシャルボタンを表示したいところに貼り付けてもかまいませんが、メンテナンスのことを考えると、ちょっとためらわれますよね。そんなときには、functions.phpを利用します。

functions.phpに次のコードをコピペします。上のコードと同じく、必要のないものは削除してください。

PHP

//ソーシャルボタン
function SocialButton()
{ ?>
    <ul>
        <li class="tweetButton"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-via="【自分のアカウント名】" data-lang="ja"　>ツイート</a></li>
        <li class="hatebuButton"><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" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
        <li class="likeButton"><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="72" data-show-faces="false"></div></li>
        <li class="gplusButton"><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>
        <li class="EvernoteButton"><a href="#" onclick="Evernote.doClip({}); return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a></li>
    </ul>
<?php }

functions.phpにコピペしたら、ソーシャルボタンを表示したいところに次のコードをコピペします。まぁ、ほとんどの方がsingle.phpの<?php the_content() ; ?>の前後に付けるんではないでしょうか？あるいは前と後ろと両方とかですかね。

HTML

<!--?php SocialButton(); ?-->

これで完了です。あ、もちろん、CSSで見た目の調整は必要かと思われますので、その辺はよろしくお願いいたします。

でも、「WP Social Bookmarking Light」はとても便利

ここまでプラグインを使わずにソーシャルボタンを設置する方法を紹介してきましたが、「WP Social Bookmarking Light」はやはりとても便利です。ので、コードをコピペするの面倒とか、functions.php弄くってエラーでるのやだという方は、「WP Social Bookmarking Light」を使う方が幸せになれると思います。

「WP Social Bookmarking Light」でも、好きなところに配置できる

ちなみに、いろんなところで、「WP Social Bookmarking Light」は上か下にしか設置できないので使うのやめたという記事を見かけますが、「WP Social Bookmarking Light」でも、好きな位置にソーシャルボタンを設置することができます。そのやり方は、けっこう前にみはら.comでも紹介しています。
WordPressのプラグイン「WP Social Bookmarking Light」を好きな位置に配置する方法
単純に、上か下かしか選べないから「WP Social Bookmarking Light」をやめるという方は、ぜひ↑この方法をお試しください。もちろん、コピペでいけますから。