FacebookをWebサイトに埋め込む最も簡単な方法とメリット・注意点

この埋め込み方法を使えば場所やサイズを細かく指定して行えるため、その他のユーザーにFacebookページの認知や記事の紹介を行うのに効果的です。今回は自身のWebサイトにFacebookを埋め込む方法を紹介します。

Facebookを埋め込むメリット

Webサイトに埋め込むことで、Facebookで更新された内容がそのままWebサイトに反映されるので、Webサイトに訪れたユーザーは常に最新のFacebookの情報を閲覧することができ、Webサイトを新鮮に保つ効果も期待できます。そのほかにもFacebookを外部サイトに埋め込むメリットを紹介します。

Facebookページや投稿の認知度の向上

Facebookの投稿は基本的にFacebookを利用しているユーザー、なおかつ自身のFacebookのページに「いいね」しているユーザーがメインの閲覧者です。つまり、自身のFacebookページで紹介されている投稿の内容や商品のサービス、ブランドを認知していて、好印象を持っている潜在顧客やファンにがメインの閲覧者です。

Facebookを外部サイトに埋め込むことで、Facebookページの認知度の向上やFacebookページだけでは届かない層のユーザーへ投稿をリーチすることが可能になります。

ワンクリックで指定したFacebookのページに誘導可能

埋め込むページを指定することで、Webサイトに訪れたユーザーがそのページをクリックした際にユーザーをそのFacebookページに誘導することができます。潜在顧客の拡大や、コミュニケーションが可能になる可能性が上がります。

指定したFacebookの投稿内容がWebサイトでも閲覧可能に

宣伝したい情報や自身のブランドの向上が見込めます。ブランドメッセージの共有や埋め込んだコンテンツの質がWebサイトを訪れたユーザーにとって価値があるコンテンツだった場合は二次拡散が期待できます。

また、埋め込んだFacebookのリーチやインタラクションの増加も期待できます。

Facebookの投稿を埋め込む方法

Facebookの投稿を埋め込みたい場合の手順は、大まかにコードの取得とWebサイトへの貼り付けの2つのみです。この作業はスマートフォンなどではできないので、パソコンで行いましょう。順番に解説します。

Facebookの投稿の埋め込みコードを取得

まずは自身のWebサイトに埋め込みたい投稿を、Facebookにログインして表示させます。

①投稿の右上の「・・・」マークをクリックしてます。

②「埋め込み」をクリックします。

③FACEBOOK for Developersに移動するので、埋め込みたい投稿が表示されているかを確認し、「コードを取得」をクリックします。

④「JavaScript SDK」と「IFrame」の2種類から選ぶことができます。

複数のFacebookソーシャルプラグインを使用する場合や、読み込みのタイミングを変更したいなど、複雑な設定を行う場合はJavaScript SDK、普通に埋め込む場合はIFrameを選択します。ここではIFrameを選択します。

⑤埋め込みコードをコピーしてWebサイトのHTMLに貼り付けます。

WordPressなどで貼り付けを行う場合はコードエディターに貼り付けを行いましょう。ビジュアルエディターで貼り付けてしまうと反映されません。

Facebookページを埋め込む方法

Facebookの投稿を埋め込む方法と仕様が異なるので注意しましょう。まずは Facebookのページプラグインにアクセスしましょう。

①埋め込みたいFacebookページのURLをペーストします。

②Facebookページが表示されるので、確認後「コードを取得」をクリックします。

③ここからは投稿の埋め込みと同様に「JavaScript SDK」と「IFrame」の2種類から選ぶことができます。

④埋め込みコードをコピーしてWebサイトのHTMLに貼り付けます。

こちらも、WordPressなどで貼り付けを行う場合はコードエディターに貼り付けを行いましょう。ビジュアルエディターで貼り付けてしまうと反映されないので注意しましょう。

Facebookの投稿・ページを埋め込む際の注意点

埋め込みのコード自体は非常に簡単に取得できますが、いくつか注意点があります。

大きさの調整に限界がある

埋め込む際の横幅には制限があります。 180px〜500pxの間で調整は可能ですが、このサイズを超えるサイズには対応していないのでサイトデザインの際に注意しましょう。

Webサイトの表示スピードが下がる

Facebookだけではなく他のSNSをWebサイトに埋め込む場合も同様ですが、Webサイトの表示スピードが下がる原因になる可能性があります。昨今のGoogleのWebサイトの評価基準では、Webサイトの読み込み速度も評価の1つになっているので注意しましょう。

個人情報の流出に注意する

他ユーザーがWebサイト経由であなたのFacebookページを見た時に、「このページにいいねしたユーザー」が表示されるため、個人情報の流出のリスクもあります。この設定はFacebookのアカウントから非表示に変更できるので、設定しておくことをおすすめします。

アカウント名を見やすくする工夫を検討する

Webサイトで表示できるサイズに限界があるので、Webサイトでどのように見られるのかを考え工夫することも大切です。表示設定が小さい場合、文字量が多いと非常に見づらくなってしまうことも多いので、投稿する内容や画像の使用など、工夫してみるとグッと見やすいWebサイトになります。

まとめ

埋め込む方法やメリット・デメリットをしっかりと把握した上で、最適な方法を選択しましょう。例えばすでにInstagramやTwitterなどがWebサイトに埋め込まれている場合は表示スピードの観点からも注意が必要です。 InstagramとFacebookは連携させることもできるので、工夫してうまく運用することで効率的でスムーズなWebサイト運用が可能になります。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。