岐阜でホームページ制作、マーケティング&デザインを提供しているMWORKSです

お気軽にお問い合わせください

TEL 0573-67-8189

Mブログ

- mblog -

Facebookページをホームページに埋め込む方法

公開日: : Facebook

Facebookページをホームページに埋め込む方法_カバー画像

企業サイトや個人ブログなどに、Facebookページのいいね!ボックスを埋め込む方法を紹介します。Page Plugin(ページプラグイン)というツールを利用します。

ページプラグインを利用すると、ホームページ上で、Facebookページと同じように、「いいね!」やシェアができます。
Facebookページをに簡単に埋め込んで宣伝できるので、ホームページとFAcebookページ両方運営している方におすすめです。

手順としては、
1.App IDの登録
2.ページプラグイン(Page Plugin)
3.ホームページにコードを埋め込み

となります。

AppIDの登録をする

■Facebook開発者ページ

https://developers.facebook.com/apps

ページプラグインを利用する前にまずは、AppIDの登録が必要です。
Facebook開発者ページにアクセスして、『Register Now』をクリックします。

Facebook開発者ページ

Facebook個人ページにログインしている必要があります。

Facebook開発者として登録と表示されますので、『はい』を選択して『登録する』をクリックします。

fb-pageplugin02

使用するプラトフォームを選択します。
今回は、ホームページなので『wwwウェブサイト』を選択します。

www_ウェブサイト

次にアプリまたはウェブサイトの名前を入力します。(運営しているサイト名など入力)

アプリまたはウェブサイトの名前を入力

入力ができたら、『新しいFacebookアプリIDを作成』をクリック

新しいFacebookアプリIDを作成

次に、連絡先メールアドレス、カテゴリ(運営しているサイト内容の種類)を入力、選択して『アプリIDを作成』をクリックします。

アプリIDを作成

これでアプリの作成が完了しました。
ページの下の方に、Site URLを入力する箇所があるのでこちらも登録しましょう。(登録しなくてもページプラグインの設定はできると思います。アプリ設定ページから後から追加・編集も可能です)

ここまでで、このページでの設定は終わりです。

Site URLを入力

ページプラグイン(Page Plugin)の設置

次は、下記のページプラブインの設定ページにアクセスします。

https://developers.facebook.com/docs/plugins/page-plugin

このサイトで作成したコードをホームページに貼り付けることで、ページプラグインを表示することができます。

ページプラグイン(Page Plugin)

サイズ、オプションを設定

表示するボックスのサイズを決めることができます。
幅、高さに数値を入力すると、下にプレビューが表示されます。

サイズ、オプションを設定

オプションで下記の項目があるので、こちらもチェックするとプレビューで確認できます。

  • スモールヘッダーを使用
  • plugin containerの幅に合わせる
  • カバー写真を非表示にする
  • 友達の顔を表示する

表示させたい形に調整が完了したら、『コードを取得』をクリックします。

コードを取得

コードを取得

①アプリIDと言語を選択

先ほど設定したしたアプリを選択します。

②このコードを表示したいサイトのbodyタグの直下に貼り付けます。

③このコードをFacebookページを埋め込みたいページの箇所に貼り付けます。

完成!

下記に③のコードを貼り付けて、表示させています。

まとめ

【Facebookページをホームページに埋め込む方法】でしたが、いかがでしたでしょうか。普段HTMLやWordpressのテンプレートを編集している方であれば簡単な作業だと思います。Facebookページをアピールしたい方にはおすすですので試してみてください。

それではまた。


スポンサーリンク

Mblog

新着記事

- new articles -

ホームページ制作やマーケティングの他にも、日々の仕事での考えや気付きなどを記事にしています