Living Room 23

Bloggerでモバイルテンプレートを使用している場合、
Facebookのいいねボタンのカウントがバラけてしまう問題。

いろいろ調べて、以下の方法で解決。
data:blog.canonicalUrl'で、?m=1が付かない元のURLを参照させるのがポイントのようで。

モバイルテンプレートではPCとスマホで下記のようにURLが変わるため、Facebook for developersで取得したコードそのままでは機能しないようです。
PC　http://www.livingroom23.net/
スマホ　http://www.livingroom23.net/?m=1

変更するのは、モバイルの方のコードのみでいいみたい。
data:post.bodyで検索して1番目がモバイル、2番目がPC表示。


Facebookデフォルトのコード
<div class="fb-like" data-href="http://www.livingroom23.net" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>


変更後
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' data-size='small' expr:data-href='data:blog.canonicalUrl'/>


ついでにシェアボタンもエラーで機能してなかったので、デフォルトのコードを下記に変更。

シェアボタン
<div class='fb-share-button' data-layout='button' expre:data-href='data:blog.canonicalUrl'/>

　
Facebookデバッガーで確認してこの通り。
取得したURL（モバイル）に対して、カノニカルURLはPCのものになっている。


日本語の情報が少ないBloggerを、コーディングできない素人がカスタマイズするにあたり、数々のブログに助けられたので恩返し的なポスト。
コード改編前にバックアップはぜひ。

参考にさせて頂いたサイト
http://www.kuribo.info/2012/03/blogger-blogspotjp.html
http://in0sea.blogspot.jp/2013/06/canonical.html

ということで、よかったら"いいね"をお願いします。笑



ツイート
Label: 暮らし・子育て