オリジナルデザインのソーシャルボタンにカウントを設置する方法
- デザインボタン 9サイト -
Twitter, Facebook, Google+, Hatena, Pinterest, Feedly, LDR, Pocket, Linkedin

ソーシャルボタンデモjQuery-snsbuttonプラグインの使い方プラグインの使い方-準備プラグインの使い方-ボタン設置

デザインボタンのソーシャルボタンにカウントを設置は、jQuery-snsbuttonプラグインを使って行なうことができます(9サイト)。
また、jQuery-snsbuttonプラグインは、カウントを付けない場合は19サイトのデザインボタンを設置できます。

 デザインボタンのソーシャルボタンデモ

▼ ソーシャルボタン - デザインボタン 19サイト(カウントなしの場合)(デモ)

▼ ソーシャルボタン-デザインボタンにカウントを付ける 9サイト(デモ)

(注1)ここに表示されているカウントは、このページのものではなく、デモのためのサンプルページのカウント値です。
(注2)Google+は、カントを止めたようです(2017年8月ごろから)。
(注3)「Live Dwango Reader」、「LDR Pocket」(Livedoor reader)は、2017年8月31日をもってサービスを終了した。

 jQuery-snsbuttonプラグインの使い方

ソーシャルボタンに、カウントを付ける、付けないは、プラグインのパラメータの指定によります。 jQuery-snsbuttonプラグインの動作の構成は、下図のようになっています。ソーシャルボタンのカウントを取得する処理はPHPで行います。 ただし、ボタンを設置する処理はHTMLで作ることができます。

図 jQuery-snsbuttonプラグインの動作の構成

jQuery-snsbuttonプラグインが対応するソーシャルボタンは、下表のとおりです。

表1 jQuery-snsbuttonプラグイン対応ボタン一覧(プラグイン パラメータ一覧)  ◎:省略不可(必須)   ○:省略可   空白:指定不可
項番パラメータ名→

↓SNSサイト(機能名*4)
url
共有ページURL
text
共有ページのtitle
img
ボタン画像URL
alt
同左説明文
width/
height
ボタン画像
button
カウント
keymediaentryteztclientidstate
 1 Twitter(twitterShare)
 2 Facebook(facebookShare)
 3 LINE(lineIt)◎ *3◎ *3
 4 Ggoogle(googlePlus1)
 5 Hatena(hatenaBookmark)
 6 Pocket(pocketButton)
 7 mixi(mixiCheck)◎ *3
 8 Tumblr(tumblrShare)
 9 GREE(greeSf)
10 Pinterest(pinTerest)◎ *3
11 feedly(feedlyRss)◎ *1
12 Inoreader(inoreaderRss)◎ *1
13 RSS(rssFeed)◎ *1
14Ameba(amebaBlog)◎ *2
15 Evernote(evernoteClip)
16 LDR(ldrRss)◎ *1
17goo(gooBlog)
18 Linkedin(linkedIn)
備考【省略値】
・url:ボタン設置したページのURL ・text:同じくページのtitleタグの内容 ・width:ボタン画像のwidth 25
・height:ボタン画像のheight 25
【注記】
*1:RSSフィードURL。下表項番2参照。
*2:アメーバブログにPOSTするデータ。
'0'のとき、ボタン設置ページURLとページtitleの内容。'0'以外のとき、設定された内容(HTMLタグも可)。
*3:ソーシャルボタン事前確認項目。下表参照。
*4:jQuery-snsbuttonプラグインの機能名

表2 ソーシャルボタン事前確認項目リスト
項番SNSパラメータ名現在の設定値(仮の値)取得方法など
1mixi
(カウント未サポート)
kmixi999≫mixiサイトでユーザ登録してmixiチェックキーを取得
2RSS関連RSSフィードのURLhttp://rssblog.ameba.jp/ske48official/rss20.xml≫RSSフィードのURLの取得方法
3LINE
(カウント未サポート)
client_id1341209950≫LINEのclient_id,stateパラメータの取得方法
4state1409338029
5Pinterestmediahttp://urbanqee.com/webutil/photo/fancybox/demo/people/girl-pixabay-03.jpg好みのアイキャッチ画像(サムネイル)のURL

- 準 備

事前につぎのファイルをダウンロードし、サーバへアプロードします。

 オリジナルデザインボタンの準備(ソーシャルボタン画像)

オリジナルデザインのソーシャルボタン用画像を準備します。

 jQueryファイルおよびjQuery-snsbuttonプラグインのインクルード(javascript)

jQueryファイルおよびjQuery-snsbuttonプラグインのJSファイルを、<head>タグ内にインクルードします。

<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- jQuery-snsbuttonプラグイン -->
<script src="js/jquery-snsbutton-1.2.js"></script>

 ソーシャルボタンカウント用吹き出しCSSの作成(CSS)

ソーシャルボタンカウント用吹き出しCSSを<head>タグ内に定義します。CSSは、(c) 2016 By Simon Hojbergを参考。

<style>
/* http://www.cssarrowplease.com/ c 2016 By Simon Hojberg 参考 */

/*  ボタンの上に置く top */
.balloon_top {
	position: relative;
	background: #fcfcfc;
	border: 1px solid gray; /*#242a2e;*/
        font-size:11px;
        text-align:center;
        margin-bottom:5px; padding:3px;
        font-family: arial, "MS ゴシック",sans-serif;
        border-radius: 5px;        
}
.balloon_top:after, .balloon_top:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloon_top:after {
	border-color: rgba(252, 252, 252, 0);
	border-top-color: #fcfcfc;
	border-width: 5px;
	margin-left: -5px;
}
.balloon_top:before {
	border-color: rgba(36, 42, 46, 0);
	border-top-color: gray; /*#242a2e;*/
	border-width: 6px;
	margin-left: -6px;
}

/* ボタンの右に置く right */
.balloon_right {
	position: relative;
	background: #ffffff;
	border: 1px solid gray; /*#0a0c0d;*/
        font-size:11px;
        text-align:center;
        margin-left:5px; padding:3px; margin-top:30px;
        font-family: arial, "MS ゴシック",sans-serif;
        border-radius: 5px;
}
.balloon_right:after, .balloon_right:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloon_right:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #ffffff;
	border-width: 3px; /*5px;*/
	margin-top: -3px; /*5px;*/
}
.balloon_right:before {
	border-color: rgba(10, 12, 13, 0);
	border-right-color: gray; /*#0a0c0d;*/
	border-width: 4px; /*6px;*/
	margin-top: -4px;  /*6px;*/
}
/*     */
</style>

 ソーシャルボタンカウント取得PHPのアップロードおよびjQuery-snsbuttonプラグインの設定【重要】

ソーシャルボタンカウント取得PHPをPHP動作環境サーバにアップロードした後、jQuery-snsbuttonプラグインに、ソーシャルボタンカウント取得PHP のURLを設定します。設定方法はjQuery-snsbuttonプラグイン(jquery-snsbutton-1.2.js)ソース(67行目)に記載してあります。

- カウント付きボタン設置

 ソーシャルボタン設置場所の定義(HTML)

ソーシャルボタンの設置したい場所に<DIV>タグで、ボタンごとにつぎの形式で定義します。

・<DIV>タグの記述形式

<div class="ボタンのクラス名"></div>

jQuery-snsbuttonプラグインは、指定のボタン画像をこのDV要素内に設置し、カウントの吹き出しを指定により、DIV要素(ボタン)の上、または右に配置します。

 ソーシャルボタン設置(HTML)

jQuery-snsbuttonプラグインを使ってソーシャルボタンを設置します。

フリーなデザイン画像のソーシャルボタン設定は、snsbuttonプラグインを使用します。 使い方は、ボタンを設置したい場所に空の雛形のdivタグを配置し、snsbuttonプラグインで呼び出します。

ボタン設置場所の雛形divタグコード

<div class="class-name"></div>

jQuery-snsbuttonプラグインの使い方(一般形式)

<script>
$(function() {
    $('.class-name').snsbutton('method'[, options]);
});
</script>

使用例

Facebook, Feedly以外の使用法については、上表1のSNSサイト名をクリックしてください(設定方法説明ページへリンク)。

Facebook ボタンの上にカウント
Feedly RSS ボタンの右にカウント

<script>
 $(function() {
  $('.c-facebook-top').snsbutton('facebookShare',{ 
      img: 'images/Facebook.png', 
      width: '32', height: '32', 
      alt: 'このページの情報をカウント付きで Facebook を共有する',
      button: 'top'
    });
 });
</script>
<body>
<div class="c-facebook-top"></div> 
<script>
 $(function() {
   $('.c-feedly-right').snsbutton('feedlyRss', { 
      img: 'images/feedly-follow-square-volume_2x.png', 
      alt: 'Feedly - RSSフィードを使用して、このページの情報を共有する',
      url: 'http://rssblog.ameba.jp/ske48official/rss20.xml', 
      button: 'right'
    });
 }); 
</script>
<body>
<div class="c-feedly-right"></div> 

デモjQuery-snsbuttonプラグインの使い方プラグインの使い方-準備プラグインの使い方-ボタン設置

 ソーシャルボタン関連サイト内リンク

  1. 公式サイトへ行かずに、簡単に手元でソーシャルボタンをまとめて設置する Lightboxなどのモーダルウィンドウ上にも設置できる ~17SNS/RSSサイト、31種類余りの公式ボタン、非公式デザインボタンどちらでも!~
  2. まとめて設置のデモ - モーダルウィンドウにも(1.関連)
  3. オリジナルデザインのソーシャルボタンにカウントを設置する方法 - デザインボタン 7サイト - Facebook, Google+, Hatena, Pinterest, Feedly, LDR, Pocket(本ページ)

urbanqee   最終更新日:2017.7.22(初版)/ 2017.9.23 Twitter,Linkedin追加