2017/02/06

【blogger】モバイルとPCでFacebookのいいね数を一致させる方法

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: