A repository of over 1000 quality jQuery plugins

jQuery jQuery Popn Socialbutton

jQuery Popn Socialbutton is a jQuery Social & RSS plugin.

Created by Ktty1220

Twitter, Facebook, Google+1, ?????????, Pocket????????????????jQuery?????

Not what you're looking for? Click here to view more Social & RSS jQuery plugins

jQuery POP'n SocialButton

Twitter, Facebook, Google+1, はてなブックマーク, Pocketのカスタムシェアボタンを表示するjQueryプラグイン(おまけでGitHubリポジトリのスター数ボタンとFeedlyの購読ボタン)

example1

上記のようなちょっと変わったシェアボタンを表示できます。それぞれのボタンにマウスカーソルを合わせると、ボタンがピョコっと浮き上がります。CSSを独自に指定する事でボタンのカスタマイズも可能です。

example2

また、公式のGoogle+1ボタンはIE7などの古いブラウザでは表示されませんが、jQuery POP'n SocialButtonでは表示する事ができます。

ボタンをクリックすると各サービスのシェア登録ページを、シェア数をクリックすると各サービスのコメント一覧ページを別ウインドウで開きます。ただし、FacebookやGoogle+1などのコメント一覧を見る方法がない(と思う)サービスに関してはシェア数をクリックしても何も起こりません。

今のところの対応サービスは、Twitter, Facebook, Google+1, はてなブックマーク, Pocket, GitHub, Feedlyです。

ただし、Google+1, Pocket, Feedlyに関しては公式でサポートされていない方法でシェア数を取得している為、ある日突然使用できなくなる可能性がありますのでご注意ください。

他のサービスのシェア数の取得方法とシェアリンクのURL・パラメータの情報を提供頂ければ追加するかもしれません。

デモ

実際に設置してみたデモはこちらにあります。

使用方法

  1. 同梱のjsディレクトリとimgディレクトリをサーバーに設置します(jsディレクトリ内の.coffeeファイルは必要ありません)。

  2. HTML内でjquery.jsとjquery.popn-socialbutton.jsを読み込みます。
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.popn-socialbutton.js"></script>
  1. HTML内にシェアボタンを表示させたい空のエレメントを用意します。
<div id="social-button"></div>
  1. Javascript内で上記エレメントに対してpopnSocialButton()を実行します。
$('#social-button').popnSocialButton([ 'twitter', 'facebook', 'hatebu', 'gplus', 'pocket' ]);

$( element ).popnSocialButton(services[, options])

services

表示させたいシェアボタンのサービス名を配列で指定します。

配列で指定した順番にシェアボタンを表示します。

サービス名一覧

  • twitter
  • facebook
  • hatebu
  • gplus
  • pocket
  • github(githubRepoオプションを指定する必要があります)
  • feedly(feedUrlオプションを指定する必要があります)

options (省略可能)

表示をカスタマイズするオプションの連想配列を指定します。

  • url

    シェアするURLです。デフォルトは現在のページのURLです。

  • text

    シェア内容に付加するテキストです。デフォルトは現在のページのタイトルです。サービスによってはこの指定が効かないものもあります。

  • imgDir

    シェアボタンの画像があるディレクトリの場所を変更します。デフォルトは'./img'です。

  • buttonSpace

    シェアボタンの表示間隔をpx単位で指定します。デフォルトは24です。

  • countPosition

    シェア数の表示位置を連想配列で指定します(top or bottom と left or rightの組み合わせ)。デフォルトは{ top: 32, right: -12 }です。

  • countSize

    シェア数のフォントサイズを指定します。デフォルトは11です。

  • countColor

    シェア数の文字色や背景色を連想配列で指定します。指定できる色は以下の通りです。

        countColor: {
      text: '#ffffff',       // 文字色です。
      bg: '#cc0000',         // 背景色です。
      textHover: '#ffffff',  // マウスポインタを合わせた時の文字色です。
      bgHover: '#ff6666',    // マウスポインタを合わせた時の背景色です。
      border: '#ffffff'      // 枠色です。
    }

  • githubRepo

    servicesにgithubを指定した場合は必須です。その他のサービスでは無視されます。

    スター数を表示させたいGitHubリポジトリを以下の様に指定します。

    githubRepo: 'ktty1220/jquery.popn-socialbutton'

  • feedUrl

    servicesにfeedlyを指定した場合は必須です。その他のサービスでは無視されます。

    Feedly購読者数を表示させたいフィードのURLを以下の様に指定します。

    feedUrl: 'http://feeds.feedburner.com/hatena/b/hotentry'

  • popupWindow

    シェアボタンを押したときに表示されるポップアップウインドウのサイズを指定します。デフォルトは{ width: 640, height: 480 }です。

    GitHub, Feedlyに関してはポップアップではなく別ウィンドウで開くのでこのオプションは無視されます。

表示のカスタマイズ

シェア数の部分の要素はpopn-socialbutton-countというクラス名を持っています。

シェア数に関してカスタマイズをしたい場合はCSSで別途このクラス名に対して指定してください。

#social-button .popn-socialbutton-count {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-width: 1px !important;
}

オプションをはじめ、具体的な使用例はexample.htmlをご覧ください。

その他

内部で指定しているCSSのベンダープレフィックスはjQueryに任せています。

jQueryが自動でベンダープレフィックスを追加するようになったのはバージョン1.8からなので、それ以前のjQueryと合わせて使用する場合は利用者側でCSSで指定する必要があるかもしれません。

対応ブラウザ

  • モダンブラウザ
  • IE6以上(IETesterで確認)

ただしIE8以下では丸角や影を使用できないので見た目はあまり良くありません。

謝辞

Changelog

0.1.9 (2014-11-23)

  • Feedlyに対応

0.1.8 (2014-01-08)

  • Pocketに対応
  • ポップアップウインドウのサイズをオプションで変更できるように変更

0.1.7 (2013-06-16)

  • IE6でGoogle+1ボタンのシェア数が表示されていなかったのを修正
  • GitHubボタンを押すと小窓で開いていたのを修正

0.1.6 (2013-06-15)

  • Google+1、GitHubリポジトリに対応
  • シェア数のデフォルトフォントサイズを10から11に変更
  • Facebookのシェア数取得でURLを2重にエンコードしていたのを修正(問題なく動作はしていた)

0.1.5 (2013-05-26)

  • Facebookのシェア数がいいねボタンと異なる場合があるサイトに暫定対応

0.1.4 (2013-04-11)

  • Facebookのシェア数をFQLを使用して取得するように変更

0.1.3 (2013-04-05)

  • buttonSpaceをmargin-leftとmargin-rightに設定していたのをmargin-leftのみにして、先頭のボタンのmargin-leftを0にする方式に変更

0.1.2 (2013-04-05)

  • Facebookのいいねボタンの挙動に合わせて、Facebookのシェア数にはリンクを貼らないようにした
  • yui-compressorで圧縮時にエラーになるのを修正
  • リンクをクリックした時などにリンク周りに点線が出ないようにした
  • ピョコっとする動きを少しなめらかにした

0.1.1 (2013-04-04)

  • シェア数をクリックすると各サービスのコメント一覧ページを開くようにした
  • シェア数にマウスポインタを合わせると色が変わるようにした
  • optionsのシェア数の色に関するオプション名および構造を変更

0.1.0 (2013-04-04)

  • 初版リリース

ライセンス

MIT licenseで配布します。

© 2013-2014 ktty1220



You might also like these other Social & RSS jQuery Plugins

  • jquery-weui

    UI lib for build hybrid wechat web app

  • SocialCounters

    jQuery/PHP – Collection of Social Media APIs that display number of your social media fans.

  • jquery.JamCity

    JamCity is a jQuery plugin that uses the API from Last.Fm to pull your Last.Fm account info, tracks, albums, etc. […]
Download Github Page
License:

Copyright (c) 2013 ktty1220