Google+1とTwitterとFcebookいいねボタンをWordpressに貼る
先月、GooglePlusOne（プラスワン）を Wordpress の記事毎に付ける方法をメモった。けど、Wordpress には他にも Facebook の”いいね”と Twitter の Retweet ボタンもあってそれぞれ別々に管理されてる。これを Wordpress のプラグインで一気に管理できないかな〜？とググってみたら発見！
その名も「Add Twitter, Facebook Like, Google plus one Social share」！
今回はこのプラグインを導入してみたのでメモ。
2011/08/19 Updated : 最新バージョンの情報はコチラ
インストール
インストールは簡単。ココからダウンロードして、Wordpress の wp-content/plugins にコピーして展開すれば OK。（下の例では直接 plugin フォルダにダウンロードしてます。）
[paraches@localhost plugins]$ sudo wget http://downloads.wordpress.org/plugin/twitter-facebook-google-plusone-share.1.0.2.zip [paraches@localhost plugins]$ sudo unzip twitter-facebook-google-plusone-share.1.0.2.zip Archive: twitter-facebook-google-plusone-share.1.0.2.zip twitter-facebook-google-plusone-share.1.0.2 packaged: Mon, 27 Jun 2011 16:23:20 +0000 creating: twitter-facebook-google-plusone-share/ inflating: twitter-facebook-google-plusone-share/readme.txt inflating: twitter-facebook-google-plusone-share/tf_display.php inflating: twitter-facebook-google-plusone-share/tf_admin_page.php inflating: twitter-facebook-google-plusone-share/twitter-facebook-share.php [paraches@localhost plugins]$ sudo chown -R apache:apache twitter-facebook-google-plusone-share [paraches@localhost plugins]$
設定
ブラウザで管理画面に入って設定すれば OK。
まずは「プラグイン」で「Twitter Facebook Social Share」を「有効化」する。
次に「設定」の「TF Social Share」で細かい設定ができる。
簡単に説明すると
- Auto Display をオンにしておけば記事に自動的にボタンを挿入してくれる。
- Code for Manual Display は、自分でボタンを挿入したい時にこのコードを使う。Auto Display だと Single の記事の時だけ表示されるので、それ以外の Page に表示したい時とかはこのコードを任意の場所に挿入すれば OK。
- Active share buttons は、どのボタンを表示するかを選択できる。Stumbleuponって良く知らないので、これだけ OFF にしてる。
- Position はボタンが表示される位置。Above the post だとタイトルと本文の間。Below the post だと本文の下。Above and Below post だと両方。Left side of post は本文の左側。
- Border Style はボタン群を囲む枠線を描くかどうか。Flat Border で四角、Round Border で四隅が丸くなる、No Border で枠線なし。
- Show Background Color は枠線内の背景色を描くかどうか？
- Background Color は背景色を描く場合の色。
- Load Javascript in Footer は Javascript を Footer に入れるかどうか？
- Your Twitter ID は Retweet した時に出てくる ID
自分は、ボタン群の枠線があると変だと思ったので消して、背景色もなしにした。
固定ページにも表示
このままだと、ブログで投稿した記事にしかボタンが付かない。
固定ページにもボタンを付ける為に loop-page.php にボタン表示用のコードを入れる。
自分はテーマが TwentyTen のままなので wp-content/thema/twentyten/loop-page.php を修正。
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_front_page() ) { ?>
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php } else { ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php } ?>
<?php if(function_exists('kc_add_social_share')) kc_add_social_share(); ?>
<div class="entry-content">インデントしていない部分が挿入したコード。
タイトルと本文の間にボタンが表示される様にした。
不具合と解決方法
で、実際に使ってみたらちょっとした不具合が…
「いいね」の数が Google+1 の下に入り込んでる。
なんとなく英語の「like」の横幅と日本語の「いいね」の横幅の問題なんだろうな〜と思って、ソース（wp-content/plugins/twitter-facebook-google-plusone-share/tf_display.php）を見たら結構単純だったので以下の様に修正した。
#bottomcontainerBox .buttons {
float:left;
height:30px;
width:125px;
margin:4px 4px 4px 4px;
}元々は width が 85px だったのを 125px にしただけ。
これで重ならなくなったけど、今度はボタンの間の余白のバランスが悪い。
これ、ボタンが Facebook Twitter Google の順に並んでればバランスが良くなるんじゃない？
というわけで、ソースを見ると単純にアウトプットの順番を変えるだけで良さそうだったので以下の様に変更。
if (($option['position'] == 'below') || ($option['position'] == 'above') || ($option['position'] == 'both'))
{
$output = '<div id="bottomcontainerBox">';
if ($option['active_buttons']['facebook_like']==true) {
$output .= '
<div class="buttons"><iframe src="http://www.facebook.com/plugins/like.php?href=' . rawurlencode(get_permalink()) . '&layout=button_count&show_faces=false&width=100&action=like&font=verdana
&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></div>';
}
if ($option['active_buttons']['stumbleupon']==true) {
$output .= '
<div class="buttons"><script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script></div>';
}
if ($option['active_buttons']['twitter']==true) {
if ($option['twitter_id'] != ''){
$output .= '
<div class="buttons">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="'. $option['twitter_id'] . '">Tweet</a>
</div>';
} else {
$output .= '
<div class="buttons">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
</div>';
}
}
if ($option['active_buttons']['Google_plusone']==true) {
$output .= '
<div class="buttons">
<g:plusone size="medium"></g:plusone>
</div>';
}
$output .= '
</div><div style="clear:both"></div><div style="padding-bottom:4px;"></div>';
return $output;
}$output への挿入の順番を変えているだけ。Google を最後にした。
これで、ボタンの配置のバランスも良くなった。
というわけで、Facebook の”いいね”、Twitter の Retweet、Google+1 のボタンがプラグイン１つで綺麗に並べる事ができるようになった！
