簡単にTwitterのツイートボタンやFacebookのいいね！を設置できるjQueryプラグイン「jQuery.multiSocialService」

バージョンアップにて以下の機能が追加されています！

軽量・簡易版のFacebook Likeやツイートボタン、Like数やツイート数の表示が可能に（バージョンアップ説明ページ）

このjQueryプラグインはWebページに簡単にTwitterのツイートボタンなどを設置できるようにしたものです。
現在、以下のサービスに対応しています。

Contents(目次)

現在対応しているサービス

Twitter(Tweet Button)
Twitter(Follow Button)(2011/11/10から)
Facebook(Like Button)
Facebook(Comments Button)(2011/11/10から)
はてなブックマーク
Evernote(clip)
mixi チェック
mixi イイネ！ボタン
GREE いいね！ボタン
google +1 ボタン(version 1.2以降)

ライセンス

当プラグインはMITライセンスで提供をします。

公開先

当プラグインはGitHubで公開をしています。

manji6/jquery.multiSocialService – GitHub

サンプル

サンプルページはこちらになります。

jQuery.multiSocialServiceのテストページ

使い方

ソーシャルボタンを設置するにあたり、当プラグインでは2つの方法があります。

まとめて設置する
個別に設置する

まずはまとめて設置する方法について説明します。

まとめて設置する

まとめて設置する場合は簡単です。基本的にはセットメソッド1つでいいのですが、mixiの「イイネ！」ボタンを設置する際にservice_keyが必要になります。
その設定だけ追加してもらえれば表示可能です。

  //jquery.multiSocialServiceの設定
  $.multiSocialService.mixi.like.service_key = "サービスキー(mixiで取得)";
  //表示設定
  $("展開先の要素(divタグ等)").setMultiSocialService();

これでOKです。

個別に設置する

当ライブラリでは、特定のサービスごとに設置をすることも可能です。その際は各サービスごとのHTML取得メソッドを叩けばOKです。

サービス名	メソッド名	備考
はてなブックマーク	$(“element”).setHatenaBookmark(option)	elementは設置先の要素、optionは後述
Twitter Tweet	$(“element”).setTwitter(option)	elementは設置先の要素、optionは後述
Twitter Follow	$(“element”).setTwitterFollow(option)	elementは設置先の要素、optionは後述
Facebook Like	$(“element”).setFacebookLike(option)	elementは設置先の要素、optionは後述
Facebook Comments	$(“element”).setFacebookComments(option)	elementは設置先の要素、optionは後述
Evernote Clip	$(“element”).setEvernoteClip(option)	elementは設置先の要素、optionは後述
mixi チェック	$(“element”).setMixiCheck(option)	elementは設置先の要素、optionは後述
mixi イイネ！	$(“element”).setMixiLike(option)	elementは設置先の要素、optionは後述
GREE イイネ！	$(“element”).setGreeLike(option)	elementは設置先の要素、optionは後述
Google +1	$(“element”).setGooglePlus1(option)	elementは設置先の要素、optionは後述

optionは設定オブジェクトになります。

各種設定について

当ライブラリは各種ソーシャルサービスごとに設定を書き換えることが出来ます。
なお、一括で設定を書き換える際には$.setMultiSocialService(option)の引数にオブジェクト型で指定すればOKです。

設定方法

一括に設定する場合

	$.multiSocialService = { twitter:{ type: "horizontal"}};
	//$.multiSocialServiceに対して下記に書いたような構造のオブジェクトを設定すればOK

個別に設定する場合

	//例えばTwitterボタンの場合
	$.setTwitter( {type: "horizontal"});
	//下記の設定項目における”twitter"配下の構造オブジェクトを設定すればOK

設定オブジェクトまとめ

ものすごく多いのですが、基本的に本家準拠です。
大サービス名 -> 小サービス名 -> 設定キーという形です。

hatenaBookmark	type	“standard” or “vertical” or “simple”	表示方法(default”standard”)
twitter Tweet	type	“vertical” or “horizontal” or “none”	表示方法(default “horizontal”)
	lang	“ja” “en” and so on…	表示言語(default “ja”)
	text		ツイート内のテキスト（default ページタイトル)
	via		おすすめユーザー(default null)
twitter Follow	user	“manji6”	フォロー対象とするuserID(default null)
	data-button	“” or “gray”	フォローボタンのデザイン(default “”)
	lang	“ja” “en” and so on…	表示言語(default “ja”)
	data-text-color	“#ff9900”	表示テキストカラー（default “”)
	data-link-color	“#ff9900”	表示リンクカラー（default “”)
	show_count	“true” or “false”	Follow数を表示するか?(default “true”)
facebook likebutton	type	“like” / “recommend”	表示内容(default “like”)
	show_faces	“true” / “false”	フェイス表示をするか？(default “false”)
	color	“light” / “dark”	カラースキーマ(default “light”)
	width	px数値	幅(default 100)
	height	px数値	高さ(default 23)
	lang		表示言語(default “”)
	ogp	{title: document.title, image: “”, description: “”, app_id: “”, type: “blog”, site_name: “” }	上から順番にタイトル名、サムネイル画像、概要文章(文字列)、アプリID、記事タイプ、サイト名
Facebook Comments	app_id	数字文字列	FacebookのアプリケーションID（FacebookDevelopersから発行) (必須。ただしHTMLに既にfb:app_idを設置してある場合は不要)
	num_posts	数字	表示する件数(default “3”)
	width	数字	表示幅(default “500”)
evernote	targetId	ID名	クリッピング対象となるDOM要素のID値(default “container”)
	name	String	Webサイト名(default “”) ※空白の場合はドメイン名が利用されます
	tag	String	候補となるタグ(default “”)
	url	String	クリップ内容に含まれるURL(default “”) ※空白の場合はそのページのURLが利用されます
	noteTitle	Stirng	ノートタイトル(default $(“title”).text())
mixi	check	data-key	String データキー(default null) (必須)
		data-url	String URL(default null)
		data-button	表示種類(default “button-1”)
	like	href	String URL(default null)
		service_key	String mixi Developer Dashboardで発行される識別キー(必須)
		width	Number 幅(default 450)
		height	Number 高さ(default 80)
		show_faces	String フェイスアイコンの表示(default “false”)
gree	like	href	String URL(default null)
		service_key	String mixi Developer Dashboardで発行される識別キー(必須)
		type	Number 表示タイプ(default 0)
		height	Number 高さ(default 20)
google	+1	lang	表示言語(default “ja”)
		count	カウンター表示(default true)
		callback	コールバック関数名(default “”)
		size	String サイズ種類(default “”)

基本的にパラメーター名は各ソーシャルサービスで説明されている内容とほぼ合致しているはずです。
各ソーシャルサービスの詳しいパラメーター内容に関しては、以下の各リンクを参照してください。

はてなブックマーク:使いやすくなりました! はてなブックマークボタン<
Twitter:Twitter / ツイートボタン<
Facebook:Like Button – Facebook開発者
Evernote(サイトメモリー):サイトメモリーって何？ | Evernote Corporation
mixi check:技術仕様 << mixi Developer Center (ミクシィデベロッパーセンター)
mixi イイネ！:技術仕様 << mixi Developer Center (ミクシィデベロッパーセンター)
GREE いいね！:Social Feedback – GREE Developer Center（グリーデベロッパーセンター）
Google+1: +1 ボタンをサイトに追加 – +1 button API – Google Code

バージョン情報

2011/08/05 OGP設置メソッドをFacebookから分離。$.setOGP()で設置可能。また文字コードバグを修正
2011/04/04 1.1.0を公開。OGP出力に対応。
2011/04/04 1.0.0を公開。

バグや要望に関して

バグや要望、使い方質問などがありましたらTwitter @manji6 にまでご連絡ください。よろしくお願い致します。