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

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

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

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

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

  • 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. まとめて設置する
  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 “”)

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

バージョン情報

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

バグや要望に関して

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