Twitterのシェアボタン設置に関して、ハマってしまったので備忘録がてらにメモ。
Googleで「Twitter シェアボタン」なんて検索すると出てくる通り、以下のTwitterの公式サイトから「シェアボタン」のコードを生成して、自分のウェブサイトなどに埋め込むことができる。
通常通りに設置するだけなら単純にステップを進めて、最後に表示されるコードを対象のHTML内に貼り付ければ完了。
僕がハマったのは、非表示にしているDIVタグに対して「シェアボタン」を設置しようとしたからだ。
やりたかったこととしては、最初は「非表示(display: none)」にしておいたDIVタグを後から特定のタイミングでJavaScriptとCSSで「表示(display: block)」させたかった。
例:trouble.html
<html> <head> <title>ハマった例</title> <meta charset="UTF-8" /> </head> <body> <script> (function() { // 3000秒後にidが[target]の要素のCSSを書き換える setTimeout(function() { let element = document.getElementById("target"); // displayの[none]を[block]に上書きする element.style.display = "block"; }, 3000); })(); </script> <div style="display: none;" id="target"> <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </div> </body> </html>
結論から言うと、上記のコードはブラウザによって正常に「シェアボタン」が出たり出なかったりする。
少なくとも僕の手元の「Google Chrome」では動かなかったが、手元の「safari」では動いたと言った形だ。
恐らくだけれど動かなかった時の以下の状態から「非表示の状態でのボタンの設置を防ぐ仕組み」が実装されているのだろうと予測している。
- JavaScriptのコンソールには関連するようなエラーが出ていなかった
- 実は一応「シェアボタン」自体は描写されていたが、サイズがあえて「1x1」に設定されていた
ちなみにこの事象の解決策としては以下の2つがある。
- 非表示にすることをやめる(描写する位置などを工夫するなど)
- そのままコードを埋め込むことを諦めて「twttr.widgets.createShareButton()」と言う関数で動的に追加する
個人的にはJavaScriptが苦手な方は前者を、バリバリ得意という方は後者を選ぶべきだと思う。
最後に、以下に後者の方で必要なドキュメントを貼っておく。