このサイト（raining）にSNSボタンを設置した際の方法を記載します。
今回はTwitter、facebook、google+、はてなブックマーク、mixiのSNSボタンを設置しました。
それぞれの設置方法をメモしておきます。
wordpressで直接ファイルにコードを埋め込む方法で設定しました。
ファイルは/wp-content/themes/使用テンプレート/content-single.phpの<?php the_content(); ?>の下に下記の方法でコードを埋め込んでます。
■ wordpress テンプレートタグ
<?php the_permalink(); ?>
現在の投稿のパーマリンクURIを取得し表示する
<?php the_title(); ?>
現在の投稿のタイトルを取得し表示する
※上記は今回利用したwordpressのテンプレートタグを記載しています。他にも色々なテンプレートタグがあります。
■ SNSボタン設置方法
Twitterのツイートボタン
Twitterのツイートボタンを作成するページでURLなどの情報を入力し、コードを取得する。
https://twitter.com/about/resources/buttons
コード取得後、data-urlを「 data-url=”<?php the_permalink(); ?>”」と書き換える。
数字をツイートボタンの上に表示する場合は「 data-count=”vertical”」を追加する。
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-lang="ja" data-count="vertical">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
facebookのいいねボタン
Facebook Like ButtonページでURLなどの情報を入力しコードを取得する。
http://developers.facebook.com/docs/reference/plugins/like/
今回はHTML5でコードを取得。
コード取得後、data-hrefを「 data-href=”<?php the_permalink(); ?>”」と書き換える。
画像の表示などがうまくいかない場合は、metaタグでOGP（Open Graph Protocol）を設定する。
「JavaScript SDK」は<body>のすぐ後に配置するのが理想的。
<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 data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true"></div>
グーグルプラスのgoogle+1ボタン
google+1ページで情報を入力しコードを取得する。
http://www.google.com/intl/ja/webmasters/+1/button/
コード取得後、指定の場所にソースを埋め込むだけで設定が完了する。
<!-- このタグを +1 ボタンを表示する場所に挿入してください -->
<g:plusone size="tall"></g:plusone>
<!-- この render 呼び出しを適切な位置に挿入してください -->
<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>
はてなブックマークのBookmarkボタン
はてなブックマークボタンページでURLなどの情報を入力しコードを取得する。
http://b.hatena.ne.jp/guide/bbutton
hrefのhttp://b.hatena.ne.jp/entry/の後に<?php the_permalink(); ?>を記載する。
また、data-hatena-bookmark-titleに<?php the_title(); ?>を記載する。
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"> <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 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>
mixiのイイネ！ボタン
mixiで「イイネ！ボタン」を設置する際は、デベロッパー登録が必要になる。
http://developer.mixi.co.jp/
登録したら、「mixi Plugin」の新規サービス追加でURLなどの情報を入力しコードを取得する。
取得したコードのdata-service-keyに識別キーを記載し、data-hrefを「 data-href=”<?php the_permalink(); ?>”」と書き換える。
<div data-plugins-type="mixi-favorite" data-service-key="識別キー" data-size="large" data-href="<?php the_permalink(); ?>" data-show-faces="false" data-show-count="true" data-show-comment="false" data-width=""></div>
<script type="text/javascript">
(function(d) {
var s = d.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = '//static.mixi.jp/js/plugins.js#lang=ja';
d.getElementsByTagName('head')[0].appendChild(s);
})(document);
</script>
