AddThis ソーシャルブックマーク登録ボタンのカスタマイズ

ホーム > WordPress > AddThis ソーシャルブックマーク登録ボタンのカスタマイズ

AddThis ソーシャルブックマーク登録ボタンのカスタマイズ

2010 年 5 月 1 日 tokkonoPapa コメントをどうぞコメント

AddThis Title
ちょっと前から AddThis ボタンを使い始めています。WordPress プラグインのダウンロード数ではイマイチ他に水をあけられていますが、無料であるとか登録先が豊富であるとか以外に、このサービスの優れたところとして次のような事が挙げられます。

事前にユーザー登録をしておくと、ブックマーク登録者数の統計解析サービスが受けられる。
WordPress ではダッシュボード上に「昨日の登録者」情報が表示される。
Unobtrusive JavaScript の考え方を元にコンテンツ・見栄え・振る舞いを分離した API を採用。
その結果、ボタンデザインやブックマーク登録先の新規追加など、カスタマイズ性が非常に高い。

今回はこの AddThis に日本のブックマークサービスを登録するための API まとめと、WordPress用の AddThis プラグインのカスタマイズの方法についてまとめてみました。

API の概要

カスタマイズの方法は大きく分けて Javascript を使わず AddThis のサーバーを介して直接ソーシャル・サービスに接続する方法と、Javascript によって単純化された AddThis Menu API を介してソーシャル・サービスに接続する方法との2つがあります。前者は予め決められたソーシャル・サービスしか使えませんので、ここでは後者を取り上げることにします。

AddThis Menu API

見た目や振る舞いを制御するためのユーザーインターフェース用 API （UI Configuration）と、パーマリンクやタイトルなどコンテンツ情報を管理する API （Sharing Configuration）の2つに大別することが出来ます。さらにそれぞれは、ページ全域で有効となるグローバルな設定方法（Global Configuration）と、ページ内の各ボタンに適用するローカルな設定方法（Instance Configuration）とがあります。

WordPress では例えば Category や Archive は1ページ内に複数の記事を表示し、それぞれの記事に登録ボタンをつけることが想定されますので、これらを次のような使い方で組み合わせると良いと思います。

新たなソーシャル・サービスの追加は UI Configuration のグローバルな設定方法を用いる。
各記事のパーマリンクやタイトルはSharing Configuration のローカルな設定方法を用いる。

新たなソーシャル・サービスの追加

特別なグローバル変数 addthis_config を用いて以下の様に定義します。

var addthis_config = {
	services_custom: [{
		name: 'Sample1',
		url: 'http://example.com/add?url={{URL}}&title={{TITLE}}',
		icon: 'http://example.com/image/sample1.gif'
	},{
		...
	}]
}

{URL} や {TITLE} は Sharing Configuration により記事のパーマリンクとタイトルに置き換えられます。name は AddThis Menu に表示される名前、icon は表示されるアイコンとなります。また url で指定される http://ドメイン名/ の ドメイン名 の部分が後述の登録ボタンの設置で指定する サービス名 となります。

このファイルを addthis-jp.js などとして別ファイルにしておけば、サービスの追加・修正が容易となるでしょう。

記事のパーマリンク／タイトルの指定と登録ボタンの設置

登録ボタンはブロック要素とリンク要素にそれぞれセレクタ addthis_toolbox、addthis_button を指定することで設置します。

<div class="addthis_toolbox addthis_default_style" addthis:url="http://example.com/?page=1" addthis:title="Title of page 1">
	<a class="addthis_button_サービス名1"></a>
	<a class="addthis_button_サービス名2"></a>
	...
</div>

リンク要素に指定する addthis_button_... セレクタは、その外側のブロック要素に指定されるセレクタ addthis_toolbox の子クラス（だと思う）で、親クラスの addthis:... により指定される記事のパーマリンクとタイトルを継承します。また親にセレクタ addthis_default_style 指定すると、子となるボタンを横一列に配置することが出来ます。

HTML の構成

上記2つの設定を組み合わせ、HTML を次のように記述します。

<!-- ADDTHIS BUTTON BEGIN -->
<div class="addthis_container addthis_default_style" addthis:url="http://example.com/?page=1" addthis:title="Title of page 1">
	<a class="addthis_button_clip.livedoor.com"></a>
	<a class="addthis_button_bookmarks.yahoo.co.jp"></a>
	// ...
	<a class="addthis_button_compact">more...</a>
</div>
<script type="text/javascript" src="http://example.com/wp-content/plugins/addthis/js/addthis-jp.js"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=USERNAME-HERE"></script>
<!-- ADDTHIS BUTTON END -->

8行目において、ソーシャル・サービスの追加定義を読み込みます。また9行目において、AddThis のサーバーから Javascript をロードすると共に、登録ユーザー名を（USERNAME-HEREの部分は自分のユーザー名に修正して）指定します。

WordPress の AddThis プラグインを改造する

前章の情報を元に、実際に日本でなじみのあるソーシャルサービスを追加する手順について解説をします。

WordPress で使うなら既存のプラグインを元に改造する方が簡単です。get_permalink() や the_title() で記事のパーマリンクやタイトルを埋め込む処理をしてくれるからです。ここでは AddThis プラグイン 1.6.3 を元に改造の手順を解説します。

AddThis ボタンの変更

日本のソーシャル・サービスがあることをアピールするために Dropdown メニューを選択した場合のボタンデザインを変えちゃいましょう。まず左上の様なボタン画像 bookmark-jp.gif を作り、wp-content/plugins/addthis/image に放り込みましょう。次にこのボタンを AddThis の管理画面で選択可能なように addthis_social_widget.php の56～57行目付近を以下の様に変更します。http://example.com の部分は適当に書き換えて下さい。

$addthis_styles = array(
                      'share' => array('img'=>'lg-share-%lang%.gif', 'w'=>125, 'h'=>16),
                      'bookmark' => array('img'=>'lg-bookmark-en.gif', 'w'=>125, 'h'=>16),
                      'addthis' => array('img'=>'lg-addthis-en.gif', 'w'=>125, 'h'=>16),
                      'share-small' => array('img'=>'sm-share-%lang%.gif', 'w'=>83, 'h'=>16),
                      'bookmark-small' => array('img'=>'sm-bookmark-en.gif', 'w'=>83, 'h'=>16),
                      'plus' => array('img'=>'sm-plus.gif', 'w'=>16, 'h'=>16)
                      /* Add your own style here, like this: */
                        , 'custom' => array('img'=>'http://example.com/wp-content/plugins/addthis/image/bookmark-jp.gif', 'w'=>125, 'h'=>16)
                    );

ソーシャル・サービスの定義と読み込み

addthis-jp.zip ← 新たに12のソーシャルサービスを定義したファイル addthis-jp.js を作りました。大したスクリプトではありませんが、プラグイン本体に準じ GPL 2 の元に配布します。解凍後、image と js ディレクトリごと wp-content/plugins/addthis/ にアップロードして下さい。内容に誤りがあった場合、ご一報頂けると幸いです

続いて addthis_social_widget.php の323行目付近にこの addthis-jp.js を読み込むように改修します。

    $content .= "\n<!-- AddThis Button BEGIN -->\n".'<script type="text/javascript" src="'.WP_PLUGIN_URL.'/addthis/js/addthis-jp.js"></script>'."\n".'<script type="text/javascript">'."\n//<!--";

expanded menu のカスタマイズ

「もっと見る」をクリックした時 expanded menu に表示されるサービス一覧を日本でなじみのあるサービスに限定するために、特別なグローバル変数 addthis_config に services_expanded を設定します。詳しいコードは上述の addthis-jp.zip 内の addthis-jp.js をご覧ください。これにより日本のソーシャルサービス「AddClip」にかなり近いモノになると思います。

AddThis 設定画面でサービスを指定する

WordPress 管理画面の AddThis 設定で、Button style: に custom を選択してください。

また Dropdown/Toolbox Services: に次のソーシャル・サービス名を入力し、最後に「変更を保存」ボタンを押します。

hatena,bookmarks.yahoo.co.jp,clip.nifty.com,topic.nifty.com,clip.livedoor.com,bookmark.goo.ne.jp,bookmark.fc2.com,newsing.jp,buzzurl.jp,www.choix.jp,www.iza.ne.jp,www.flog.jp,bookmark.corich.jp

Menu type: の設定に応じて下のようなメニューが表示されれば成功です。

Dropdownタイプ
Toolboxタイプ

2010年5月20日追記

上記サービスの設定は “toolbox” メニュー用だったのですが、バージョン1.6.4で “static” メニューのバグ（”language” に “Automatic” を選択すると画像がリンク切れになる）が修正されたのに伴い、 “dropdown” メニューに表示されるソーシャル・サービスもここでの設定に限定されるようになりました。Dropdown/Toolbox Services: という名前からすればこの仕様が正しとは思いますが、私としては “toolbox” を使う場合にのみ、設定したほうが良いように思います。

HTTPリクエストの増加数

このサイトでは何度かサイトの表示レスポンス改善について取り上げてきましたので、以上の改造によりどのぐらいHTTPリクエスト数が増えるか気になるところです。AddThis はこの辺りが優れた実装になっており、Dropdownタイプであればマウスを載せたときに始めて追加したボタン画像などを読み込みに行くので、実際それほど酷い事にはなりません。

5月17日追記

AddThis ユーザーフォーラムに IE6 – Error: Expected ‘}’ および IE6 and IE7 Syntax Error の話題があり、回避策が掲載されています。私が持っているIE6でテストしたところではエラーは発生していませんが、環境によっては出るようです。念のため、それぞれのトピックスの最後に掲載されている回避策を予めとっておいたほうが良いかもしれません。WordPress のプラグインであれば addthis_social_widget.php の以下の部分（2箇所）を修正すればOKです。

修正前

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username='.$pub.'"></script>

修正後

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub='.$pub.'"></script>

参考情報

AddThis – Help

ソーシャルブックマーク登録ボタンの設置方法

Yahoo
@nifty
- ~~サイトにクリップボタンを設置する｜@nifty クリップ~~
- ~~「トピックイット」の使い方　トピックイット：@nifty~~ （2011年3月30日サービス終了）
newsing（ニューシング）
- ピックアップボタン設置方法
Buzzurl [バザール]
livedoor クリップ
はてなブックマーク
gooブックマーク
- ~~ブックマークレット~~ （2011年3月31日サービス終了）
FC2ブックマーク
- ~~自分のページをブックマークしてもらうには~~ （2011年2月16日サービス終了）
ニュースの価値を自分で決める【Choix】
- 便利な機能 : Choixリンクボタン
イザ！
- イザ！ブックマークアイコンの設置について
フロッグ
- フロッグブックマークレット
CoRichブックマーク！
- ブックマークレットヘルプ
POOKMARK Airlines
- 「POOKMARK Airlines」サービス終了のお知らせ
- JUGEMから重要なお知らせ

カテゴリー: WordPress タグ: plugin, tips

ゆっくりと…