Barbaを使用しているとSNSの埋め込みがうまく表示されません。SNSの埋め込みは読み込まれる時にjavascriptでコード生成しているらしいので、ランディングページ(初回読み込み時)に埋め込まれていたら表示されていても、別ページから遷移してきた場合、scriptが読み込まれずに埋め込みが展開されないため残念な表示になってしまいます。

埋め込み領域が暗いのはblockquoteにCSSがあたっているからです。本当ならばblockquoteが展開されてiframeになってツイートが表示される予定なのですが、Barbaのせいで読み込まれません。

barba.hooks.after で再読み込みする

Google検索するといろいろなBarba文献が出てくるのですが、ちょっと古いのかうまく動かなかったり、ややこしすぎてBarba自体辞めちゃいたくなるような長文コードが紹介されていたりしますが、2023年のv2では10行以下で対応できました。これが最善策かどうかはよくわかりませんが、表示できれば問題なしです。

barba.hooks.after(() => {
  var twscript = document.createElement("script");
  twscript.setAttribute("async", "");
  twscript.setAttribute("charset", "utf-8");
  twscript.src = "https://platform.twitter.com/widgets.js";
  document.body.appendChild(twscript);
  console.log("岸部一徳");
});

最後の行はテスト時にコンソールで確認する用なので不要ですが残しておきます。公式側にもHookという項目で簡単に掲載されているので併せて読むと良いと思います。

https://barba.js.org/docs/advanced/hooks/

ちなみに、Google検索でこのケースを調べると Barba.Dispatcher を使った解決策が多数出てきますが、なにかとうまくいかないのでまずは上記コードを試してみてくださいませ。ですが、X(旧 twitter)に変更されているのでこの方法がいつまで続くのかは謎です(srcを変えるだけで動かせてください、イーロンさん)

ページ遷移で行ったり来たり、別ページでリロードして戻ってきたりして試してみてください。

執筆者

Posted by zipless

Leave a comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Related Posts

墨田区
ウェブデザイン作りたくない
Menu