ブログにはお決まりのソーシャルボタン。設置してみました。
この記事のタイトルの下に表示されているソーシャルボタンたちです。
設置した際のフローを簡単に説明したいと思います。
いろいろな方法があると思いますが、下記の方法だと3ステップで簡単に埋め込めます。
1. 各ソーシャルボタンのソースコードを外部ファイル化
まず、下記の設置方法にある各ボタンのソースは外部ファイル化します。
Facebookのいいね！ボタン
下記のリンクから作成できます。URLを入力し、Send Buttonのチェックを外し、Layout Styleは「button_count」（いいね！＋いいね数）、widthは120を指定します。幅は狭すぎるといいね数が表示された時に見切れてしまうので、120前後くらいがよいかと思われます。iframe要素のsrc属性のhrefパラメータをパーマリンクに変更します。
▼tmp_facebook_button.php
<iframe src="//www.facebook.com/plugins/like.php?app_id=257145814325196&href=<?php the_permalink(); ?>&send=false&layout=button_count&width=120&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>
Twitterのツイートボタン
下記のリンクから作成できます。ツイートボタンは、「垂直方向にカウント数を表示」、「水平方向にカウント数を表示」、「カウント数の表示なし」の3タイプあります。ここではカウント数の表示なしを選択しました。a要素のdata_url属性をパーマリンク、data-text属性を「記事タイトル｜ブログ名」に変更します。
▼tmp_twitter_button.php
<a href="https://twitter.com/share" data-text="<?php the_title(); ?> | <?php bloginfo('name'); ?>" data-url="<?php the_permalink(); ?>" data-count="none" data-via="cocoism" data-lang="en">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
mixiチェックボタン＋イイネ！ボタン
利用するには、mixi Developer Centerへの個人パートナー登録登録が必要です。
個人パートナー登録後、mixi Develope Centerにログインし、mixi Pluginタブのところから、新規サービスを追加します。サービスを使用するサイト、ブログなら、ブログ名、ブログのURL、許可するドメイン（ブログのドメイン部分）等を指定して、サービスを登録します。サービスの登録が完了すると、サービスの識別キーが発行されます。
mixiチェックボタンの場合は、a要素のdata-key属性に識別キー、data-url属性にパーマリンクを指定します。mixiのイイネ！ボタンの場合は、iframeのsrc属性のservice_keyパラメータに識別キー、hrefパラメータにパーマリンクを指定します。
参照：mixiチェックボタンの設置方法、イイネ！ボタンの設置方法
▼tmp_mixi_check.php
<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-button="button-1" data-url="<?php the_permalink(); ?>" data-key="識別キー>Check</a>
▼tmp_mixi_favorite.php
<iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:60px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=<?php the_permalink(); ?>&service_key=識別キー&show_faces=false&width=60"></iframe>
はてなブックマークボタン
下記のリンクから作成できます。スタンダードボタン（B!＋ブクマ数）、バーティカルボタン（B!＋ブクマ数）、シンプルボタン（B!のみ）の3タイプありますが、ここではシンプルボタンを選択しました。a要素のhref属性の/entry/以降をパーマリンクに、data-hatena-bookmark-title属性を「記事タイトル｜ブログ名」に変更します。
▼tmp_hatena_button.php
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" data-hatena-bookmark-title="<?php the_title(); ?> | <?php bloginfo('name'); ?>" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
2. 外部ファイルを各ページのテンプレート内で読み込む
次に、これらの外部化したファイルを、ソーシャルボタンを表示したいページにインクルードタグを使用して読み込みます。
▼content.phpやcontent-single.phpなど必要に応じて
<ul>
<li><?php include( TEMPLATEPATH . '/tmp_hatena_button.php' ); ?></li>
<li><?php include( TEMPLATEPATH . '/tmp_mixi_check.php' ); ?></li>
<li><?php include( TEMPLATEPATH . '/tmp_mixi_favorite.php' ); ?></li>
<li><?php include( TEMPLATEPATH . '/tmp_twitter_button.php' ); ?></li>
<li><?php include( TEMPLATEPATH . '/tmp_facebook_likebutton.php' ); ?></li>
</ul>
3. スクリプトファイルをhead/body要素内に読み込む。
上記のボタンの場合は、ツイートボタン、はてなブックマークボタンとmixiチェックボタンのみ外部JavaScriptファイルの読み込みが必要になります。
ツイートボタン用、はてなブックマークボタン用に下記のscriptタグをhead要素に記述します。
<head>
・・・
<script type="text/javascript" src="//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>
・・・
</head>
mixiチェックボタン用に下記のscriptタグをbody要素の終了タグ直前に記述します。
※head要素内に指定するとうまく動作しませんでした。タグを記述した後に指定しないとダメみたい。
・・・
<script src="http://static.mixi.jp/js/share.js" type="text/javascript"></script>
</body>
</html>
以上で、設置完了です！