アルム＝バンド 経緯
先日 facebookページ の埋め込みが表示されない (未解決) という現象に遭遇した話を書きましたが、それに対しての自分なりの対応策を考えました。
通常全く動作しない状態であれば、 facebook埋め込み コードは元の blockquoteタグ 以下が残るはずなので、代替リンクをわざわざ生成する必要はないと思われます。
しかし、今回の現象では処理の途中でコケているのか、この blockquoteタグ が消えてしまっていました。そのため、元の埋め込みコードとは別に代替リンクを生成することを考える必要がありそうでした。
しかも期間としては結果として2週間程度に及び、着手当初は現象がいつまで続くのか、そもそも一時的なものなのか何か恒久的な変更があったのかが判断が付かなかったため、着手した次第。
成果物
プロジェクト名にもある通りアルファ版です。
理由としてはいくつかありますが、最大の理由はこれを作成中に現象が解消してしまい、当初想定していた現象が発生した際に本当に機能するのかどうか検証ができなくなってしまったためです。
使い方
- facebook埋め込みをページプラグイン – ソーシャルプラグインの「JavaScript SDK」の手順で実施。
<div class="fb-page" ...>にid属性 を付与(デフォルト:cajonFBPage/<div class="fb-page" id="cajonFBPage" ...>)- 代替リンク生成用の
divタグ(id属性あり) を上述タグ直下に追記(デフォルト:cajonAltLink/<div id="cajonAltLink"></div>) - 以下のようにJSコードを追記
import cajonFB from 'cajon_fb';
window.addEventListener('load', () => {
const cajon = new cajonFB('https://www.facebook.com/facebook'); // 第一引数必須、埋め込みをしたい facebookページ のURL
cajon.piano(); // Cajon 処理実行
});やっていること
やっていることとしては以下の通り。
- タイムラグ対応としてチェック処理前に5秒待機
sdk.jsタイプで埋め込む際に必要な<div id="fb-root"></div>や<div class="fb-page" id="cajonFBPage" ...></div>の存在チェックや、これらの要素の子要素がsdk.jsによって生成されているかをチェック- もしチェック判定に失敗した (要素や子要素がない) 場合、専用に追加した
<div id="cajonAltLink"></div>に代替リンクを生成、埋め込みの元の<div class="fb-page" id="cajonFBPage" ...></div>はdisplay: noneで隠す - 逆に判定に成功した (正常に埋め込みがされた) 場合は、代替リンク用タグ
<div id="cajonAltLink"></div>をdisplay: noneで隠す
これで同様の現象が発生した場合は少なくとも「何も表示されない」状態は回避できることを期待したいです。
参考
JSで待機
Promise
setTimeout
DOM操作
要素の存在チェック
子要素取得
- JavaScript | ノードの子・親・兄弟ノードを取得(childNodes,firstChild,nextSibling,parentNode,他)
- 特定のHTML要素の子要素、親要素、前後の要素を取得する | GRAYCODE JavaScript