PagePlugin
ここでは、Facebookのファンページをワードプレスブログに表示させる方法について解説します。
方法はとてもシンプルなのですが、中にはうまく表示されない人もおり、実は私もその一人でした。
この問題はちょっとした操作で解決できたのですが、知らなければ長時間原因を究明することになるので、「これは私の出番だ！」と思い、今回解説させていただきます。
Facebookのファンページをワードプレスに表示させる方法
ページプラグインにアクセスする
PagePluginトップページ
このサイトで、ワードプレスブログにFacebookページを表示させるためのコードを作成することができます。
コードの取得
次に、ページプラグインのサイト中の以下の箇所を見てください。
PagePlugin設定画面
この箇所を操作してコードを入手します。
それでは、操作方法を一つ一つ確認していきましょう。
FacebookページのURL
ここにはFacebookページのURLを入力しましょう。
タブ
ここには最初から「timeline」の文字が入力されています。
「timeline」の文字をそのままにしておけばFacebookページのタイムライン（画像の赤枠の部分）は表示され、「timeline」の文字を削除すればタイムラインは表示されなくなります。
タイムライン
幅・高さ
その名の通り、表示するFacebookページの大きさを変更できます。
ここは、自分のサイトのFacebookページを埋め込みたい箇所のサイズにより決めてください。
その他
「スモールヘッダーを使用」「カバー写真を非表示にする」「Plugin Containerの幅に合わせる」「友達の顔を表示する」については、そのままの意味なので、ここでは詳しく説明しません。
チェックを入れたり外したりしてプレビュー画像がどのように変化するのかを確認し、自分で設定してみましょう。
コードを取得
PagePluginコード取得
最後に、プレビュー画面のすぐ下にある「コードを取得」をクリックします。
すると、以下のような呪文がポップアップとして出てきます。
PagePluginコード画面
この呪文が、ワードプレスブログにFacebookページを表示させるためのコードです。
※私はウェブの知識があまり無いので、それを揶揄して面白おかしく「呪文」と書いていますが、これはコードのことを指しています。
コードをワードプレスに貼り付ける
ワードプレスの管理画面を開き、「外観→ウィジェット」の順でウィジェット操作画面を開きます。
ウィジェット操作画面
次に、左側の「利用できるウィジェット」の中から「テキスト」を見つけ、それを右側の表示したい場所にドラッグしていきます。（上の図の通り）
ここでは、コードを「フッター（右）」に貼り付けることにしますが、サイドバーに貼ってもいいですし、フッター左に貼ってもいいです。
ここはサイトデザインなので、自分でお好きにデザインしちゃってください。
ウィジェットにコードを貼り付ける
そしたら「テキスト」の隣の▲をクリックして、窓を開きましょう。（上の図の通り）
この窓の中の「内容」の部分に、さっき取得したコードを貼っていきます。
しかしここで注意点があります。
さっき取得したコードに、二種類あったのを覚えていますか？
そうです、「ステップ２」という謎の呪文と、「ステップ３」という謎の呪文の二種類です。
実は、どちらの呪文もウィジェットの「内容」に貼らなければならないのですが（ステップ２から順に貼る）、私はウェブの知識がゼロなので、ここが全然わからなくて30分くらい苦戦しちゃったんですよね。
他の解説サイトではどちらのコードも貼るってことが書いてなくて、こんなことで30分も無駄にするのは本当にもったいないのですが、かなりあたふたしました。「表示できないじゃないかよぅ！」って（笑）
ですので、私のようにウェブが初心者の皆様は、気をつけてくださいね！
これで最後にウィジェット画面の右下にある「保存」を押すことで操作は完了です。
あとは実際に自分のブログを見て、ちゃんと表示されているか確認してみてください。
コメント