メインコンテンツにスキップ

Facebookを埋め込む

Facebookのいいね!ボタンや投稿などの任意コンテンツをページへ埋め込む手順をご紹介します。

2週間以上前に更新

注意:現在、Facebookの仕様によりタイムライン埋め込みがモバイル端末で表示されない事象が発生しています。この問題はFacebook側の仕様によるもので、Studio側の設定で解決することはできません。Facebookページへのリンクを設置するなど他の方法もご検討ください。

Facebook公式が提供している「ページプラグイン」というサービスを使って、Facebookページやボタンなどを簡単にStudioサイトに埋め込むことができます。

Facebookページを埋め込む手順

(1) ページプラグインでiframeコードを取得する

Facebookページプラグインで、埋め込みたいFacebookページのURLを指定し、幅や高さなどのオプションを任意で設定します。

設定が完了したら下部「コードを取得」をクリックします。

モーダルでコードが表示されるので、IFrameタブに表示されたコードをコピーします。

(2) 埋め込みボックス(Embedボックス)を配置する

  1. ナビゲーションで追加アイコンをクリックします。

  2. [基本]タブをクリックします。

  3. [埋め込み]セクションから[Facebook]の埋め込みボックスをクリックします。

  4. Facebook用の埋め込みボックスがスクリーン上に配置されます。


(3) Facebookリンクを埋め込む

  1. ページに配置したFacebook埋め込みボックス(Embedボックス)を選択します。

  2. 右パネル上で[埋め込み]タブを選択します。右パネルが閉じている場合は開いてください。

  3. [埋め込みコード]の入力フィールド内で[エディタを開く]をクリックします。

  4. [埋め込みコードを編集]画面の左側で、もともと入っている文字を削除し、(1)でコピーしたコード貼り付けて[保存]します。

  5. ライブプレビューを使って、埋め込みが正しく表示されているか確認します。

  6. 公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。投稿内容がエディタ上に反映されない場合、ブラウザの更新(リロード)をしてください。

シェアボタンの配置

シェアボタンを配置したい場合も、こちらのプラグインから、上記と同様の手順で設定が可能です。

SNS FB iframe

フェイスブック いいね シェア

こちらの回答で解決しましたか?