Unknown Region

プログラムでハマったエラーとその解決方法についての備忘録メモ

Twitterのシェアボタン設置の落とし穴

Twitterのシェアボタン設置に関して、ハマってしまったので備忘録がてらにメモ。

Googleで「Twitter シェアボタン」なんて検索すると出てくる通り、以下のTwitterの公式サイトから「シェアボタン」のコードを生成して、自分のウェブサイトなどに埋め込むことができる。

publish.twitter.com

通常通りに設置するだけなら単純にステップを進めて、最後に表示されるコードを対象のHTML内に貼り付ければ完了。

僕がハマったのは、非表示にしているDIVタグに対して「シェアボタン」を設置しようとしたからだ。

やりたかったこととしては、最初は「非表示(display: none)」にしておいたDIVタグを後から特定のタイミングでJavaScriptCSSで「表示(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が苦手な方は前者を、バリバリ得意という方は後者を選ぶべきだと思う。

最後に、以下に後者の方で必要なドキュメントを貼っておく。

developer.twitter.com

 

連絡先: plugout777★yahoo.co.jp (クローラー対策のため★を@に変更してください)