WordPressを常時SSL化した際にSNSカウントを引き継ぐ方法

WordPressをSSL化する際に発生する問題の一つとして、今までのソーシャルボタンのSNSカウント（SNSでシェアやブックマークされた数）がリセットされてしまう問題があります。

これはSSL化したことによりURLがhttpからhttps始まりに変わってしまい、SNS側から別のサイトとして認識されてしまうからです。

挙動としてはURLが違うサイトは別のサイトであるという判断をしているためSNS側は悪くないのですが、今までシェアされてきた数がリセットされてしまい、カウントが0と表示されるのは見栄えがいいものではありません。

できれば今までのカウント数を引き継ぎたいですよね？

そこで、本記事ではSSL化後にソーシャルボタンのカウント数を引き継ぐ方法をFacebookとはてなブックマーク、Twitterに関して解説します。

そもそもSSL化後にボタンが表示されない場合

カウント数を引き継ぐ方法を解説する前に、まずはSSL化後にボタンが表示されなくなった場合の対処法を解説します。

もしその問題が発生した場合は、まずソーシャルボタン表示の際に参照しているSNS側のURLがhttpになっていないかを確認してください。

現在新しくソーシャルボタンのタグを発行した場合は冒頭のhttpの記述は省略されたタグが出力されますが、古いタグがそのまま使用されている場合はhttpのURLを参照している可能性があります。

その場合はhttp部分の記述を省略したURLに修正するか、httpsに修正することで表示されます。

Facebookのいいねカウント数を引き継ぐ

結論から言えばmetaタグの１つである「og:url」プロパティのURLをhttpのURLに変更してあげれば引き継ぎが可能です。

これはFacebookのクローラーがog:urlを元にサイトの判定を行っているためです。

ただし、このプロパティはOGP（Open Graph protocol）の記述の1つであり、多くの場合WordPressで導入しているプラグインで自動的に付与されています。

その場合は自動で付与されるゆえに一部分だけを編集するということが難しいため、自動的にOGPタグを出力しないようにし、手動で改めてOGPタグを作成する手法をおすすめします。

導入しているプラグインによって設定は変わりますが、例えば「Jetpack」を使用している場合はfunction.phpの中に

————————-

add_filter( 'jetpack_enable_open_graph', '__return_false' );

————————-

を記述することで自動的にOGPタグを出力することを防ぐことが出来ます。

その後、header.php内に

————————-

echo '<meta property="og:url" content="'; <<HTTPのURL>> echo '">;echo "\n";

————————-

を記述することで手動で「og:url」を設定することが出来ます。

（<<HTTPのURL>>は設置するブログによって変更してください）

またFacebookのクローラーの確認は以下の公式のデバッガーを使用することで確認可能です。

facebook for developers

こちらのサイトにソーシャルボタンを設置したURLを記入し、確認することで、現在「og:url」に何が設定されていて、どのURLをカウントの基準としているかがわかります。

万が一、既に対象のページでhttpsのサイトがクロールされてしまっていたとしても、「og:url」を変更後、改めてスクライビングをすることで、再クロールが可能です。

注意として、自動でOGPタグの出力をしない設定にした場合、「og:url」だけでなく、OGPに関わる全てのタグが出力されなくなるため、画像URLや記事タイトル、ディスクリプションなどのタグも合わせて手動で記載する必要があるということです。

はてなブックマークのカウント数を引き継ぐ

はてなブックマークの場合はシンプルにボタンのリンクタグのhrefのURLを基準に、ブックマーク数を判定しています。

ここでカウント数を引き継ぐためには対象のhrefについて、「http://b.hatena.ne.jp/entry/」の後にhttpのURLを記載することにより対応可能です。

———————————————————————–

<a href="http://b.hatena.ne.jp/entry/<?php echo <<HTTPのURL>> ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" 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>

（<<HTTPのURL>>は設置するブログによって変更してください）
———————————————————————–

記述としてはおそらくこのような形となると思います。

Twitterのシェアカウント数を引き継ぐ

Twitterのボタンは以下のようなコードを書くことで表示されています。

このときdata-url属性を指定することで、表示するカウント数の対象となるサイトを指定することができます。

————————-

<a href='https://twitter.com/share' data-url='' data-count='horizontal'> Tweet</a>

————————-

そこで以下のようにdata-urlの属性にSSL移行前のHTTPのURLを明示的に指定してあげることで、以前のHTTP時代のカウント数を引き継ぐことができます。

————————-

<a href='https://twitter.com/share' data-url='<<HTTPのURL>>' data-count='horizontal'> Tweet</a>

（<<HTTPのURL>>は設置するブログによって変更してください）
————————-

まとめ

SSL化は現在多くのサイトで行われていますが、SNSのカウント数のリセット問題も多くの人が直面しているため、検索すれば様々な情報がヒットします。

需要はあるので、SNS側がhttpとhttpsを同一サイトとしてカウント数を判定する仕組みを実装してくれればいいのですが、今のところその予定はなさそうです。

この記事で示した解決法は一例ですが、現状の解決法として、SSL化後もSNSのカウント側にはhttpとして認識させる、といった方法になってしまうでしょう。将来的にはSNS側でこの問題を解決する仕組みが実装されることを祈ります。