【2018年版】ワードプレスにFacebookページプラグインを設置する5ステップ

ワードプレス(wordpress)で作ったサイトに、Facebookの公開ページを埋め込むためのツール

「ページプラグイン」の使い方について解説いたします。

初心者でも5ステップで簡単に設置することができます。

Facebookページの公開ページを設置するメリット

★メリット1.サイトに訪問した人がいいね!を押してくれて、フォロワーが増える

★メリット2.フォロワーさんに、定期的に情報発信ができる

★メリット3.訪問者さんのフェイスブックでシェアしてもらえる可能性が高まる

1.Facebookページプラグインにアクセス

はじめに、Facebookページプラグインのボックスを生成するページにアクセスします。

アクセス先→【ページプラグイン

 

アクセスすると、以下のようなページが開きます。

「Facebook for developers」直訳すると「開発者向けのFacebook」

どちらかというと、一般向け、、というよりはホームページ屋さんなどのWEB屋さんなどの開発者向けのツールなんですね^^

一般公開されていて、無料でいつでも使えますので、活用していきましょう!!

 

次に、必要項目を入力していきます。

主に入力・チェックする項目だけでも8箇所ありますので、

一つずつ解説していきますね^^

① フェイスブックページ のURLを入力する

まずは、FacebookページのURLを入力します。

お持ちのFacebookページを開いた状態で、

ブラウザの上の方にURLが表示されているかと思います。

URLをコピーします。↓

コピーをしたら、①の欄にペーストしてあげてください。

正しく入力ができると、枠の中にフェイスブックの画像が表示されます。

これで①は完了です!!

これだけでも設置は可能ですが、設定をしてカスタマイズしていきましょう。

②「タブ」を入力します

次は「タブ」の欄に入力をします。

タブとは、これから生成するフェイスブックページのバナーに追加機能のようなものです。

ノーマルな状態↓

「タイムライン」「イベント」「メッセージ」の3つのタブが入れられます。

ぞれぞれ、必要な機能を英語を入力していきます。

「タイムライン」→ timeline

「イベント」→ events

「メッセージ」→ messages

3つの機能が必要な時は、「timeline , events , messages」というように、半角カンマ(,)区切りで入力するようになります。

 

タブについて、一つずつ解説していきますね。

(1)「タイムライン」タブとは、最新投稿を表示するためのコード

タイムラインは、いわゆるフェイスブックページの投稿を一緒に表示させる機能のことです。

Facebookページのタイムラインにある、最新の投稿が表示されます。

(2)「イベント」タブとは、イベントが見られる機能

イベント開催がある場合は、フェイスブックのバナーから確認ができるのと、フォローすることもできます。

以下の画像では、イベント開催予定はありませんが、、m(_ _)m

(3)「メッセージ」タブとは、フェイスブックページに直接メッセージを送信する機能

「メッセージ」タブを入力すると、設置したウェブサイトからFacebookページにメッセージを直接送信できます。

この機能を使用する場合、利用者はログインが必要となります。

③「幅」を入力します

ワードプレスに埋め込んだ時に、表示させたい幅を入力します。

埋め込みの幅は、最小180〜最大500ピクセルとなります。

④「高さ」を入力

ワードプレスにうめんこんだ時に、表示させたい高さを入力します。

高さに制限はありませんが、最小で70ピクセルとなります。

⑤「スモールヘッダーを使用」について

チェックを入れることで、より小さいヘッダーを使用します。

チェックを入れていない通常サイズと、スモールヘッダーの比較をしてみました。

半分くらいのサイズになるんですね〜。

通常サイズのヘッダー スモールヘッダー

⑥plugin containerの幅に合わせる

ワードプレスの場合は、チェックを入れます。

画面の幅が、PC、タブレット、スマホ(スマホもサイズが色々あるので、)のように見る端末で可変するような「レスポンシブデザイン」の場合に、自動的に幅を最適化してくれる機能です。

チェックボックスに「✔︎」を入れましょう。

以下は500ピクセルで生成したバナーの画像ですが、

チェックを入れておくと、幅が変わった時に最適化してくれます。

↓ 自動的に画面の幅に合わせてくれます

ワードプレスの場合は必須です!!

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

ヘッダー画像のデザインを白にしたい場合(ワードプレスのデザインに合わせたり、シンプルにしたいなどの目的で)は、カバー写真を非表示にします。

チェックを入れると、ヘッダーの背景が白になります。

通常のヘッダー カバー写真非表示ヘッダー

⑧友達の顔を表示する

フェイスブックページに「いいね!」してくれている人のプロフィール画像を表示するかどうかを選択できます。

プロフィール画像なし プロフィール画像あり

これで準備が整いました。

設定が完了しましたら、ボックスが希望通り生成されているか確認します。

OKであれば、ワードプレスに設置をしていきます。

2.コードを取得します

次に、「コードを取得」ボタンをクリックします。

3.コードの生成

ワードプレスで表示させるためには、タグコードに変換をして設定する必要があります。

「コードを取得」ボタンを押すと、次のような画面が表示されます。

何、何??と、見たことのないコードが生成されて

面食らっちゃうかもしれませんが、、これは読める必要はありません。

上下で「STEP1」「STEP3」の2つに別れています。

設置したい場所にこの2つのコードをまとめて貼っていただければOKです!

4.ワードプレスに設置!(例)サイドバーに「テキスト」ボックスを設置

ここからは設置する箇所によって作業が異なります。

今回はサイドバーに設置をしてみましょう。

ワードプレスの管理画面(ダッシュボード)の中の、「外観」>「ウィジェット」と進んでいただきます。

利用できるウィジェットの中に「テキスト」という項目がありますので、フェイスブックページを表示させたい箇所へクリックした状態で移動します。

設置した「テキスト」ボックスを開くと、「タイトル」と「本文」が入れられる枠が表示されます。

先ほど、フェイスブックページプラグインで生成したコードを入力します。

保存ボタンをクリックするのをお忘れなく。

5.最後に「確認」!

まとめ

いかがでしたでしょうか?

ワードプレスに、Facebookページを設置の方法をレクチャーさせていただきました。

集客を自動化する上で、フェイスブックページを含めたSNSとの連動は切り離すことができません。

上手に活用していきましょう。

 

★月額5400円からの、SEOサポートサービスはこちら↓

月額5400円からのSEOサポート

★SEOコンサルティングサービスはこちらから↓

コンテンツSEOマスター講座

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter で【公式】ブログSEOコンサルタントをフォローしよう!