うまく表示されない?
WebサイトにTwitterシェアボタンを埋め込んだのに、Webサーバーにアップロードすると上手く表示されなかったり、クリックしても想定したツイートが表示されないという場合があります。
おかしいな、ローカル環境ではきちんと表示されたのに・・・?
私の場合、AdBlockを無効にすると直りました。
↓無効にします
具体例
HTML, CSS, JavaScriptでコードを書き、さくらみこボイス集というWebサイトを作りました。
Twitterシェアボタンも追加。Twitter公式コード生成ツールで作ったコードを組み込んでいます。下記2サイトを参考にしました。
Twitterシェアボタンの設置
シェアボタンの設置方法とカスタマイズ
ちなみに、<script>タグはhead内の最後に、<a>タグはbody内に書いています。
さて、作ったWebサイトをローカル環境で表示させてみると想定どおりの表示・挙動をしました。
しかし、Webサーバー(Xserver)にアップロードしてみると、「おや?Twitterシェアボタンの表示がおかしい・・・クリックすると想定した内容が表示されないぞ?」
ブラウザはGoogleChromeを使っていますが、キャッシュを削除しても変わりません。
「弱ったなぁ・・・」
そこで、ネットで検索してみると、「広告ブロックのGoogleChrome拡張機能を無効にすると正しく表示される」とのページを発見。
私のGoogleChromeにはAdBlockを入れているのですが、無効にしてみました。
すると・・・ちゃんと表示された!!
まとめ
Twitterシェアボタンが上手くWebページに表示されない場合は、広告ブロックの拡張機能をオフにしてみてください。
ちなみに、私が今回作ったWebサイト「さくらみこボイス集」は、ボタンをクリックするだけでさくらみこ(ホロライブ)さんの声を聴くことができるWebサービスです。
可愛いので、ぜひ聞いてみてね!詳しくは、こちらの記事に書きました。
コメントを書く