ソーシャルメディアへの登録を増やそう！

デフォルトで500のソーシャルブックマークやサービスに対応しているAddThis。

海外でも人気の「Evernote」、「StumbleUpon」は簡単に追加できますが、「mixi check」には対応していないのでカスタマイズして追加しました。

追加方法

投稿のループファイルに以下のコードを追加してください。
Twenty Tenでは「loop-single.php」、Twenty Elevenの場合は「content-single.php」。

<?php /* AddThisにmixi check、Yahoo! Japan、evernote、stumbleuponを追加 */ ?>
<script type='text/javascript'>//<![CDATA[
var addthis_config = {
	ui_language: "ja",
	"data_track_clickback":true,
	ui_cobrand: "Oxy notes",
	services_compact: 'favorites, google, bookmarks.yahoo.co.jp, mixi.jp, evernote, stumbleupon, more',
	services_custom: [{
		name: 'mixi check',
		url: 'http://mixi.jp/share.pl?u={{URL}}&k=<data-key>',
		icon: '/wp-content/themes/twentyten/images/bt_check_16px.png',
	},{
		name: 'Yahoo! Japan',
		url: 'http://bookmarks.yahoo.co.jp/action/bookmark?t={{TITLE}}&u={{URL}}',
		icon: 'http://i.yimg.jp/images/sicons/ybm16.gif',
	}]

};
var addthis_localize = {
	share_caption: "ブックマークに登録する",
	favorites: "ブラウザに登録",
	more: "その他のサービス"
};

//]]></script>

AddThisのボタンカスタマイズ方法を解説

もともとAddThisでサポートしているサービスは「services_compact:」に追加するだけで簡単に表示することができます。
それぞれ「evernote」が「Evernote」、「stumbleupon」が「StumbleUpon」に対応しています。

mixi checkはサポートされていないので「services_custom:」で新たに追加します。
9行目「name:」でボタン名、
10行目「url:」にボタンのURL、
11行目「icon:」でアイコンを指定します。

ボタンに表示するmixi check用の16pxのボタンは公式では用意されていないので、自分で作成して「wp-content\themes\twentyten\images」フォルダに保存しました。

リクエストを頂いたので16pxのmixiボタンを公開します。お好きにご利用ください。
bt_check_16px

「url:」ですが、mixi checkではJavaScriptが使えない環境用に以下のフォーマットをサポートしています。
「http://mixi.jp/share.pl?u=<data-url>&k=<data-key>」

そこでサイトに合わせるために
「<data-url>」に「{{URL}}」、
「<data-key>」に「mixi Developer Centerで取得したdata-key」を指定しました。

以前の投稿で解説した「Yahoo!bookmark」も追加しています。

動作サンプルはこのページの下部にボタンが表示せれているので、ぽちぽち押してみてください。
さらに詳しい解説は「以前の投稿」をご覧ください。