Instapaper、Read It Later に対応＆管理画面がつきました。wp-hatena 拡張版 0.6 リリース

0.5 からの変更点
表示サンプル
独自アイコン表示サンプル
mixi チェックを独自アイコンで表示させる場合
表示させたい場所に記述するタグ内容
ダウンロード

0.5 からの変更点

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();
}?>