Facebookのページを埋め込むには？不具合の対策も紹介！

[wpi_designer_button id=4164]　　　[wpi_designer_button id=4170]

1.Facebookの埋め込み機能とメリット

Facebookの埋め込み機能の内容と、得られるメリットを解説します。

1-1 Facebookの埋め込み機能とは

Facebookの埋め込み機能とは、Facebook上の公開設定の投稿を、Facebook以外のサイトやブログに貼り付けられる機能です。（ビジネス）アカウントのFacebookページだけでなく、投稿記事も埋め込めます。

1-2 Facebookページを埋め込むメリット

外部サイトにFacebookページを埋め込むことで、メリットを得られます。特に影響が大きい2つに注目してみましょう。

1-2-1 Facebookページのアクセス数・いいね数の増加

閲覧者の多くは、Facebookユーザーや自身のFacebookのページに「いいね」を押します。「いいね！」の多さは、そのまま記事とPRの評価に繋がります。

外部サイトに埋め込めば、普段Facebookを使わないユーザーや、アカウントを持っていない層にアクセスしてもらえる機会が増えます。結果的に、アクセス数向上や、「いいね！」数の増加に繋がります。

1-2-2 ブログとして活用

自社サイトに記事やコラムを書きたい場合は、手軽に更新できるFacebook投稿を、ブログ機能として活用するのがおすすめです。

埋め込み機能を使わない場合は、サイトとFacebook用に2つの記事を書かなければなりません。しかし、埋め込み機能を使うと、投稿がブログ記事やコラムとして活用できます。

2.Facebookを埋め込む手順

ビジネスアカウントのFacebookページを、サイトに埋め込む方法と手順をご紹介します。

2-1 ①マイページURLの入力

まずは、埋め込みたい記事のURLを以下の手順で入力します。

1：Facebookの「ページプラグイン」*にアクセスする

2：「FacebookページのURL」に、埋め込みたい記事のURLを貼り付ける

「FacebookページのURL」以外にも、「タブ」「幅」「高さ」などの欄がありますが、入力せずとも構いません。

参考：*Meta for Developers「ページプラグイン」

2-2 ②埋め込みコードの取得

「FacebookページのURL」にURLをコピペすると、プレビュー画面が表示されます。URLが間違っていると何も表示されません。埋め込みたいページがきちんと表示されているか確認し、「コードを取得」をクリックします。

2-3 ③コードをコピーしWebサイトへ張り付ける

「コードを取得」をクリックすると「JavaScript SDK」と「IFrame」が表示されます。「IFrame」を選び、コピーしてください。

次に、取得したコードをサイトの表示させたい箇所に貼り付けます。コードを貼り付けるときは、ビジュアルモードではなく、HTMLモードの画面に貼り付けましょう。ビジュアルモードに貼り付けても、ページは反映されません。

3.Facebookを埋め込む際の注意点

Facebookを埋め込む際には、以下のことに注意してください。

3-1 Webサイトの表示スピードが落ちる

他のSNSを埋め込むケースも同様ですが、Webサイトの表示スピードが落ちる可能性があります。Google検索エンジンでは、サイトの読み込み速度も評価基準の1つとなっています。注意してください。

3-2 埋め込むサイズに限界がある

埋め込めるサイズには、制限があります。最低180px、最大500pxの間で調整可能です。高さは、最低70pxからです。500pxを超えるサイズには、対応していません。サイトデザインの際には、サイズにも注意しましょう。

3-3 Webサイト上での見え方を工夫する

埋め込まれた箇所が、どう見えるのか確認してから公開しましょう。表示設定が小さい場合は、文字量が多いと見づらくなってしまいます。投稿する際は、文字数や画像の使用などを工夫し、見やすいサイトを目指しましょう。

3-4 個人情報表示をオフにする

Facebookでは、「ページにいいねしたユーザー」が表示されます。ユーザーの中には、「いいね！」をしたことを知られたくない人もいるでしょう。個人情報が表示されないように、Facebookのアカウントで設定しておくのがおすすめです。

「いいね！」の公開範囲の設定には、「公開」「友達」「自分のみ」「カスタム」の4種類があり、デフォルトは「公開」になっています。「公開」の場合は、友達以外にも「いいね！」数が公開されるので、「自分のみ」に変更しておきましょう。

4.Facebookの埋め込みページが表示されないときの原因と対策

手順通りに専用コードを貼り付けたのに、埋め込みページが表示されないときは、以下の原因が考えられます。

4-1 URLが適切でない

ページのURLや、埋め込みたい記事を間違えている場合は、正しく表示されません。入力したURLが間違っていないか、記事を間違えていないかを確認してみましょう。

4-2 公開制限が設定されている

Facebookでは、公開範囲を指定可能です。「プライバシー設定とツール」画面で、コンテンツ閲覧権限が範囲制限されていないかをチェックしてみましょう。共有範囲は以下のとおりです。「公開」以外に設定されている場合は、「公開」に変更する必要があります。

5.まとめ

Web担当者は、サイトやSNSの更新など、やらなければならないことがたくさんあります。作業を効率化したいけど、サイトもSNSも充実させたい場合は、Facebookの埋め込み機能が便利です。

Facebookページを更新するだけで、サイトも充実します。今回は、Facebookの埋め込み手順や注意点を解説したので、自社サイトの充実化にご活用ください。

Facebook広告について詳しく知りたい方はこちら

[wpi_designer_button id=4164]　　　[wpi_designer_button id=4170]