FacebookページをWebサイトに埋め込み貼り付ける方法

FacebookページをWebサイトに埋め込み張り付けするには、コードを取得する必要があります。Facebookページに関するコードなのでFacebookサイト内で申請してコードを取得すると思う人が多いと思いますが、別サイトでの取得になります。

別サイトでコードを取得するので、Facebookにログインしていない状態でも受け取ることができます。

Facebookページを埋め込み張り付けするために、開発者サイトでコードを取得するには、AppIDが必要です。Facebookにログインして「Facebook開発者になろう」という項目で「今すぐ登録」をクリックしてください。

メッセージが表示されるので手順に従って、手続きを進めていきます。

「使用するプラトフォーム」という項目では「ウェブサイト」を選択してください。サイト名を入力し、「新しいアプリIDを取得」をクリックしましょう。この新しいアプリIDがAppIDです。

Facebookに「開発者になろう」という項目があるので、ソフトやアプリの開発をしていないとAppIDは取得できないと誤解している人もいますが、実際はそういったソフトやアプリを使用するだけでもAppIDは取得できます。

FacebookでAppIDを取得するためには、次に連絡メールアドレスやサイトのカテゴリを登録する画面が表示されるので、必要事項を入力して、間違いがないことを確認し、登録を済ませます。

これでAppIDを取得できたので、Facebookの開発者サイトからコードを取得することができます。

FacebookページをWebサイトに埋め込み張り付けするためのコードは、Facebookページをサイトに埋め込み張り付けすることをページプラグインといいます。

Facebookのページプラグインのコードは、開発者サイトから取得します。

Facebook内で「ページプラグイン」と検索するとサイトが出てくるので、そこからコードを取得しましょう。開発者サイトからコードを取得するためには、Webサイトに貼り付けしたいFacebookページのURLが必要です。

サイトでページプラグインのコードを取得するためにはFacebookにログインしてあることと、埋め込み貼り付けしたいFacebookページのURLをコピーしておくことが必要です。

ページプラグインして貼り付けしたいFacebookページのURLを入力すると、プレビューが表示されます。Webサイトに表示したいスタイルを変更することはできないですが、プレビューで確認してから、その下にある「コードを取得」をクリックします。

するとFacebookページを、ページプラグインのWebサイトに埋め込み張り付けするコードが取得できます。

開発者サイトで取得したコードはダウンロードしたり、アプリをインストールしたりするわけではないので、面倒な手順はありません。ページプラグインを行う方法はAppIDを取得していれば、初心者でもすぐに埋め込み貼り付けできます。

ページプラグインのコードを取得すると2つのタブがあるポップアップメッセージが表示されるので、「IFrame」というタブをクリックします。

「IFrame」タブに表示されているカラフルな英文がFacebookの埋め込み貼り付けコードですので、すべて選択してマウスの右クリックでコピーしましょう。

AppIDを取得し、コピーしたページプラグインのコードをWebサイトで張り付けることでFacebookページをWebサイトに埋め込み張り付けすることができます。

開発者サイトで取得したコードを取得出来たら、あとのFacebookの埋め込み張り付けする方法は簡単なので、ここまでできれば一安心です。

FacebookページをWebサイトで埋め込み張り付けする方法は少し大変ですが、YoutubeページをWebサイトで埋め込み張り付けする方法はとても簡単です。

サイトに埋め込み張り付けしたいYoutube動画の「共有」をクリックして、ポップアップを表示させます。そこからページプラグインをするSNSやブログを選択すればいいだけです。

Facebookページを埋め込み貼り付けできる項目に、WordPressなどのサイトは含まれていませんが、SNSで発信するのは簡単です。

Facebookを埋め込み貼り付けしたいページから、ページプラグインのコードを取得できるので、開発者サイトへアクセスする必要もありませんし、AppIDを取得する必要もありません。

Youtubeを埋め込み張り付けする場合のコードは簡単に取得できるので、簡単に共有することができるのです。

Webサイトを作成するのに、無料でインストールできて簡単に使えるWordPressを活用している人は多いです。ここからはWordPressで作成したWebサイトに、Facebookページを埋め込み張り付けする方法について紹介していきます。

WordPressのWebサイトにFacebookページを埋め込み張り付けする方法は、まずダッシュボードから「外観」を選択し、「ウィジェット」をクリックします。

WordPressのダッシュボードとは「設定」や「ユーザー」「お問い合わせ」などの項目があるメニューのことで、WordPressを活用してWebサイトを作成しているとよく使う機能です。

ダッシュボードの外観では主にWebサイトに実際に表示される部分を編集します。Facebookページを埋め込み張り付けする場合も、WordPressの外観から「ウィジェット」を選びます。

WordPressで「ウィジェット」の「テキスト」をクリックすると、「サイドバー」「コンテンツ１」「コンテンツ２」などの項目が表示されます。

そこからFacebookページを埋め込み貼り付けしたい場所を選びます。

サイドバーとはWebサイトの左右に表示されるスペースのことですし、コンテンツは上から順番に1，2，3…となるので、WordPressのウィジェットで表記される項目でも、埋め込み貼り付けする場所はイメージしやすいです。

Facebookページを埋め込み張り付けしたい場所をクリックしたら「ウィジェットを追加」をクリックします。

ポップアップに「タイトル」と「内容」と項目が表示されるので、「タイトル」には好きなタイトルを、「内容」には開発者サイトで取得したコードを張り付けましょう。

プレビューで表示されることがありませんので、そのままポップアップ右下にある「保存」をクリックすれば、WordPressでFacebookページをWebサイトに埋め込み張り付けする手順は完了です。

WebサイトをやっているけどWordPressを活用していないという人でも、取得したコードは埋め込み貼り付けすることができます。

開発者サイトで保存したコードを保存して、Facebookページを受け込み、ブラウザで表示させればいいだけなので、初心者でもできますよ。

HTMLコードが理解できる人ならWebサイトのHTMLコードに自分で直接取得したコードを貼り付けすることで、Facebookページを埋め込み張り付けできます。

HTMLコードにFacebook埋め込み張り付けコードを入力するためには、一度取得した埋め込み貼り付けのためのコードを保存する必要があります。「test.HTML」といった形で保存しておいて、正しい場所に入力しましょう。

開発者サイトで取得したコードを保存できたら、WebサイトのHTML内でFacebookページを埋め込み張り付けしたい場所にある＜body＞の直後に取得したコードを入力してください。

Facebookの開発者サイトで取得したコードをWebサイトのHTMLコードに入力したら、ブラウザで正常に表示されているかの確認をします。

もしFacebookページの埋め込みが正しい場所に表示されていなかったら、取得したコードを入力するHTMLの場所を間違えています。

開発者サイトで取得したFacebook埋め込み張り付けのコードは保存してあるので、HTMLに直接入力する段階からやり直しましょう。

AppIDを取得し、開発者サイトからFacebookの埋め込み貼り付けコードを取得しても、WordPressを活用したり、HTMLでFacebookページを埋め込み張り付けしたりしたのに、正しく表示されないこともあります。

そういう場合は、Webサイトの公開範囲や閲覧年齢などに制限があります。

Facebookページを埋め込み張り付けする場合は、制限のないサイトであることが条件です。公開範囲、閲覧できる国の制限、年齢制限などがあると表示されないので気を付けましょう。

Facebookの埋め込み貼り付けに必要なHTMLコードに間違いがなく、Webサイトの制限を解除すれば、Facebookページが正しく表示されます。

Facebookページを埋め込み張り付けする場合、Webサイトで表示される大きさを指定することができます。あなたのWebサイトにちょうどいいサイズに指定して、Facebookページを埋め込み張り付けしましょう。

FacebookページをWebサイトに埋め込み張り付けする場合、幅と高さを指定することができます。指定する方法はFacebookのURLを入力する項目の下にある「幅」「高さ」に好きな数字を入力します。

Facebook埋め込みサイズの「幅」は最小180pxから最大500pxです。気を付けてほしいのは単位はセンチやミリではなく、ピクセルであることです。Facebook埋め込みサイズの「高さ」は最小70pxから指定でき、最大は無制限です。

Facebookの埋め込みサイズで、特になにも指定しない場合は50pxに設定されます。

スモールヘッダーとはFacebookの埋め込み張り付け部分の上に表示されるものです。スモールヘッダーを使用をオンにすると表示されて、オフにすると表示されません。

スモールヘッダーを表示すると、Facebookの埋め込み張り付けに通常なら表示されるCTA（コールトゥアクション）ボタンが表示されなくなります。

Facebookの「いいね」ボタンやCTAボタン、タイトルボタンなどの下に表示されるカバー写真によっては、ボタンのアイコンが見えにくくなってしまいます。

そういう場合は「カバー写真を非表示にする」をクリックしてオンにすると、埋め込み張り付けした部分にFacebookのカバー写真が表示されません。

ただFacebookの写真が明るかったり、シンプルなものだったりする場合は、「いいね」ボタンやCTAボタンなどが表示されていても、観づらいということはありません。Facebookのカバー写真を表示させておいても問題ないです。

Facebookの埋め込み設定で「友達の顔を表示する」をクリックすると、Facebookの埋め込み張り付けの下に友だち登録しているユーザーで「いいね！」を押した人たちを表示させることができます。

埋め込み張り付けしたいFacebookページの注目度を強調したいときに、友達の顔を表示すると効果的です。

ただFacebookページの埋め込みで、表示される項目を増やすとごちゃごちゃしてしまい、見にくくなるというデメリットがあります。Facebookページの埋め込みするサイズを小さく設定した場合は、表示する項目を限定した方がいいでしょう。

いかがでしたか？

初心者でも簡単に取得できるコードで、あなたのWebサイトにもFacebookページを埋め込み貼り付けしてみましょう！