先日、ソーシャルボタンの仕様について細かくまとめてみました（Facebookいいね！ボタン｜Twitterツイートボタン）が、ツイートボタンの設定中に、何回ツイートしてもカウントが「0」のまま増えないという現象に遭遇しました。
微妙にハマってしまいましたが、原因には色々なケースがあるようなのですが今回は非常に単純な解決策でした。
備忘録として。
今回現象が起きたサイトは、
http://example.com/ というURLから、
PC：http://example.com/pc/ ←ここにボタンが設置。でもツイートされるURLは「http://example.com/」にしたい。
スマホ：http://example.com/mobile/
とリダイレクトを行っておりました。
ツイートボタンを押すと、正常にツイートのポップアップ画面が起動し、ツイート完了まで遷移します。
当然、つぶやいたアカウントのタイムラインにも表示されます。
しかし、サイト上のツイートボタンのカウントが0のまま一向に増えないという現象でした。
今回、Tweetボタンを設置しているページは下層ページですが、ツイート時にはトップページのURLをツイートさせたいということで設定していました。
なので、そのあたりの不一致や「canonical URL」の設定漏れなどを対応してみたのですが、解決せず。
APIを直接叩いても、やはりカウントが「0」になっていることが確認できまして。
※URLのカウントは以下のAPIで確認できます。（ただし公式docsには載っていないらしいので、正確性はあまり保証できませんけど。）
1 | <span class="hljs-attribute">http</span>:<span class="hljs-comment">//urls.api.twitter.com/1/urls/count.json?url=http://example.com/</span> |
が、ツイートされるURLをトップから下層ページに変更したところ、正常にカウントアップされることを確認。
1 | <span class="hljs-attribute">http</span>:<span class="hljs-comment">//urls.api.twitter.com/1/urls/count.json?url=http://example.com/pc/</span> |
↑こうしたら、APIでもカウントされていることが確認できた。
見た目上は「http://example.com/」でツイートされたことになっているのに、Twitterのデータ上はそのURLはツイートされたことになっておらず、「http://example.com/pc/」でツイートされたことになっているようでした。
で、ググってたら↓こちらの記事を発見。
む、counturlなんてプロパティあるのか。
Sharing a short URL – Tweet Button | Twitter Developers
Sharing a short URL
If your count stays at 0 even after Tweeting you may need to help the Tweet Button identify the correct URL to count.
これか・・・。
どうやら、Twitter側で正しくURLのカウントがされない場合（今回のように、指定しているURLとは異なるURLでカウントされてしまう場合など）には、プロパティでカウントするURLを指定することができるようです。
通常は、シェアされるURLと同じになるのでこのプロパティーは不要みたいですが、docsにある例では、短縮URLなどを利用する際に必要だと書いてあります。
今回は別に短縮URL使ってるわけではないですが、リダイレクトしているので同じ扱いなのかもしれないっすね。
というわけで、以下のようにすることで問題は解決しました。
1 | <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://twitter.com/share"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"twitter-share-button"</span> <span class="hljs-attr">data-url</span>=<span class="hljs-string">"http://example.com/"</span> <span class="hljs-attr">data-counturl</span>=<span class="hljs-string">"http://example.com/pc/"</span> <span class="hljs-attr">data-lang</span>=<span class="hljs-string">"ja"</span>></span>ツイート<span class="hljs-tag"></<span class="hljs-name">a</span>></span> |
data-url → シェアさせたい（ツイート本文に入れたい）URL
data-counturl → ツイート数のカウントをするURL
※iframe形式で記述してる場合は、「url」「counturl」になります。
