• Pinterest に対応
• プラグイン無効時にはオプションを削除せず、アンインストール時に削除するよう変更

Pinterest に対応したことに伴い、img_sample 内に pinterest.gif を追加しています。
ご利用の際は、pinterest.gif をサーバーの /wp-content/plugins/wp-hatena/img/ 内に入れてください。

ダウンロードはこちらからお願いします :)
WordPress Plugins/JSeries » wp-hatena 拡張版

具体的には、単体ページ以外でも mixi チェックのボタンがきちんと動作するように修正しました（thanks @takenao さん！）。

DL：WordPress Plugins/JSeries » wp-hatena 拡張版

単体ページ以外での使用方法

とりあえず、詳しいことはいいから表示させたいよ！という方は以下のようにしてみてください。
※wp-hatena は表示させたい場所にコードを書いておくことで使うタイプのプラグインです。

新しいコード

単体ページ以外にも表示させたい場合はこちらを。面倒だったら単体ページもこちらで大丈夫です。

<?php global $wph; if(isset($wph)) {
    $wph->addhatena();  //表示させたいものを記述
}?>

よく分からなければ、こちらのほうで書いておけば間違いないです。

今までのコード

今後も単体ページではこのままのコードで表示できますので、今まで表示できてたページは変更不要です。

<?php if(isset($wph)) {
    $wph->addhatena();  //表示させたいものを記述
}?>

経緯

事の発端

むむむ、動かないらしい。なんでだろう。loop 内だとダメなのかな？エントリ個別ページで表示することしか想定していなかったけれど、それ以外でも使えるならそれにこしたことはないな～、ということで調べてみると、以下のようなことが分かりました。

• wp-hatena.css は読み込まれている。→コンストラクタは動いてる（＝プラグインはちゃんと読み込まれて動いてる）
• if(isset… のところは、「$wph という変数があったら、この中身実行してね」という意味なのですが、そこから先が読み込めてない。変数 $wph が見当たらない状態になってる様子。

wp-hatena の仕組み

WordPress のプラグインは、プラグインを WordPress 本体に引っ張る hook を使っているものがほとんどです。（参考：プラグイン API – WordPress Codex 日本語版）
ですが、wp-hatena はメイン機能（ブックマークボタン等を表示する機能）で hook を使っていません。※拡張版では css, js の読み込みにちらっと使っています。

理由をwp-hatena 本家作者ひろまささんの記事から引用すると…

自動でソーシャルブックマークのボタンを挿入してしまうより、自分が好みの場所にコードを書いて使う方が便利じゃないかなーという、ことですね。

つまり、function.php などにソーシャルブックマークボタンを呼び出すためのオレオレ関数を作っておくぜ！ということの延長にあるタイプのプラグインということです。

function.php に書くことに比べると wp-hatena を使うほうが手軽に色々できますが、基本は同じ「変数を用意しておく」「それをテンプレート内で呼び出す」という二段階。

$wph を参照できるように

話は戻って…。変数 $wph が見つからない状態になっているようだったので、これをなんとかすればいけるはず、と考えました。

wp-hatena プラグインの一番最後で、$wph = & new WpHatena(); として、クラス WpHatena のオブジェクトを生成して変数 $wph に入れているので、それをもう一度書いてあげれば動くんじゃないかなーと思い、以下のようにして試してみました。

<?php $wph = & new WpHatena();
if(isset($wph)) {
    $wph->addhatena();  //表示させたいものを記述
}?>

動いたー！とりあえず、こうすれば動きますーとツイッターでお返事をしていたところ、まがりんから以下のようなツイートが。

global 宣言でいけるかもとのことなので、引き続き調べてみました。

根本的な原因と、WordPress テンプレートの流れ

まずは、PHP の変数について。

• 変数は「その変数を参照することができる範囲」が決まっている。この範囲＝スコープ。関数内＝1 スコープ。
• 普通は、関数の外からは関数の中の変数は参照できない（見つけられない）、関数の中からは関数の外の変数は参照できない。
• 関数外の変数（グローバル変数）を参照したい場合は宣言が必要（グローバル宣言）

動かなかった原因は WordPress のテンプレートを読み込む仕組みに沿った呼び出し方をしてなかったからでした。
WordPress のテンプレートは大きく分けて 2 つ。

1. 一番外側、外枠の指定のあるテンプレート、index.php や page.php など。これらは一番上のスコープ（グローバルスコープ）で処理され、プラグインで指定した変数や function.php で指定した変数をそのまま呼び出すことが出来る。
2. 他のテンプレートから呼び出されるパーツ的なテンプレート、loop.php など。これはそれぞれ呼び出される時に使った関数内で実行されるので、1 とは違うスコープになる。違うスコープの場合、そのままではプラグインで指定した変数などの変数を呼び出すことができない。

テンプレートは全部同じスコープにあるー、と、深く考えずぼんやり思っていました…。

違うスコープにあるから変数を見つけられない、ということなので「違うスコープの変数を参照したいよ！」とグローバル宣言をすることで解決できるということに。表示させたいテンプレート内で 1 度、global $wph; としてグローバル宣言してあげれば OK。

<?php global $wph;  //グローバル宣言で $wph を参照できるように
if(isset($wph)) {
    $wph->addhatena();  //表示させたいものを記述
}?>

これで表示できるように（この記事の最初のほうで書いたコードと同じです）。そのスコープで 1 回グローバル宣言してあれば良いので、例えば、記事の最初と終わりの二カ所に表示させたい場合、二番目のほうは global $wph; を書かなくても大丈夫です。

とはいえ、記述するコードが変わると使い勝手が落ちますし、2 回グローバル宣言を書いても問題はないかなと思うので、いつも書いてもらう形にしておけば間違いなくて良いかなー。

〆

こうやってちょっとずつプラグインが育っていくのだなぁ、と思いました。「よく分からないけれど、こうすれば解決する」という段階から、「原因が分かったうえで、解決方法を出せる」という段階にいけると、「そうだったのかー！」とちらばっていた事柄がつながって楽しいですね。

実は途中、global $wph; を <?php の外に書いていることに気がつかず、しばらく遠い目になったのですが…

このツイートを見て、やり遂げなくてはー、と思いましたｗ かなり悩んだのに、しょぼしょぼなケアレスミスでした…T T

アドバイスくださったまがりん、記事にもまとめてくださっていたうえつん、応援してくださったおでさん、キッカケをくださったtakenaoさん、どうもありがとうございました！

長くなってしまいましたが、挿入したい場所に wp-hatena のコードを書いても表示できない状態だった方、よろしければお試しください :)

ダウンロード・説明はこちらを。
WordPress Plugins/JSeries » wp-hatena 拡張版

1.0 の変更点

• Google +1 に対応
• IE で Facebook いいね！ボタンの下が 1px 切れることがあったのを修正

Google +1 は、cagylogic さんが「wp-hatenaにgoogle +1をサポートさせる | cagylogic」で対応してくださっていたものを取り込ませていただきました。ありがとうございます！

よろしければ更新してお使いください :)

ダウンロードはこちらから。
WordPress Plugins/JSeries » wp-hatena 拡張版

0.9 の変更点

0.9 は、をかもとさんが改良してくださったものを、丸ごとドン！なリリースです。遅延ローディングで javascript を読み込むようになっており、wp-hatena で読み込むデータが原因で表示に時間がかかる、というケースが劇的に改善すると思います :)

また、細かな改良もしていただいています。このステキな改良をしていただいた wp-hatena 拡張版、リリースして良いか伺ったところ快く OK をいただけました。そんなわけで 0.9 リリースです。をかもとさんに感謝！

0.8 の変更点

ブログを書いていなかったので一応。

• プラグインディレクトリの取得を行う形に修正
• アイコン画像の場所を任意にできるようにし、管理画面にオプションを追加

プラグインディレクトリの取得方法は、をかもとさんに教えていただいたソースを参考にしました。ありがとうございます！

アイコン画像の場所変更のほうは、画像を任意のものに差し替えたい場合などにご活用ください :)

• WordPress Plugins/JSeries » wp-hatena 拡張版

これは、以下のような流れで追加しました :)

をかもと兄さんがシェアボタンをご所望。これは追加しないわけにはいかない！

そんなわけで Facebook シェアボタンが追加された wp-hatena 0.7、もしよろしければお使いください :)

余談：Facebook シェアボタンを追加するにあたり Facebook の公式サイトを見ていたんですが、シェアボタンに関する情報があったページにいくと、「いいね！」ボタン情報のページにリダイレクトされちゃうんですよね。役目が違うから、シェアボタンと「いいね！」ボタンが統合されるとも考えにくいんですが、なんだろうなー

wp-hatena 0.6 から、管理画面がつき「はてブ」「Facebook いいね！」「Tweet ボタン」は表示タイプを選択できるようになりました。どれを選ぶとどういう見た目になるの？というのを書いておきます。

はてブ

• スタンダード (B!＋ブックマーク数を表示)
  
• バーティカル (大きめのサイズでB!＋ブックマーク数を表示)
  
• シンプル (B!のみでブックマーク数は表示されません）
  
  ※独自アイコンを利用したい場合、シンプルを選択してください

Facebook

• スタンダード (いいね！ボタン＋水平方向にテキストやアイコンを表示)
  
• バーティカル (いいね！ボタン＋素直方向にカウント数を表示)
  
• シンプル (いいね！ボタン＋水平方向にカウント数を表示)
  

Tweet ボタン

• スタンダード (つぶやきボタン＋水平方向にカウント数を表示)
  
• バーティカル (大きめのサイズでつぶやきボタン＋垂直方向にカウント数を表示)
  
• シンプル (つぶやきボタンのみでカウント数は表示されません）
  
  ※独自アイコンを利用したい場合、シンプルを選択してください

mixi チェックを使ってみたい場合

デベロッパー登録（個人の方） << mixi Developer Center (ミクシィ デベロッパーセンター)

上記ページを参考に、まずはデベロッパー登録します。その後、「mixi Developer Center (ミクシィ デベロッパーセンター)」から Developer Dashboard へログイン。

上記のようなページに行くので、「mixi Plugin」へ移動。そこから、「新規サービス追加」ページへ移動。

「新規サービス追加」では、上記のように適宜内容を埋めます。ここでは私のブログを例としています。実際には、ご自分のブログにあった内容で書いてください。

サイドナビゲーション「サービストップ」で移動し、「登録サービス詳細」から今登録したサービスの内容を確認します。登録したサービス内容に「識別キー」というものが表示されているはずなので、これを wp-hatena の管理画面の「mixi key」に入力してください。

あとは他のプラグインと同様の処理で OK です :)

• Instapaper に対応
• Read It Later に対応
• addNewHatena() 廃止、addHatena() に統合
• はてブのブックマーク数をテキスト表示を追加（見た目は wp-hatena.css で整形してください）
• 管理画面がつきました！※管理画面からの設定はしなくても動きます
• 管理画面から、はてブ、Tweet、Facebook いいね！、それぞれの表示タイプを選べるように
• 管理画面からの設定がその他にも少し
• 使用する画像は wp-hatena/img に入れる仕様になりました

wp-hatena/img_sample にサンプルのアイコン画像を入れてあります。初回のみ、この中身を img 内にコピーしてください。

「自作でアイコン画像をアップしてあるのに、wp-hatena アップデート時に同梱ファイルで上書きされた！」ということがないよう、このような形にしました。:)

表示サンプル

img_sample 内の画像を利用した場合、このような見た目になります。

独自アイコン表示サンプル

サンプル画像を見てのとおり、Facebook いいね！ボタンだけは独自アイコンを利用できません。iframe で読み込んでいて、さらに状態により色々表示内容が変わってしまうため…

アイコンは、gif のものと png のものがあります。デフォルトのアイコンの形式によって変わっています。そのうち png に統一するかもしれません。（透過 png がデフォルトのものがあるので、gif への統一はあきらめました）

mixi チェックを独自アイコンで表示させる場合

だいぶゴリ押し手法ですが、以下のように wp-hatena.css に記述することで独自アイコンで表示することが可能です。

/* mixi check */
.wph.mixi-check-button {
	display: inline-block;
	/display: inline;
	width: 30px!important;/* 独自アイコンの横サイズ */
	height: 30px!important;/* 独自アイコンの縦サイズ */
	background: url(./img/mixi.png) 0 0 no-repeat!important;
	/zoom: 1;
}

.wph.mixi-check-button img {
	display: none;
}

iframe で表示されるのですが、iframe の中身が別ドメインのため外からいじれず。仕方がないので CSS で背景に画像をひいたうえで iframe 内の画像を非表示にしています。

表示させたい場所に記述するタグ内容

下記をそのまま記述すると、全部が表示されます。全部表示だと重複するものもあるので、適宜不要なものは削除かコメントアウトしてください。

addhatena();
	//はてブのブックマーク数をテキスト表示（独自アイコン利用時のブックマーク数表示などに）
	$wph->addHatenaCountTxt();
	//はてブのブックマーク数を画像で表示（よくあるタイプ）
	$wph->addHatenaCount();
	$wph->adddelicious();
	$wph->addLivedoor();
	$wph->addYahoo();
	$wph->addFC2();
	$wph->addNifty();
	$wph->addPOOKMARK();
	$wph->addBuzzurl();
	$wph->addChoix();
	$wph->addnewsing();
	$wph->addInstapaper();
	$wph->addReadItLater();
	//Tweet ボタン　管理画面から表示タイプ選択可能
	$wph->addTweetBtn();
	$wph->addEvernoteClip();
	//Facebook いいね！ボタン　管理画面から表示タイプ選択可能
	$wph->addFacebook();
	//mixi チェック　※ ディベロッパーセンターに登録が必要、分かる人向け
	$wph->addMixicheck();
}?>

ダウンロード

wp-hatena-0.6.zip

管理画面は初挑戦なので、おかしいところがあったらコッソリご指摘ください。

「WordPress Plugins/JSeries » wp-hatena 拡張版」にも明日以降に…詳細を…。（ねむたいので…）

今回から WordPress Plugins/JSeries のほうにページを作成しました（3 年半ごしです…す、すみませ…）。

• WordPress Plugins/JSeries » wp-hatena 拡張版

新しいバージョンのダウンロードは、JSeries ページからお願いします。

• はてなブックマーク
• del.icio.us

の他に、以下のものにも対応しています。

• 新はてなブックマーク（はてブ被リンク数も表示） !New
• Livedoorクリップ
• Yahoo!ブックマーク
• FC2ブックマーク
• ニフティクリップ
• POOKMARK Airlines
• Buzzurl
• Choix
• newsing
• Evernote Clip !New
• Facebook いいね！ !New
• Twitter でつぶやく !New

こっそりと mixi チェックにも対応していますが、mixi デベロッパーセンターに登録が必要だったり何かと手間がかかるので自己責任でがんばりたい方向けということで…。

mixi いいね！や、Facebook のシェアボタンも出来そうではあるのですが、とりあえず。いずれ「これもつけたい」と思ったらまた追加すると思います。

新はてなブックマーク（はてブ被リンク数も表示）ボタンを入れたので、前バージョンでつけた「はてブ被リンク数表示」は削除しました。

また、今回から CSS を同梱するようになりました（自動で読み込みます）。表示させるボタンのマージンを調整したい場合には、CSS のほうを弄っていただければ OK です。

twitter のつぶやきボタンの種類（ツイート数も表示するかどうか等）は、それぞれ用にタグを作っておくのがいいのか、設定してもらうようにしておくのがいいのか、迷った末にシンプルに決めうちしました。

どういうのが多くの方に使いやすい形でしょうかねー。元々の hiromasa さんの wp-hatena のシンプルなわかりやすさを残したいので、あまり複雑にはしたくないなーなどと思ったり。

そんなわけでリリースしました wp-hatena 拡張版 0.5、もしよろしければお使いください :)

wp-hatena 拡張版に、はてブ被リンク数表示バージョンを追加しました。
「合計 10 個の SBS + はてブ被リンク数」を表示することができます。

なにができるの？

この画像の、右端にあるような「はてなブックマーク被リンク数」を表示できるようになりました。
表示できるモノは以下の通りです。

• はてブ
• del.icio.us
• Livedoorクリップ
• Yahoo!ブックマーク
• FC2ブックマーク
• ニフティクリップ
• POOKMARK Airlines
• Buzzurl
• Choix
• newsing
• はてブ被リンク数 New!!今回追加

ダウンロード

現時点では _blank でリンク先が開くバージョンのみです。もし要望があれば、_blank で開かないバージョンも作るかもしれません。
2010.07.16 アーカイブを lzh から zip に変更

設定

使い方は本家 wp-hatena と全く同じです。

• 拡張版 以前のバージョン　wp-hatena にさらに追加、合計 10 個の SBS に対応 | Numb.
• 本家配布サイト　WordPress Plugins/JSeries » wp-hatena

表示させたいテンプレートに以下の内容を書くことで表示されます。
不要なものは一行まるごと削除で出力しないことも可能です。

<?php if(isset($wph)) {
	$wph->addHatena();
	$wph->adddelicious();
	$wph->addLivedoor();
	$wph->addYahoo();
	$wph->addFC2();
	$wph->addNifty();
	$wph->addPOOKMARK();
	$wph->addBuzzurl();
	$wph->addChoix();
	$wph->addnewsing();
	$wph->addHatenaCount();
}?>

※上記内容で、拡張バージョンで対応しているすべてが表示されます。

$wph->addHatenaCount();

ちなみに上記部分が、はてブ被リンク数表示の指定です。

参考

• 自分のブログに「○○users」を表示する はてなブックマークヘルプより

はてブ被リンク数の表示は、「ブックマーク数を画像で取得するAPI」を利用しています。

よろしければお使いください :)