Ajaxのページ内遷移とソーシャルボタン

Facebookの「いいね」やTwitterの「ツイート」のよう、フキダシなどで数字がついているソーシャルボタンは
URLと紐付いてカウントされています。

たとえば、http://example.com/ へFacebookのボタンを設置した場合は
こうカウントしていることになります。

http://example.com/のことを206,317人がいいねと言っています。」

したがって
Ajax通信を使い、ひとつのhtmlで色々なコンテンツを出し分けているウェブサイトで
コンテンツに付随するソーシャルボタンをつける場合は
2つの対になる機能が必要です。

  1. ボタン設置コンテンツごとに一意のURLを付与する仕組み
  2. 上記のURLへアクセスすると、紐づくコンテンツを表示した状態を表示する仕組み

コンテンツごとに一意のURLを生成する

対象ブラウザがInternetExplorer10以上が対象でもよいならpushStateをつかうと
簡単にURLの変更とブラウザのヒストリー機能に対応できます。
2014年1月現在なら、スマートフォン専用ウェブサイトなどでしょうか。

パソコンも対象となると、IE9以下を切り捨ててよい案件はなかなかないので
ハッシュタグで対応します。

ただ、ハッシュでは万能でなく
GoogleやBingは、クローラとの親和性の問題からpushStateを奨励しています。

クローラは、同一htmlのハッシュタグによる差異は無視するしくみになっているので
たとえばこの2つのURLは同じものとして認識されてしまうのです。
http://example.com/index.html
http://example.com/index.html#content

Googleは、この対策として
ハッシュを#!と記述する方法をガイドしていて
パラメータ違いの異なるコンテンツとしてクロールしてくれるようです。
この書式に基づくとcontentというパラメータを扱いたい場合は、こんなURLになります。

http://example.com/index.html#!content

ソーシャルメディアごとのハッシュ判別状況

http://example.com/ というURLを例に
Facebook、Twitter、Google+、はてなブックマークのボタンジェネレータで
ハッシュによる差異を別のURLとして認識してもらえるか検証したところ
差別化できる構成はこうなりました。

http://example find out this here.com/#!/content

Googleのクローラ対策と併せると
「#!/」以降へパラメータとなる文字列を続けるようにすれば、ソーシャルボタンにも対応できます。

検証に使用した公式ジェネレータはこちら。

http://example.com/#!content

「#!」以降にパラメータをつけるだけでは、ツイッターで同一URL扱いとなってしまいました。

Facebook Twitter Google+ はてなブックマーク
×

http://example.com/#!/content

「#!/」というふうに、ハッシュタグのなかにスラッシュも含めると
ツイッターでも差異を識別してくれました。

Facebook Twitter Google+ はてなブックマーク

関連記事

Pocket