Translate

2013-04-13

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 + &quot; - &quot; + 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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script> </span>

この中の data:post.url data:post.canonicalUrl に置き換えることで解決。



モバイルでも
http://blog.sawamapp.com/2013/04/blog-post_12.html
を参照することができ、
カウント「2」が表示されました。



これは「いいね!ボタン」と「はてブボタン」も同様ですね。



このエントリーをはてなブックマークに追加