TwitterとFacbookの埋め込みをきれいにしてレスポンシブしたい
解決したいこと
一応現状では動いています。ですが、将来がどうかわかりませんので。
現状、レスポンシブ＋iframe+div単一タグによって
TwitterとFacebookをJavaScriptでHTMLタグを記載して、
HTMLとJSをインサートすることで
きれいにiframe内で500px×500px もしくは 400px or 300px × 200pxで
表示できています。
しかし、iframeはきれいに表示できるものの、2回のアクセスを増やしたりとか、正式にサポートされているわけではないので不安です。
※コピペできるiframeタグは使用していません。
発生している問題・エラー
現状はなし、将来性のもの
該当するソースコード
下記に記載されているソース
https://colers.jp/snippet/javascript-lazy-load-sns
を、Twitter単独、Facebook単独でも動作するように変更
<!--load-twitter.html, load-facebook.html-->
<html><head><script src="上記JS"></script></head>
<body><div class="load-twitter"></div></head></html>
<!--上記htmlを読み込むhtml（イメージ的にscss含む）-->
<html><head>
<style>
.sns {
@include mq(md) {
display: flex;
}
}
</style>
</head>
<body>
<div class="sns">
<iframe loading="lazy" src="load-twitter.html"></iframe>
<iframe loading="lazy" src="load-facebook.html"></iframe>
</div>
</body>
</html>
自分で試したこと
TwitterやFacebookのJSSDKのパラメータをいじりまくっても解決に当たらず、
簡潔にiframeをして更にその中でJSSDKを読み込む以外に思いつかなかった。
0