Facebookの企業ページをホームページ上へ設置する方法~2017年3月版~
最終更新日：2023/10/27
2015年6月23日より、従来利用していたfacebook埋め込みが利用できなくなって、Page Pluginへ変更がありました。
以前ご案内したブログ
「FacebookのLikebox（ライクボックス）が6月から使えなくなる！？新しく始まるPage Pluginとは？」
では使えなくなる旨のみをお伝えいたしましたが、今回はホームページへの貼り付けの方法についてご案内していきたいと思います。
１.Facebookの差し込みコードを取得する
まず、ホームページ内に「Page Plugin」を設置する際は企業ページが必要になります。
作成方法は下記にまとめておりますので、ご確認ください。
■Facebookの企業ページを作成する方法2015年6月版
企業ページを作成後、ソーシャルプラグインページへログインします。
(この際、Facebookへログインしていなくてもいいようです。)
ここで、ホームページに埋め込む形式を選んでいきます。
今回は一般的なページプラグインについて解説していきます。
1-1.FacebookページのURL
ここには上記でご案内した企業FacebookページのURLを記載してください。
Faceboookのページを入力すると入力したページがまず表示されます。
1-2.タブ
表示するタブになります。
「timeline」「events」「messages」こちらの3種類のタブを設定していきます。
「timeline」は一般的な、企業ページに投降した情報が表示されるようなものです。
「events」はイベント情報に登録している情報が表示されますので、セミナーや展示会などを多く開催している企業にはいいかと思います。
「messages」はFacebook経由でユーザーから企業へメッセージを送ることが可能です。
この3つをつなぎ合わせるときは、コンマ(,)で区切って作成します。
▼例：「timeline」「messages」の場合
1-3.幅、高さ
ホームページに合った大きさに設定してください。
大きさは横幅は180～500px、高さは最低70pxとなっています。
残りの「スモールヘッダーを使用」に関しては、カバー画像の大きさの変更
「plugin containerの幅に合わせる」こちらはレスポンシブサイトのようなホームページの横幅が変わるサイトの場合はチェックを入れるようにしてください。
「カバー写真を非表示にする」「友達の顔を表示する」は見たままですので、説明は不要かと思います。
上記の設定が完了しましたら、画面左下の「コードを取得」ボタンをクリックしてください。
２.コードをホームページに設置する方法２つ
コードを取得をクリックするとポップアップが立ち上がります。
(このアプリは[開発モード]になっており、公開されていません。[アプリダッシュボード]で[公開モード]をオンにすることができます。
という表示が出ますが、こちらはタイムラインを設定する程度であれば必要ない箇所ですので引き続き行っていきます。)
コードは「Javascipt SDK」と「iframe」の２種類が表示されています。
どちらもページプラグインを導入することが出来ます。
特に「iframe」の場合は表示させたい個所に設置するだけで、表示されますのでとても簡単です。
しかし、まれに「iframe」が閲覧できないブラウザある為、お勧めとしては「Javascipt SDK」になります。
「Javascipt SDK」で設定する場合はStep2で記載されている記述を「body」タグ内に設定します。
これは表示させたいページすべてに設置します。
(弊社CMSをご利用の企業様は弊社サポートまでお声がけいただきましたら設定を行わさせていただきます。)
ステップ3で表示されているコードは設定したいか所に貼り付けますと官僚となります。
３.実際に埋め込んでみました
左側が「Javascipt SDK」、右側が「iframe」で設定したものになります。
多少高さが違うこともありますが、見た目上何も問題はないようです。
Facebookは会社や店舗、イベントなどの情報を宣伝する際に効果的になります。
Facebookで企業ページを作成されたのであればぜひ、ホームページ上に貼り付け多くのいいね！を増やしていきましょう。
また、Facebookにはページプラグイン以外にも様々なプラグインが用意されています。
その為企業毎に必要なプラグインを利用して活用してください。
4.Facebookページが表示されないときは？
上記の方法でコードを埋め込んだのに、Facebookページが表示されないときの原因と対処法をご紹介します。
まず、注意していただきたいのが、ローカルでは確認できないという点です。「FTPでアップロードする前にローカルでチェックしておこう」と思われるかもしれませんが、ローカルでは表示されません。サーバにアップしてから確認しましょう。
サーバにアップしているのに表示されないときは、Facebookページで「公開範囲」「国別制限」「年齢制限」のいずれかが制限されていないかを確認します。「誰でも見ることができます」の状態ならOKです。
5.まとめ
以上、Facebookページの差し込みコード埋め込む方法をご紹介してきました。
いまやFacebookを埋め込んでいないWebサイトはあまり見かけないほどですから、まだだという方はぜひ、上記の方法で埋め込んでみてください。
Facebookの運用でお困りの企業様は、当社でコンサルティングも行っておりますので、お気軽にお声がけください。
セミナー情報
2017年12月14日(木) 開催
Web担当者がいない企業がWebマーケティングを始めるための第一歩
「Web担当者がいない企業がWebマーケティングを始めるための基礎」をテーマに1400社以上のホームページ制作実績をもとにした、ホームページからの売上向上のノウハウを余すことなくお伝え致します。また現在インターネットの中ではどういったWebサイトが求められているのか、弊社で制作している様々なクライアントの活用事例を実績を交えながら具体的にお話させていただきます。
