最終更新日が2023年以前の記事です。レイアウト変更のため、正常に表示されない場合があります。
webサイト内にtwitterのツイートボタンを掲載する際、ページ内のボタン操作などで表示/非表示を切り替える、という実装が必要になることがあるかと思います。
表示/非表示を切り替えるのであれば、たとえば display: none; や visibility: hidden; が使えそうです。
<button id="toggle" value="click!">
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<div id="wrapper" style="display: none;">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button"
data-via="nei_ion"
data-related="nei_ion"
data-show-count="false">Tweet</a>
</div>$("#toggle").on("click", function(){
if($("#wrapper").hasClass("bye")){
$("#wrapper").removeClass("bye");
$("#wrapper").removeAttr("style");
}else{
$("#wrapper").addClass("bye");
$("#wrapper").attr("style", "display: none;");
}
});ですが、この方法だとボタンを押しても初期状態からtweetボタンの表示/非表示が切り替わりません。ずっと表示されないままのものもあれば、最初から表示されて消えてくれないパターンもあります。
visibility: hidden; の場合。ここにツイートボタンが出る（はず）
Tweetちなみにこの問題はブラウザによっては起こらないこともあるようです（-webkit 環境など）。
理由
一言で言うと、仕様です。
ページ読み込み時に表示されない要素のstyle情報は定義されないので、一部のスクリプトと相互作用を起こしてこのような不具合が発生するようです。
対処法
ページ読み込み時にツイートボタン自体は要素の表示位置を確保させつつ、それを何らかの方法で表示させなければよい、ということになります。
opacity: 0; + z-index: -1;
透明度を0にして非表示にすると画面には映らなくなりますが、それだけではクリックできてしまうので、背景より後ろに追いやってしまいます。これで実質触れなくなります。
opacity: 0; z-index: -1; の場合。ここにツイートボタンが出る（はず）
サイズを0にして、はみ出た部分を見えなくすることで表面上はまるっきり描画されなくなります。padding や border など、width と heightに含まれないものは残ってしまうので、使っている場合はそこも変更すれば良いでしょう。下の例ではpaddingをいじっていないので、正方形として残っています。
width:0; height: 0; overflow: hidden; の場合。ここにツイートボタンが出る（はず）
Tweet触ってみて、使い勝手の良さそうなもので対応すればよいと思います。面倒だったので全てインライン属性として書いてしまいましたが、cssにスタイルを記述して、クラスの追加/削除で対応しても問題ないはずです。
