特集・記事リスト 記事・特集リスト
資料ダウンロード 無料お役立ち資料
本サイトについて 本サイトについて
お問い合わせ お問い合わせ
閉じる

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

Facebookは基本的に、広告出稿しない限りは自身のFacebookページに「いいね」ボタンを押してアクションしたユーザー、そのユーザーのシェアなどでようやく他のFacebookユーザーに拡散される仕組みが一般的です。 無料で作れるHPでは、FacebookのURLを入れると自動的に最適化されるWeb制作サービスも存在していますが、細かい調節などは少し手間がかかり難しいことが多いです。

カテゴリ: Facebook

この埋め込み方法を使えば場所やサイズを細かく指定して行えるため、その他のユーザーに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種類から選ぶことができます。

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

④埋め込みコードをコピーして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サイト運用が可能になります。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。

そのままの計画で、目標達成できますか?

Webマーケティングには予想外な事態がつきものであることを私たちは理解しています。
考えて、考え抜いて設計したはずのKPIが全く達成されずに、形骸化し誰も触れない状態になっている。

サイト内でユーザーがどのような行動をとっているかを解析

自社と競合を比較し、どこが勝っていてどこが弱みなのかを浮き彫りに

ユーザーのニーズや業界動向等を調査し、状況にあった施策を提案

課題解決のポイント、目標達成のプロセスなど
Webサイトの成長につながる具体的な手段をご提示いたします

運営会社

Web制作・広告・コンサルティングのセルリア

サービス一覧
会社概要