Bloggerのモバイルテンプレートでツイートボタンのカウントが反映されない場合の対処法
初投稿の記事のリンクを自らツイートしたら、リツイートしてくれた方がいたので
ツイートボタンのカウントが「2」になりました。
しかしその後iPhoneでページを確認すると「0」のまま。
モバイルの場合は時間差で反映されるのかと思って
しばらくしてから見てもまだ「0」のまま…
いろいろ調べた結果、
ボタンに関連づけるURLに data:post.url というデータタグを使用していたため、
PCで見ている場合
「http://blog.sawamapp.com/2013/04/blog-post_12.html」
モバイルで見ている場合
「http://blog.sawamapp.com/2013/04/blog-post_12.html?m=1」
と、モバイル用のURLとして ?m=1 が付加されているのが原因でした。
以下、ツイートボタン設置用コード
<span class='twitter-bookmark'> <a class='twitter-share-button' data-count='vertical' data-lang='ja' expr:data-text='data:post.title + " - " + data:blog.title' expr:data-url='data:post.url' href='https://twitter.com/share'>ツイート</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> </span>
この中の data:post.url を data:post.canonicalUrl に置き換えることで解決。モバイルでも
http://blog.sawamapp.com/2013/04/blog-post_12.html
を参照することができ、
カウント「2」が表示されました。
これは「いいね!ボタン」と「はてブボタン」も同様ですね。