AddToAny にはてブを追加&日本語ローカライズ

add2any-1
WordPress には記事のソーシャライズ/共有/ブックマークなどをするためのプラグインがイヤというほどあります。俺的にはサイト側で選択したブックマークサービスのアイコンだけがチマチマ並んでるよりは、ブックマークサービスのおまとめサービスのボタンだけなのが好みです。さらに twitter や delicious 辺りが別途アイコン表示されていると俺様には親切です。
国産で言うと AddClips が該当しますが、ボタンのデザインとか広告が入るとかが非常に残念なので使いません。なのでリンクにも rel="nofollow" 付けときます。欧米に目を向けると AddThisAddToAny が 2強ですね。知らんけど。共に WordPress のプラグインを提供しているので比べてみると AddToAny が勝ちましたのでコチラを使いましょう。そう、自分の直感を信じるんだ。Google Analytics とのインテグレーションも実績あるしね。日本対応はイマイチですがフルカスタマイザブルなのでなんとかなるはず。

AddToAny プラグイン バージョン .9.9.4.8 に、この記事の内容が取り込まれました。
AddToAny: Share/Bookmark/Email Button changelog
何かまだ一部ローカライズしそこなってるけども大目に見てあげてください。

記事を書いてる途中でバージョン .9.9.4.7 にアップグレードされたので全部再検証&書き直しー。

つらい。

AddToAny のプラグインは AddToAny: Share/Bookmark/Email Button からダウンロードできます。対応サービス一覧 を見ると日本のブックマークサービスは丸無視されてますね。あれ、先週くらいまでは はてブ があったのに。何かの圧力でしょうか。

はてブを追加する

何故かサービス一覧には表示されない はてブ ですが、対応はされてるし、対応してなくても追加できるので気にせず進みます。はてブ のファビコン に直リンクしてたからかもね。だとしたら => ヤダヤダ小せぇなまったく。だったら => png でアイコン提供すりゃいいじゃねぇか。気にせず進みますね。仕様を決めましょう。

  • はてブ は別途アイコン表示する。
  • 別途表示アイコンが小さいので大きくする。管理画面に表示されるアイコンは 16x16 のままで良し。
  • サービス一覧ポップアップ用ボタンの画像を変更する。

これでサイト内で AddToAny の存在を主張されずに済みます。AddClips ではこうはイカン。それでは別途表示アイコンに はてブ を追加するために、まずはファビコンを拾ってきましょう。このリンクで怒られたら報告するぜ!ファビコンをなんとかして png ファイルに変換したら plugins/addtoany/icons/hatena.png にアップロード。続いて functions.php に以下を追加。

function my_A2A_SHARE_SAVE_services($services){
  $services['hatena']['name'] = 'Hatena'; 
  $services['hatena']['icon'] = 'hatena'; 
  return $services;
}
add_filter('A2A_SHARE_SAVE_services', 'my_A2A_SHARE_SAVE_services');

AddToAny は はてブ に対応してるので名前とアイコンだけ登録すれば OK。A2A_SHARE_SAVE_services は別途アイコン用として選択できるブックマークサービスをどんどん追加できるフィルタです。どんなサービスが登録済かは services.php を見ればわかります。$services の詳細は以下のとおり。

$services['ここはサービスの ID を書きます。英小文字のみ。お好みで OK']

$services['サービス ID']['name'] = 'サービス名'
 英大文字で始める慣習らしい。

$services['サービス ID']['href'] = 'ブックマーク用URL'
 指定すると AddToAny が未対応のカスタムサービスとして扱われます。 
 文字列内の 'A2A_LINKURL' がパーマリンク、'A2A_LINKNAME' がタイトルに置換されます。
 例:はてブ ならこう書く  'http://b.hatena.ne.jp/bookmarklet?url=A2A_LINKURL&btitle=A2A_LINKNAME'
   twitter ならこう書く 'http://twitter.com/home?status=A2A_LINKNAME%20-%20A2A_LINKURL'

$service['サービス ID']['icon_url'] = 'アイコンのURL'
 未対応カスタムサービスの場合のみ有効。

$services['サービス ID']['icon'] =
 対応サービスの場合:'pngファイル名'
  .png 無しのファイル名を指定。addtoany/icons に画像をアップロードしておくこと。
  ※プラグインのアップグレードで画像が削除されるかもなのでメンドイ。
 未対応カスタムサービスの場合:'アイコンのURL'
  $service['サービス ID']['icon_url'] が未指定なら採用されます。

$service['icon_width'] = 'アイコンの幅'
 img タグの width 属性になります。

$service['icon_height'] = 'アイコンの高さ'
 img タグの height 属性になります。

「プラグインのアップグレードで画像が削除されるかも」が気になる真面目なあなたは、hatena.png を テーマフォルダ/images にアップロードして前述の my_A2A_SHARE_SAVE_services 内を以下のようにすると楽になれます。

  $services['hatena']['name'] = 'Hatena'; 
  $services['hatena']['href'] = 'http://www.addtoany.com/add_to/hatena?linkurl=A2A_LINKURL&linkname=A2A_LINKNAME'; 
  $services['hatena']['icon_url'] = get_bloginfo('template_url') . '/images/hatena.png'; 
  return $services;

以上で、管理画面でのサービス一覧に はてブ が追加されました。同じ要領で日本の他のブックマークサービスも追加できます。チャレンジしてみてください。
はてブのアイコンが一覧に追加されました

別途表示アイコンとボタンの画像を変更する

その前に、AddToAny の設定でボタンを「テキストのみ」にしておいてくださいね。では「別途表示アイコンのブックマークリンクを加工できるフィルタ addtoany_link フィルタを使って、リンクにクラスを付けてみます。

AddToAny プラグイン バージョン .9.9.7.1 にアップグレードしたところ addtoany_link フィルタが無くなっていました。ガビーン。代わりに(っちゅうわけかどうかはわかんないですけども)ボタンのリンクにクラス名が追加されるようになってます。twitter なら「a2a_button_twitter」とか。わぉ!便利。なので、以下のカスタマイズは無しで、CSS を a.my-addtoany-atena から a.a2a_button_hatena てな感じに変更すれば OK です。

function my_addtoany_link($link){
  return preg_replace('@title="([A-Z])([^"]*)"@i', 'title="\1\2" class="my-addtoany-\2"', $link);
}
add_filter('addtoany_link', 'my_addtoany_link');

別途表示アイコンのブックマークリンクは、a タグの title 属性にサービスの name(はてブ なら Hatena)が入っています。英大文字から始まっててやらしいので、'my-addtoany-' + 2文字目以降をクラス名にします。小文字にする技をご存知の方は教えてくれるといいんじゃないかな。で、style.css に以下のようなルールを追加します。

.hentry ul.addtoany_list li{
  display:block;
  float:left;
}
.hentry ul.addtoany_list img{display:none;}
.hentry ul.addtoany_list li a{
  margin:0 5px;
  padding:0;
  display:block;
  width:32px;
  height:32px;
  background:url(images/bookmark-icons.png) 0 0 no-repeat;
}
.hentry ul.addtoany_list li a.my-addtoany-atena{background-position:0 0;}
.hentry ul.addtoany_list li a.my-addtoany-atena:hover{background-position:0 -32px;}
.hentry ul.addtoany_list li a.addtoany_share_save{
  margin:0;
  padding:0 !important;
  width:100px;
  height:32px;
  background:url(images/bookmark-button.png) 0 0 no-repeat;
  text-indent:-9999em;
  overflow:hidden;
  display:block;
}
.hentry ul.addtoany_list li a.addtoany_share_save:hover{background-position:0 -32px;}

.hentry などの先祖要素の指定があると、プラグインの css より優先されるので、ご使用のテーマに合わせてなんか指定してください。こうしてできたのが、このチョイ下にある「SHARE」のブックマークアイコン&ボタンです。ステキ。

プラグインを日本語ローカライズする

ローカライズ周りのコードがテキトウだったり、イジワルされてるところがあるので add-to-any.php を以下のように変更します。はてブ 問題に対する報復かな。

前:204行目 function A2A_menu_locale() {return false;
後:204行目 function A2A_menu_locale() {//return false;

前:206行目 echo get_locale();
後:206行目 //echo get_locale();

前:416行目 <div class="updated fade"><p><strong><?php _e('Settings saved.'); ?></strong></p></div>
後:416行目 <div class="updated fade"><p><strong><?php _e('Settings saved.', 'add-to-any'); ?></strong></p></div>

前:427行目 <h2><?php _e( 'Add to Any: Share/Save ', 'add-to-any' ) . _e( 'Settings' ); ?></h2>
後:427行目 <h2><?php _e( 'Add to Any: Share/Save ', 'add-to-any' ) . _e( 'Settings', 'add-to-any' ); ?></h2>

前:516行目 <span style="margin:0 9px;vertical-align:middle"><?php _e("Text only"); ?>:</span>
後:516行目 <span style="margin:0 9px;vertical-align:middle"><?php _e("Text only", 'add-to-any'); ?>:</span>

さて、肝心なことを忘れてました。このプラグインには日本語化のためのファイルが同梱されていません。ここでも はてブ 問題が。知らんけど。
しょうがないから 日本語.mo 作ったぜ。そうそう、こういったプラグインの日本語化ファイルを配布するのはいいけど、直訳なカタイ言葉だったり、英語のままだったり、?付けてたりなんてのはナシにしようぜ 。これ日本 WPist 協会の掟な。英語を雰囲気で理解したら、普通の日本人が理解できる言葉に置き換えようぜ。「共有/ブックマーク」なんて「ブックマーク」で良いくらいさ。ま、そういうことなんでヨロシクね。AddToAny 管理画面管理画面の日本語は普通の感覚の方にしっくりくるようになってます。見習おう。

CONCLUSION

ちゃんと最後まで読んだあなたのために、日本語ローカライズなバッチリ動作する嬉しい zip ファイルをご用意しました。add-to-any.php と add-to-any-ja.po, add-to-any-ja.mo の3点セットです。需要があるかは知らん。AddToAny にもイジワルすんなよって送りつけてやろう。

追記:AddToAny よりお便り
Thank you very much for doing this.
I agree that AddToAny needs to support Hatena by default, and I will make sure we package in your localization files for the next plugin version.
おぅ、よろしく頼むぜ。
ダウンロード
動作確認バージョン

12 Comments

  • BLOG POST: AddToAny にはてブを追加&日本語ローカライズ http://bit.ly/a1vkLc

  • Ly Ly

    サンキュー

  • kz kz

    ユーアーウェルカム

  • AddToAny からアップデートのお知らせ。http://bit.ly/a1vkLc will be live tonight in AddToAny version .9.9.4.8. 真摯な人達だ。すばらしい。

  • BLOG: AddToAny にはてブを追加&日本語ローカライズ http://bit.ly/a1vkLc

  • AddToAny にはてブを追加&日本語ローカライズ http://bit.ly/aaoWyM via @AddToAny

  • 2010.01.29

  • MIO MIO

    初めまして、いつも楽しく読ませて頂いてます。
    この記事を参考にしてAddToAnyを自分のブログでも導入させて頂きました。

    書かれている通り、うまくtitle名の頭を大文字から小文字に変えてclass名にする方法は無いものかと考えまして、汚いコードですがblogに書いてみました。
    一度title名を抜き出してstrtolower()で小文字化するという感じです。
    こんな手間をかけてまでやる必要があるかっていう話ではありますけど・・・
    もっと上手く処理するやり方があるかもしれません。

    P.S. wpxtremeさんのサイトデザイン大好きです。これからも楽しみにしています。

    • kz kz

      小文字化&スペース除去お見事です。
      MIO さんを見習って細かいところで手を抜かないよう精進します。

      コードばっかりだと華が無いのでデザイン寄りな記事を増やそうかと妄想中です。

  • wordpress AddToAny はてな