HOME
BLOG

はてブ、Twitter、Facebook、Google+ などのソーシャル系サービスの API を手軽に使用できるようにする jQuery プラグイン

2014-02-06

Social Info は、はてなブックマーク数や Twitter のつぶやき数などを取得するソーシャル系サービスの API を簡単に利用できるようにする jQuery プラグインです。独自デザインのソーシャルボタンなどを自作する際に利用すると便利かと思います。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。

使い方

jQuery、jQuery Sitekit（または Social Info）の JS ファイルを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.social-info.js"></script>

以下の形式で各種データを取得することができます。

$.si.[サービス名].[メソッド名]( 引数 )

サービス名には、hatebu、twitter、facebook、googleplus のいずれかを指定します。

はてブ数、Twitter/Facebook での共有数の取得

指定 URL のはてブ数や Twitter/Facebook での共有数を取得することができます。

$.si.hatebu.getEntryCount('http://www.cyokodog.net', function( count ){
    alert('www.cyokodog.netのはてブ数は' + count + '件です');
});
 
$.si.twitter.getEntryCount('http://www.cyokodog.net', function( count ){
    alert('www.cyokodog.netのつぶやかれ数は' + count + '件です');
});
 
$.si.facebook.getEntryCount('http://www.cyokodog.net', function( count ){
    alert('www.cyokodog.netのFacebookでの共有数は' + count + '件です');
});

URL の指定を省略すると、表示されてるページの URL が適用されます。

$.si.hatebu.getEntryCount(function( count ){
    alert('このページのはてブ数は' + count + '件です');
});

はてブ登録画面／共有投稿画面の URL の取得

指定 URL のはてブ登録画面や Twitter/Facebook/Google+ の共有投稿画面の URL を取得することができます。

var url = $.si.hatebu.getEntryUrl('http://www.cyokodog.net');
 
var url = $.si.twitter.getEntryUrl('http://www.cyokodog.net');
 
var url = $.si.facebook.getEntryUrl('http://www.cyokodog.net');
 
var url = $.si.googleplus.getEntryUrl('http://www.cyokodog.net');

share facebook

URL の指定を省略すると、表示されてるページの URL が適用されます。

var url = $.si.hatebu.getEntryUrl();

検索結果画面の URL の取得

指定した URL の検索結果表示画面の URL を取得することができます。

var url = $.si.hatebu.getSearchUrl('http://www.cyokodog.net');
 
var url = $.si.twitter.getSearchUrl('http://www.cyokodog.net');
 
var url = $.si.facebook.getSearchUrl('http://www.cyokodog.net');
 
var url = $.si.googleplus.getSearchUrl('http://www.cyokodog.net');

URL の指定を省略すると、表示されてるページの URL が適用されます。

var url = $.si.hatebu.getSearchUrl();

指定サイトのはてブ人気記事の取得

指定サイトのはてブにおける人気記事（はてブ数の多い記事）の情報を JSON 形式で取得することができます。

$.si.hatebu.getEntryList('http://www.cyokodog.net', function(json){
 
    //JSONを整形して表示
    alert(JSON.stringify(json, null, '    '));
});

ちなみに JSON の内容を確認する際、上記のように JSON.stringify を使用するときれいに整形され見やすいです（IE7以下は非対応）。

以下は http://www.cyokodog.net/ を指定した場合の取得データです。

[
    {
        "link": "http://www.cyokodog.net/blog/wordpress-my-setting-plugin/",
        "count": "24",
        "title": "WordPress のこまごました設定をまとめてできるプラグインを..."
    },
    {
        "link": "http://www.cyokodog.net/blog/jquery19-browser/",
        "count": "22",
        "title": "CYOKODOG - jQuery 1.9 で $.browser が使えなくなってしまった対策"
    },
    {
        "link": "http://www.cyokodog.net/blog/jquery-ex-code-prettify/",
        "count": "14",
        "title": "Google Code Prettify のかゆいとこをなんとかする jQuery プラグイ..."
    },
    {
        "link": "http://www.cyokodog.net/blog/jquery-sitekit/",
        "count": "11",
        "title": "Web サイト作成時に必要になりがちな機能をまとめた jQuery Si..."
    },
    {
        "link": "http://www.cyokodog.net/",
        "count": "6",
        "title": "Cyokodog"
    },
    {
        "link": "http://www.cyokodog.net/blog/gmail-client/",
        "count": "5",
        "title": "Google 以外のメールアカウントで Gmail をメールクライアント..."
    },
    {
        "link": "http://www.cyokodog.net/blog/keyinfo-doc/",
        "count": "4",
        "title": "[Keyinfo] 入力キーの種類を調べることができる jQuery プラグ..."
    },
    {
        "link": "http://www.cyokodog.net/blog/ex-code-prettify-doc/",
        "count": "4",
        "title": "[Ex Code Prettify] その場で編集／実行できるシンタックスハイ..."
    },
    {
        "link": "http://www.cyokodog.net/blog/jquery-hash-contents/",
        "count": "4",
        "title": "location.hash の値に応じ表示コンテンツを切り替える jQuery プ..."
    },
    {
        "link": "http://www.cyokodog.net/blog/bootstrap-datetimepicker-ja/",
        "count": "4",
        "title": "Bootstrap ベースの日付／時刻ピッカー Bootstrap Datetime Picker を..."
    }
]

第２引数にソート順を指定することができます。

// 新着順で取得
$.si.hatebu.getEntryList(url, 'eid', function(json){
    …
});

以下の値を指定できます。

eid … 新着順
hot … 注目順
count … 人気順

URL の指定を省略すると、表示されてるページの URL が適用されます。

$.si.hatebu.getEntryList(function(json){
    ...
});

はてブしてるユーザ情報の取得

指定 URL をブックマークしてるはてなユーザの情報を JSON 形式で取得することができます。

$.si.hatebu.getEntry('http://www.cyokodog.net', function(json){
 
    //JSONを整形して表示
    alert(JSON.stringify(json, null, '    '));
});

以下は http://www.cyokodog.net/blog/jquery-sitekit/ を指定した場合の取得データです。

{
    "count": "11",
    "bookmarks": [
        {
            "timestamp": "2013/11/19 07:55:06",
            "comment": "",
            "user": "site159",
            "tags": [
                "jQuery",
                "Facebook",
                "twitter",
                "Google"
            ]
        },
        {
            "timestamp": "2013/08/12 18:03:01",
            "comment": "",
            "user": "y55",
            "tags": [
                "*jQuery",
                "*plugin"
            ]
        },
        {
            "timestamp": "2013/08/12 15:05:22",
            "comment": "",
            "user": "jaga291",
            "tags": [
                "ソーシャルボタン",
                "jquery"
            ]
        },
        {
            "timestamp": "2013/08/12 02:38:57",
            "comment": "",
            "user": "ymn",
            "tags": [
                "jquery"
            ]
        },
        {
            "timestamp": "2013/08/04 03:17:17",
            "comment": "",
            "user": "moonblogger",
            "tags": [
                "jQuery"
            ]
        },
        {
            "timestamp": "2013/07/13 23:24:17",
            "comment": "Web サイト作成時に必要になりがちな機能をまとめた jQuery Sitekit | Cyokodog",
            "user": "oppara",
            "tags": []
        },
        {
            "timestamp": "2013/07/04 08:54:47",
            "comment": "",
            "user": "gungnir_odin",
            "tags": [
                "*あとで読む"
            ]
        }
    ],
    "url": "http://www.cyokodog.net/blog/jquery-sitekit/",
    "eid": "152933618",
    "title": "Web サイト作成時に必要になりがちな機能をまとめた jQuery Sitekit | Cyokodog",
    "screenshot": "http://screenshot.hatena.ne.jp/images/200x150/d/5/0/2/8/3bb0568cd22464a81a4cf8747e101f2ee7c.jpg",
    "entry_url": "http://b.hatena.ne.jp/entry/www.cyokodog.net/blog/jquery-sitekit/"
}

URL の指定を省略すると、表示されてるページの URL が適用されます。

$.si.hatebu.getEntry(function(json){
    …
});

はてブユーザ画像の取得

指定したはてなユーザＩＤの画像 URL を取得できます。

var url = $.si.hatebu.getProfileImgUrl('cyokodog');

はてブ数画像のの取得

指定した URL のはてブ数画像の URL を取得できます。

var url = $.si.hatebu.getEntryImgUrl('http://www.google.co.jp');

ダウンロード

こちらからどうぞ。

jquery.sitekit – GitHub

参考にした記事