FacebookページプラグインのGet Codeが表示されない｜埋め込みコードを手動で設置する方法

FacebookページのタイムラインをWebサイトへ埋め込む際は、Meta for Developersのページプラグインから埋め込みコードを取得する方法が一般的です。

しかし、「Get Code」をクリックしても何も表示されず、埋め込みコードを取得できない場合があります。

今回、実際にFacebookページのタイムラインをサイトへ埋め込もうとした際に同様の現象が発生したため、その状況と対処法を紹介します。

FacebookページプラグインでGet Codeが表示されない

Facebookページのタイムラインをサイトへ埋め込むため、Meta for Developersのページプラグインを利用しました。

ページURLや表示サイズなどを設定し、「Get Code」をクリックすると通常は埋め込みコードが自動生成されます。

しかし今回の環境では、「Get Code」をクリックしても何も表示されず、コード取得用のダイアログも表示されませんでした。

そのため、ページプラグイン画面からコードを取得できない状態となりました。

「Get Code」をクリックするとローディングは表示されますが、その後コード生成画面は表示されませんでした。
プレビュー自体は正常に表示されていましたが、コード生成のみが行われない状況でした。

対処法

Get Codeが利用できなくても、ページプラグインで生成されるコードの内容は公開されているため、手動で設置することで同様の表示が可能です。

body直下にSDKを設置

まずはSDKをbodyタグ直下へ設置します。

FacebookのJavaScript SDKを読み込むためのコードです。
SDKが読み込まれることで、HTML内の fb-page 要素がFacebookのページプラグインとして変換され、タイムラインが表示されます。

タイムラインを表示したい箇所にfb-pageを設置

data-hrefには表示したいFacebookページのURLを指定します。
username の部分は実際のFacebookページURLへ置き換えてください。
その他のdata属性を変更することで、表示サイズやヘッダー表示の有無などを調整できます。

fb-pageで利用できる主な設定項目

HTML属性	説明	デフォルト
data-href	FacebookページのURL	なし
data-tabs	表示するタブ（timeline、events、messagesなど）	timeline
data-width	幅（180～500px）	340
data-height	高さ（70px以上）	500
data-small-header	小さいヘッダーを使用する	false
data-adapt-container-width	親要素に合わせて幅を調整する	true
data-hide-cover	カバー画像を非表示にする	false
data-show-facepile	友達のプロフィール画像を表示する	true

その他の設定項目や最新仕様については、ページプラグイン開発者ドキュメントをご確認ください。

手動設置で正常にタイムラインを表示できた

上記コードを直接設置したところ、問題なくFacebookページのタイムラインを表示できました。

ページプラグイン画面でGet Codeが表示されない場合でも、必要なコードを手動で設置することで対応可能です。

まとめ

Meta for Developersのページプラグインで「Get Code」をクリックしてもコードが表示されない場合は、Facebook SDKとfb-page要素を手動で設置することで対応できます。

今回のケースでは、ページプラグイン自体は正常に動作していたものの、コード生成部分のみ利用できませんでした。

同様の現象でお困りの場合は、本記事のコードを参考に手動で設置してみてください。

なお、本記事の内容は2026年6月時点で確認したものです。
Metaの仕様変更により、コードや設定方法が変更される可能性があるため、最新情報は公式ドキュメントもあわせてご確認ください。