Facebook開発者登録

初めて設置する場合は開発者登録が必要です。

• Facebookにログイン
• https://developers.facebook.com/apps/へアクセスし、
  ページ右上の｢Register as a Developer｣をクリックします。
• ユーザー情報のアクセス許可の表示が現れますので、
  ｢I accept the Facebook Platform Policy and the Facebook Privacy Policy｣にチェックを入れて｢続行｣をクリックしてください。
• アカウントの認証を実行する上で、携帯メールアドレスの登録が必要となるので入力し、また｢続行｣をクリック。
• 登録した携帯アドレスに認証コードが送られてきますので、コードを入力すればFacebook開発者登録は完了です。

Facebookアプリの作成

Facebook開発者登録が完了したら次にFacebookアプリの作成を行います。

もう一度、https://developers.facebook.com/apps/へアクセスし、
今度はページ右の｢Create New App｣をクリックして下さい。

すると上記のように別ウインドウで｢新しいアプリを作成｣画面が表示されます。

｢Display Name｣と｢カテゴリ｣を入力し、｢アプリケーションを作成｣をクリック。
※｢Namespace｣は空欄のままでもOKです。

次画面でセキュリティチェックを行って下さい。

出来上がったページの｢ダッシュボード｣のアプリID欄に記載されている数字がアプリIDとなります。

それと序でに、｢設定｣の｢Add Platform｣から、ウェブサイトのURLを設定しておいても良いでしょう。

JavaScriptのコードにFacebookアプリIDを入力

下記JavaScriptのコードの｢XXXXXXXXXXXXXXXX｣の位置に取得したFacebookアプリIDを入力します。Twitter、Google+、はてなブックマークに関しては特別入力するものはありません。

<!-- 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=XXXXXXXXXXXXXXXX";
	fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

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

<!-- 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>

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

上記コードをheader.phpかfooter.phpへコピペして下さい。私の場合ページの読み込み速度が気になるのでfooter.phpに記載しました。

functions.phpへの設定

functions.phpへ下記のコードを設置して下さい。

<?php
function SocialButtonVertical()
{ ?>
    
    <ul>
        <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="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="gplusButton"><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></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-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
    
    </ul>

<?php
}
?>

ボタン表示用のコードを任意のファイルに設定

私は個別記事に下記コードを設置しましたが、ご自分のファイルに合わせて変更して下さい。

<div class="sbver">
   <?php SocialButtonVertical(); ?>
</div>

最後にスタイルを設定します

上記で設定した“sbver”にスタイルを設定します。

.sbver ul {
	margin: 0;
	padding: 0;
	clear: both;
}

.sbver li {
	list-style-type: none;
	float: left;
	margin-right: 10px
}

このスタイルはあくまで参考ですので、各自でカスタマイズしてご自分のテーマに合わせ直して下さい。