2012年10月 | プログラマーズ雑記帳

2012年10月別記事

カウンター付き SNS シェアボタンまとめ 2012-10-07
12/10/11 って何日？ 2012-10-11
1 KB って何バイト？ 2012-10-15

Facebook の「いいね! 」ボタンのようなカウンター付き SNS シェアボタンの設置方法についてまとめてみました。

サンプルとして表示しているボタンは実際のボタンを使っています。対象はこのブログのトップページになっているので、よければ押してください。

共通
Twitter - ツイートボタン
Facebook - いいね(Like)ボタン
- OGP
Google+1
mixi - イイネボタン
はてなブックマーク
LinkedIn
Reddit
ShareThis

共通

ボタンを設置する場合には、基本的に以下の手順になります。

ボタン作成用のページにいって、コードを取得
表示したいページ(FC2 ブログではテンプレート)にそのコードを張り付け

コードの多くは 2 つの部分に分けられます。

ボタンの表示部
スクリプト部

スクリプト部はボタン表示の前または後ろに記述します。
どちらかは SNS によって変わります。ただし、明示的に書かれていないものはどちらでも構わないものが多いです。

なお、Google+1 など一部のボタンは IE では勝手に改行が入ってしまう場合があります。
それらのボタンは inline ブロックという機能を使っており、 IE7 以前の古いバージョンの IE ではこの機能に対応していないためです。新しいバージョンであっても、古い動作モードで動くと、改行が入ってしまいます。対応策は以前の記事を見てください。

IE を実際のバージョンで動作させるサイト側の指定方法 | プログラマーズ雑記帳

複数記事、 FC2 ブログ

FC2 ブログのように 1 ページに複数記事を表示することがあるタイプではいくつか注意点があります。

スクリプト部はすべての記事の前または後

ボタンは記事ごとに指定しますが、スクリプト部は 1 ページに 1 箇所だけ記述します。前または後のタイプかによって記述箇所が変わります。

タイプ	場所
前	ヘッダー部 <head> ～ </head> ページの最初 (</body> の直後)
後	ページの最後 (</body> の直前)

URL とタイトルを指定する

ボタンのリンク対象となるページの URL とタイトルはデフォルトではボタンを設定したページから自動で取得されます。複数記事の場合は明示的にその対象を記事の個別記事のページにしておく必要があります。
ただし、 SNS によってはタイトルの指定がないものもあります。

指定の仕方について詳しくは最初の Twitter のボタンで説明します。

Twitter - ツイートボタン

対象記事の URL 含んだツイートの数を表示する Twitter のボタンです。
FC2 ブログでは Twitter と Facebook の「いいね! 」ボタンは設定で簡単につけられます。しかし、他のボタンを付ける場合は広告が間に入って位置が揃わなくなるので、別途つけた方がいいでしょう。

1 ページ 1 記事であれば、下記リンクを開いてページ右の部分をコピーして張り付ければ、使用できます。

Twitter / Twitter ボタン

複数記事

複数記事の場合は URL 、タイトルに適当な値を入れておきます。
後述する <%topentry_link> のようなコードを直接書くと <, > がエスケープされたり、エラーになったりする場合があります。

コード部分は 1 行目がボタン、 2 行目がスクリプト部となっています。
ボタンを各記事に設定します。この時適当に入れておいた URL 、タイトルを記事にあわせて変更します。
スクリプト部は前後どちらに置いても構わないのですが、一応コードに合わせて、ページの最後( </body> の前)に記述しておきます。

FC2ブログ

FC2 ブログの場合は、スクリプト部は前節のようにページの最後に記述します。

ボタンは各記事におくので、 ブロック内に記述します。
この時 URL, タイトルを次のように変更します。

項目	記述
URL	<%topentry_link>
タイトル	<%topentry_title> \| <%blog_name>

ただし、タイトルはこのブログの形式なので、自分のブログに合うように変更する必要があります。詳しくは以下のリンクを見てください。

FC2 ブログ用のコードのサンプルを以下に挙げておきます。
基本的にこのコードを張り付ければ、使えると思いますが、時々コードが変わることもあるので、 SNS のサイトから取ってきた方が確実だと思います。
また、mixi のような SNS ボタンの一部は ID 番号を必要とします。この番号は特に隠すものではないのですが、そのままコピーして使えないように番号を XXXX で伏字にしています。

ボタン:

<a href="https://twitter.com/share" class="twitter-share-button"
          data-url="<%topentry_link>"
          data-text="<%topentry_title> | <%blog_name>"
          data-via="yohshiy" data-lang="ja">ツイート</a>

スクリプト:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

まとめると次の表のようになります。

項目	値
作成ページ	Twitter / Twitter ボタン
スクリプト部	(後)
タイトル指定	あり
ID 番号	なし

Facebook - いいね(Like)ボタン

Facebook の「いいね! 」ボタンです。こちらも Twitter 同様、 FC2 ブログでは設定で追加することができます。
ただ、その場合も OGP の設定はしておいた方がいいと思います。

項目	値
作成ページ	Like Button - Facebook 開発者
スクリプト部	[HTML5] <body>のすぐ後 [IFRAME] 一体型
タイトル指定	なし
ID 番号	なし

「いいね! 」ボタンの場合には、 HTML5 タイプ、 iframe タイプなどコードのタイプを選べます。私としては iframe タイプが使い勝手がいいと思います。

iframe タイプの場合はボタンとスクリプト部は一緒になっています。

「いいね! 」ボタンでは URL の指定はありますが、タイトルの指定はありません。また、 iframe の場合、 URL は省略できません。省略したい場合は HTML5 タイプなどを指定します。

[Send Button] は外しておきます。それ以外は [Layout Style], [Width] 等を好みで変更します。

ボタン(スクリプト):

        <iframe 
          src="//www.facebook.com/plugins/like.php?href=<%topentry_enc_link>&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=22"
          scrolling="no" frameborder="0"
          style="border:none; overflow:hidden; width:105px; height:21px;"
          allowTransparency="true">
        </iframe>

iframe タイプの場合、対象の URL は GET メソッドの引数として渡すため、 URL エンコードされた <%topentry_enc_link> を使います。

OGP

「いいね! 」作成用のページでは、 Step 1 の後に Step 2 があります。これは OGT または OGP と呼ばれる SNS 用の情報を設定するためのものです。これを設定していないと次のような問題があります。

「いいね! 」を押してもウオールに上がらない
シェア時の画像としてい適当なものが使われてしまう

「いいね! 」だけでなく、シェアやコメントなど Facebook 関連のブログパーツを使用する場合は設定しておいた方がいいと思います。
また、 OGP は Facebook だけでなく、 mixi, Google+ など他の SNS でも利用されます。

ただし、この OGP はヘッダー部記述するため、複数記事表示の場合には「いいね! 」の対象と完全に合わせることはできません。

設定する場合は Step 2 に進み、値を入力してコードを取得します。
Facebook OGP

項目	説明
Title	記事のタイトル
Type	記事の場合は `article`。ブログのトップページでは `blog`
Image	リンク時に使用する画像の URL 。 200x200 以上のサイズにしておいた方がいいです。
Site name	サイト名
Admin	Facebook の ID 番号。ページを表示した際に自動で設定されます。

FC2 ブログでの設定例を挙げておきます。
ここでは 個別記事モード でのみ全ての項目を設定し、それ以外のモードではブログで共通の部分だけ指定するようにしています。
またサンプルの ID 名の部分は伏字にしています。

<meta property="og:image" content="<%image>" />
<meta property="og:site_name" content="<%blog_name>" />
<meta property="fb:admins" content="XXXXXXXXXXXXXXX" />
<meta property="og:type" content="article" />
<!--permanent_area-->
<!--topentry-->
<meta property="og:title" content="<%topentry_title> | <%blog_name>" />
<meta property="og:url" content="<%topentry_link>" />
<!--/topentry-->
<!--/permanent_area-->

OGP の追加後、以下のページで OGP がちゃんと設定されているかチェックすることができます。

デバッガー - Facebook 開発者

Google+1

Google の作った SNS である Google+ のシェアボタンです。

項目	値
作成ページ	+1 ボタン - Google+ Platform ? Google Developers
スクリプト部	後
タイトル指定	なし
ID 番号	なし

URL を指定する場合は [詳細オプション] を開いて設定します。

ボタン:

<div class="g-plusone" data-size="medium" data-href="<%topentry_link>"></div>

スクリプト:

<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

mixi - イイネボタン

mixi は日本ではシェアの広い SNS です。 mixi チェック程見かけませんが、実は mixi にも Facebook のような「イイネ！」ボタンがあります。

項目	値
作成ページ	---
スクリプト部	(後)
タイトル指定	なし
ID 番号	あり

「イイネ！」ボタンのコード取得方法は以下に詳しい説明が載っているので、こちらをご覧ください。

html タグの取得 << mixi Developer Center (ミクシィデベロッパーセンター)

私がコード取得時にわかりづらいなと思った点は 新規サービスの追加 の入力項目です。こちらは次のように入力してください。

項目	入力情報
サービス名	任意の文字でかまいません。"イイネ！ボタンコード取得" など
サービスの URL	こちらもなんでもいいのですが、ブログのトップページといったサイトの URL を入力します。

ボタン：

        <div
          data-plugins-type="mixi-favorite"
          data-service-key="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
          data-size="medium"
          data-href="<%topentry_link>"
          data-show-faces="false" data-show-count="true" data-show-comment="true"
          data-width="100px">
        </div>

スクリプト：

<script type="text/javascript">(function(d) {var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true;s.src = '//static.mixi.jp/js/plugins.js#lang=ja';d.getElementsByTagName('head')[0].appendChild(s);})(document);</script>

はてなブックマーク

はてなブックマークはソーシャルブックマークと呼ばれるブックマークをシェアする SNS です。
ソーシャルブックマークに関しては以前の記事を見てください。

ソーシャルブックマーク機能比較 | プログラマーズ雑記帳

項目	値
作成ページ	はてなブックマークボタンの作成・設置について
スクリプト部	(後)
タイトル指定	あり
ID 番号	なし

ボタン :

<a href="http://b.hatena.ne.jp/entry/<%topentry_link>"
  class="hatena-bookmark-button"
  data-hatena-bookmark-title="<%topentry_title> | <%blog_name>"
  data-hatena-bookmark-layout="simple-balloon"
  title="このエントリーをはてなブックマークに追加">
  <img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
    alt="このエントリーをはてなブックマークに追加"
    width="20" height="20" style="border: none;" />
</a>

スクリプト :

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

LinkedIn はビジネス系の SNS です。
日本ではまだそれほどでは広まっていない気がしますが、海外ではかなりシェアの広い SNS です。
基本的に転職用の売り込みや会社側からの検索を目的とした SNS なので、転職当たり前のアメリカで広まるのはわかるのですが、日本ではどうかなという気もします。ただ、転職専用というわけでもないですし、押さえておく価値はあるのではないかと思います。

項目	値
作成ページ	Share Plugin Generator \| LinkedIn Developer Network
スクリプト部	(前)
タイトル指定	なし
ID 番号	なし

スクリプト :

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>

ボタン :

<script type="IN/Share" data-url="<%topentry_link>" data-counter="right"></script>

Reddit はニュース記事などの投票式の SNS です。 LinkedIn 同様、海外でよく使われている SNS の一つです。
「いいね! 」のようなライトコミュニケーションでは、よければチェックして、そうでなければ何もしないというのが普通です。この Reddit はマイナスへの投票ができることがの特徴です。

似たような SNS として Digg も有名ですが、残念ながらこちらは日本語用ページがありません。

Reddit は対象が記事専門のような感じなので、 Reddit のボタンサンプルだけはトップページではなく、 この記事を対象としています。

項目	値
作成ページ	japan: reddit用ボタン
スクリプト部	一体型
タイトル指定	なし (インタラクティブ型はあり)
ID 番号	なし

Reddit にはコード取得用の入力フォームはありません。 [view code] を選択して、コードを表示し、それをコピーします。

複数記事の場合にはリンクの URL の引数として対象の URL を指定します。ここでの値は URL エスケープをしておく必要があります。
サンプル :

<script type="text/javascript" src="http://www.reddit.com/buttonlite.js?i=1&url=http%3A%2F%2Fyohshiy.blog.fc2.com%2Fblog-entry-161.html"></script>

FC2ブログの場合には <%topentry_enc_link> が URL エスケープされたリンクとなります。また、以下のサンプルでは選択時に新しいウィンドウ(タブ)で表示する newwindow=1 も指定しています。
ボタン(スクリプト) :

<script type="text/javascript" src="http://www.reddit.com/buttonlite.js?i=1&newwindow=1&url=<%topentry_enc_link>"></script>

インタラクティブボタン

カウンターだけでなく、ポイントの上下ができるボタンもあります。 Reddit interactive

ただし、こちらの場合は URL 等を JavaScript の変数として指定するため、 複数記事の場合には使えません。
(使えるのかもしれませんが、変数がどの位有効なのかよくわからないので、使わない方が無難だと思います)

使用可能な変数は以下のものです。

変数	説明
reddit_target='[COMMUNITY]'	コミュニティーの指定日本語のコミュニティーは `ja` です
reddit_title='[TITLE]'	タイトルの指定
reddit_newwindow='1'	リンクを新しいウィンドウで表示する
reddit_bgcolor='[COLOR]'	背景色の指定
reddit_bordercolor='[COLOR]'	境界線の色の指定

サンプル:

<script type="text/javascript">
  <!-- 変数の設定 -->
  reddit_url = "http://www.reddit.com/buttons";
  reddit_title = "Buttons!";
  reddit_bgcolor = "FF3";
  reddit_bordercolor = "00F";
  reddit_newwindow='1';
  reddit_target='ja'
</script>
<!-- ボタン(スクリプト) -->
<script type="text/javascript" src="http://www.reddit.com/static/button/button3.js"></script>

FC2 ブログで個別記事モードの場合はインタラクティブボタン、その他のモードではカウンター付きシェアボタンとする場合には次のようになります。

<!--not_permanent_area-->
<script type="text/javascript" src="http://www.reddit.com/buttonlite.js?i=2&newwindow=1&url=<%topentry_enc_link>"></script>
<!--/not_permanent_area-->
<!--permanent_area-->
<script type="text/javascript">
  reddit_url = "<%topentry_link>";
  reddit_title = "<%topentry_title> | <%blog_name>";
  reddit_newwindow='1';
  reddit_target='ja'
</script>
<script type="text/javascript" src="http://www.reddit.com/static/button/button1.js"></script>
<!--/permanent_area-->

ただし、カウンター付きのボタンの場合はタイトルが指定できないので、 Reddit のボタンよりむしろ次項の ShareThis の方がいいのではないかと思います。

最後にいろいろな SNS のシェアボタンをまとめるタイプのサービスとして ShareThis を紹介します。

シェアボタンのまとめ系のサービスは結構あるのですが、 ShareThis はカウンター付きボタンの対応 SNS が圧倒的に多いです。
今まで紹介してきた SNS も mixi 以外は対応しています。

Tumblr や Delicious といったカウンター付きのボタンがない SNS でさえ独自の集計で対応しています。
ただし、独自の集計をしているせいか SNS の提供しているカウンター付きボタンと一致しないこともあります。

項目	値
作成ページ	ShareThis Sharing Button
スクリプト部	前(ヘッダー部)
タイトル指定	あり
ID 番号	あり

Step 1. Platform: Website を選択します。
タグまたは下部のリンクで次のステップに移動します。
Step 2. Style: 使いたいスタイルを選択します。
Step 3. Customization: Drag & Drop で SNS ボタンの追加や並び替えを行います。
[Sharing Buttons] が ShareThis の用意したシェアボタンです。
[Other Social Plugins] は「いいね!(Like)」や Google+1 のようなボタンをそのまま使うタイプのものです。
Get the Code: ShareThis 自身のボタンのタイプを選択し、コードを取得します。
ShareThis 自身のボタンはいろいろな SNS にシェアできるポップアップを表示します。表示されているカウンター値は他の SNS のシェアのカウントを合計したものです。

ボタンはそのままでは現在のページが対象となってしまうので、複数記事の場合には対象のタイトルや URL を指定するための属性(st_title, st_url)をボタンごとに追加する必要があります。

ShareThis | Custom Buttons

スクリプト :

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"}); </script>

ボタン :

<span class='st_delicious_hcount' displayText='Delicious' st_title="<%topentry_title> | <%blog_name>" st_url="<%topentry_link>"></span>
<span class='st_tumblr_hcount' displayText='Tumblr' st_title="<%topentry_title> | <%blog_name>" st_url="<%topentry_link>"></span>
<span class='st_linkedin_hcount' displayText='LinkedIn' st_title="<%topentry_title> | <%blog_name>" st_url="<%topentry_link>"></span>
<span class='st_sharethis_hcount' displayText='ShareThis' st_title="<%topentry_title> | <%blog_name>" st_url="<%topentry_link>"></span>