WordPressでFacebookページを表示するPage Plugin

ブログ運営をする際にFacebookページを取得している方も多いと思います。

Facebookページではいいねの数を集めることが重要ですが、ブログ記事にFacebookのページを表示させ、記事の読者からいいねを集めることを可能にするサービスが存在します。

その名も『Page Plugin』です。

 

今回のこの記事では、この『Page Plugin』の導入方法から設定のやり方まで、幅広く紹介していきます。

 

 

Facebookに投稿するメリットは?

facebook

そもそも記事の投稿などをFacebookにて投稿するメリットはどこにあるのでしょうか。

WordPressを用いた記事の投稿はインターネットにて検索出てるようにすることですが、インターネットには多くの記事や情報がすでに存在しており、なかなか検索しても上位表示させづらいというのが現状です。

あなたがもし記事投稿をしたとしても、その存在を知ってもらうことがほとんどの場合ありません。

 

その記事のリンクがFacebookページに投稿された場合は、友達の人やフォローされている人に存在を知ってもらうことができます。

またもしその投稿が「いいね!」や「シェア」で拡散されれば、より多くの人に記事の存在を知ってもらうことができるでしょう。

この記事の存在を知ってもらうという点が、Facebookページに投稿することのメリットとなります。

つまり、ブログをFacebookページに登録して置くことで、自分のブログ記事を多くの人に知ってもらうきっかけを作ることができるのです。

 

他にも、ブログ記事に関するFacebookページがお友達に「いいね!」されると、その「いいね!」をしてくれた友達のニュースフィードにあなたの記事のFacebookページの更新情報が表示されるようになります。

こうすることによって、あなたのブログに定期的なアクセスを集める可能性が上がります。

 

では、この記事の存在を多くの人に知ってもらうために、Facebookページのブログ表示の仕方について紹介します。

今回の記事では、Facebookが開発者のために提供するサービスの『Page Plugin』を使用します。

まず初めに導入方法から説明していきます。

 

 

ページプラグインにウェブサイトを登録する方法

まず初めにページプラグインの登録ページにアクセスしましょう。

するとこのような画面に切り替わります。

page plugin

このページにてウェブサイトの登録を行います。

 

画面をスクロールし、記入欄の箇所まで移動してください。

kinyuu

それぞれの記入項目について紹介をしていきます。

 

FacebookページのURL

ここにはページプラグインに登録したいウェブサイトのFacebookページのURLを記入します。

当サイトの場合、URLは「https://www.facebook.com/toshitsukigyo/」ですので、この項目には「https://www.facebook.com/toshitsukigyo/」と入力します。

 

タブ

この項目では、Facebookページで表示する方法を3種類のうちから選ぶことができます。

  1. 『Timeline』:Facebookページへの投稿をそのまま表示させます。
  2. 『Events』:作成されたイベントのみの表示を行います。
  3. 『Messages』:Facebookメッセージが直接送信できるように表示をします。

ブログ記事に表示をさせたい機能を選び、その機能の名前を入力欄に記入します。

当サイトの場合は、Facebookページへの投稿をそのまま表示させたかったので、「Timeline」と入力しました。

複数の表示を行いたい場合には、「Timeline,Events」のようにカンマで区切って入力してください。

 

幅・高さ

この項目では、ブログに表示させたいFacebookページの大きさを指定することができます。

横幅が180~500pxで、高さが70px~になります。

 

次からは設定する4つのチェックボックスについて紹介していきます。

 

スモールヘッダーを使用

この項目にチェックを入れると、ヘッダーの縦幅を短く表示させることができます。

 

plugin containerの幅に合わせる

こちらは自動でFacebookページの幅を合わせてくれるものです。

説明すると難しくなってしまいますが、チェックを入れたままでOKです。

 

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

カバー写真(ヘッダー写真)を表示させるかどうか設定することができます。

カバー写真があったほうが、全体としてわかりやすくなるので、チェックは外しておきましょう。

 

友達の顔を表示する

こちらは「いいね!」をしてくれた友達のアイコン画像を表示させるかどうか選ぶことができます。

たくさんの人が「いいね!」をしてくれ、その写真があったほうが信用度もアップするのでチェックを入れて置くことをオススメします。

 

 

ページプラグインのコード取得する

全ての項目を設定し、Enterキーを押すとプレビューが表示されます。preview

プレビューが作りたいものになっていた場合に、左下の「コードを取得」を選択しましょう。

 

すると以下の画像のようにコードが表示されます。

code

Step 1」のコードはサイト内のbodyタグ内で一度だけ呼び出すことでページプラグインを表示させることができます。

Step 2」のコードは、ページプラグインを表示させたい箇所に直接コピペしましょう。

当サイトではサイトのウィジェットにページプラグインを表示させるため、「Step 2」のコードを使用します。

 

ページプラグインパーツをWordPressサイトのウィジェットに表示させる方法

ウィジェットに表示させたい場合は、「Step 2」のコードをコピーしておきましょう。

 

WordPressでサイトの管理画面に移動します。

wijet

次に管理画面のダッシュボードから「外観」→「ウィジェット」を選択しましょう。

 

ウィジェットの管理画面に移動したら、ウィジェットに「カスタム HTML」を追加します。

custom

 

このカスタムHTMLをクリックすると、「タイトル」と「内容」についての空欄が表示されます。

タイトルには今回はFacebookページを表示するので「Facebook」、内容には先ほどコピーしたページプラグインのコードの「Step 2」をペーストしましょう。

set

以上が完了しましたら、保存をクリックします。

 

設定がしっかりとされていれば、このように表示されます。

pre

右側のウィジェットにFacebookページがしっかりと表示されています。

今回はFacebookページのカバー写真やプロフィール画像を設定していないため、アイコンがh良き画像のままとなっていますが、カバー写真やプロフィール画像をFacebookページの方で設定していた場合はこちらのウィジェットにも反映されます。

 

以上でFacebookページのページプラグインの導入方法から、WordPressのウィジェットに表示するまでの流れを終了します。

 

 

まとめ

今回の記事では、ブログ記事を多くの人に知ってもらうために、Facebookページをページプラグインというサービスを用いて表示させる方法について紹介しました。

いかがだったでしょうか。

 

この記事を参考にしていただき、ぜひ今後のブログ運営に役立ててくださいね。

今回の記事は以上になります。

最後まで読んでいただき、ありがとうございました。

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

wordpress3

Google XML Sitemapsの使い方・設定方法を徹底解説!

BackWPupの使い方、設定方法!バックアップはブログの生命線!

Yoast SEOはRSS Footerの完全上位互換!記事の盗作を防ぐプラグイ...

Lazy Loadでサイト、LPの表示速度改善へ!導入・設定方法を解説

Contact Form 7の使い方、設定方法を徹底解説!

超便利プラグインAddQuicktagを徹底解説!TinyMCE Advance...