AddThisにEvernote、StumbleUpon、mixi checkを追加する方法


投稿日:2012年12月22日
  • 4
  • 0



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

デフォルトで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」も追加しています。


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


現在のページを共有する



現在のページに関連する記事

AddThisにEvernote、StumbleUpon、mixi checkを追加する方法 「最新版」WordPressに各種ソーシャルメディアボタンを追加する方法
WordPressにGoogle+、Facebook、Twitterボタンを追加 WordPressにGoogle+、Facebook、Twitterボタンを追加
AddThisにEvernote、StumbleUpon、mixi checkを追加する方法 WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデザインに変更
WordPressでオリジナルデザインのホームページを作る方法 WordPressでオリジナルデザインのホームページを作る方法
WordPressをインストールしたら初めに設定する項目 WordPressをインストールしたら初めに設定する項目
AddThisにEvernote、StumbleUpon、mixi checkを追加する方法 もう覚えなくても大丈夫!?WordPressの条件分岐タグの使い方まとめ
AddThisにEvernote、StumbleUpon、mixi checkを追加する方法 WordPressでpathやURLを取得するためのタグと出力例まとめ

おすすめの記事

WordPressの新・旧ループからカスタムクエリ・アーカイブまで徹底解説

WordPressの新・旧ループからカスタムクエリ・アーカイブまで徹…

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設

Excelでセルとセルの間をダブルクリックすると移動する機能を停止する方法

Excelでセルとセルの間をダブルクリックすると移動する機能を停…

GMO系列のホスティングサービスでGmailへメールが送信できない不具合が発生中

GMO系列のホスティングサービスでGmailへメールが送信できない…

Google Fontsの日本語フォント「Noto Fonts」の使い方

Google Fontsの日本語フォント「Noto Fonts」の使い方

5段階評価プラグインを通して学ぶPukiWikiのプラグインを作成する方法

5段階評価プラグインを通して学ぶPukiWikiのプラグインを作成す…

Linuxでサーバを構築するに当たって必要になる基礎知識

Linuxでサーバを構築するに当たって必要になる基礎知識

UWSCでEXCELの作業を自動化する方法

UWSCでEXCELの作業を自動化する方法


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。