wordpress

一瞬!WordPressでFacebookページを埋め込み表示させる手順

wordpressでFacebookページを埋め込む手順





もしあなたが自分のブログでの集客を加速させたいのであれば、SNSをうまく活用していく必要があるでしょう。

特にFacebookは、Twitterと並んで、利用者の多いSNSの一つです。

今回はWordPressとFacebookを連携させる手段の1つとして、WordPressのブログに、Facebookページを埋め込み表示させる方法を紹介していきます。

WordPressのブログとFacebookという2つの集客ツールをうまく連携させて、集客を加速していきましょう。

 

WordPressでFacebookページを埋め込み表示させる手順

Facebookのロゴ

Facebookページを埋め込み表示させる際は、次のような手順で行っていきます。

  1. 「ページプラグイン」というページにアクセスする
  2. 貼り付け用のコードを取得する
  3. ウィジェットのテキストの部分にコードを貼り付ける

では、次の項目から詳しく見ていきましょう。

 

ページプラグインでの表示方法

ブロックの「Facebook」

まずは、ページプラグインのページにとびます。
そして、Facebookの埋め込み表示時の設定をしていきます。

ページプラグインの設定

FacebookページのURL

埋め込みたいFacebookページのURLを入力しましょう。

なお、アプリからURLをコピーしたい場合は、Facebookページを開いて、ヘッダーの右端にある「・・・その他」から「リンクをコピー」をクリックしてURLをコピーします。

タブ

次の3つの項目で、表示させたいものがあれば入力しましょう。

  • timeline…Facebookページのタイムラインにある、最新の投稿を表示させることができます。
  • events…ページのイベントのフォローやフィードの購読ができます。
  • messages…ブログからFacebookページにメッセージを送ることができます。

Facebookページを埋め込み表示する際の幅をピクセルで設定することができます。


高さ

Facebookページを埋め込み表示する際の高さをピクセルで設定することができます。

スモールヘッダーを使用

下図のように小さなヘッダーを使用することができます。

埋め込みタイムラインサンプル

plugin containerの幅に合わせる

チェックを入れると、PCやスマホなどの画面の大きさによって、埋め込み表示時のサイズを自動調整してくれます。

カバー写真を非表示にする

チェックを入れると、Facebookページで設定してあるカバー写真を非表示にさせることができます。

埋め込みタイムラインサンプル

友達の顔を表示する

チェックを入れると、「いいね!」をした友達のプロフィール写真を表示させることができます。

埋め込みタイムラインサンプル

これで、Facebookページの表示設定は終わりです。

 

コードを貼り付けて表示させる

3Dのいいね

先ほどの設定が終わったら、次はいよいよコードを取得して、WordPressに貼り付ける作業に行きます。
まずは、「コードを取得」という青いボタンをクリックしましょう。
すると2つのコードが表示されるので、これからこの2つのコードをWordPressに貼っていきます。

ページプラグインのコード

WordPressの管理画面から「外観」の「ウィジェット」を選択します。
そして、「テキストウィジェット」のほうに先ほど取得した2つのコードを貼り付けて、保存しましょう。

ウィジェットのテキスト
以上でWordPressでFacebookページが埋め込み表示されるようになりました。


おまけ:Facebookの投稿の埋め込み方法

Facebook電池

こちらは大筋の話とはそれますが、Facebookページや個人アカウントの各投稿をサイトのページに表示させる方法もまとめておきます。

  1. Facebookのアプリを起動する
  2. 埋め込みたい投稿の右上にある「・・・」をクリックし、「埋め込み」を選択する
  3. 表示された投稿の埋め込みコードをコピーして、表示させたいところに貼り付ける

作業はこれだけになります。

 

さいごに

ブログ コーヒー

是非今回紹介したことを参考にFacebookとWordPressブログをうまく活用して、ブログでの集客を加速させていきましょう。

WordPressでFacebookを埋め込み表示させる手順
  1. 「ページプラグイン」というページにアクセスする
  2. 貼り付け用のコードを取得する
  3. ウィジェットのテキストの部分にコードを貼り付ける

また、WordPressブログでのTwitterやInstagramの埋め込みについては以下の記事を参考にしてみてください。

あわせて読みたい
wordpressでTwitterを埋め込み表示させる方法
時間3分!WordPressでTwitterを埋め込み表示させる方法時間3分!WordPressでTwitterを埋め込み表示させる方法 最近だとスマホで情報収集をする際に、google検索に出てきたブ...
あわせて読みたい
Instagramの埋め込み方
Instagramの埋め込み方※写真もWordPressもこだわる人へInstagramは今最もホットなSNSといっても過言ではありません。 もしあなたがInstagramをやっているのであれば、是非あな...
にほんブログ村 ブログブログ ブログアクセスアップへ