シェアする

  • このエントリーをはてなブックマークに追加

Facebookページがワードプレスブログに表示されない原因と解決方法

シェアする

  • このエントリーをはてなブックマークに追加
PagePlugin

PagePlugin

ここでは、Facebookのファンページをワードプレスブログに表示させる方法について解説します。

方法はとてもシンプルなのですが、中にはうまく表示されない人もおり、実は私もその一人でした。

この問題はちょっとした操作で解決できたのですが、知らなければ長時間原因を究明することになるので、「これは私の出番だ!」と思い、今回解説させていただきます。

スポンサーリンク

Facebookのファンページをワードプレスに表示させる方法

ページプラグインにアクセスする

ページプラグイン

PagePluginトップページ

PagePluginトップページ

このサイトで、ワードプレスブログにFacebookページを表示させるためのコードを作成することができます。

コードの取得

次に、ページプラグインのサイト中の以下の箇所を見てください。

PagePlugin設定画面

PagePlugin設定画面

この箇所を操作してコードを入手します。

それでは、操作方法を一つ一つ確認していきましょう。

FacebookページのURL

ここにはFacebookページのURLを入力しましょう。

タブ

ここには最初から「timeline」の文字が入力されています。

「timeline」の文字をそのままにしておけばFacebookページのタイムライン(画像の赤枠の部分)は表示され、「timeline」の文字を削除すればタイムラインは表示されなくなります。

タイムライン

タイムライン

幅・高さ

その名の通り、表示するFacebookページの大きさを変更できます。

ここは、自分のサイトのFacebookページを埋め込みたい箇所のサイズにより決めてください。

その他

「スモールヘッダーを使用」「カバー写真を非表示にする」「Plugin Containerの幅に合わせる」「友達の顔を表示する」については、そのままの意味なので、ここでは詳しく説明しません。

チェックを入れたり外したりしてプレビュー画像がどのように変化するのかを確認し、自分で設定してみましょう。

コードを取得

PagePluginコード取得

PagePluginコード取得

最後に、プレビュー画面のすぐ下にある「コードを取得」をクリックします。

すると、以下のような呪文がポップアップとして出てきます。

PagePluginコード画面

PagePluginコード画面

この呪文が、ワードプレスブログにFacebookページを表示させるためのコードです。

※私はウェブの知識があまり無いので、それを揶揄して面白おかしく「呪文」と書いていますが、これはコードのことを指しています。

コードをワードプレスに貼り付ける

ワードプレスの管理画面を開き、「外観→ウィジェット」の順でウィジェット操作画面を開きます。

ウィジェット操作画面

ウィジェット操作画面

次に、左側の「利用できるウィジェット」の中から「テキスト」を見つけ、それを右側の表示したい場所にドラッグしていきます。(上の図の通り)

ここでは、コードを「フッター(右)」に貼り付けることにしますが、サイドバーに貼ってもいいですし、フッター左に貼ってもいいです。

ここはサイトデザインなので、自分でお好きにデザインしちゃってください。

ウィジェットにコードを貼り付ける

ウィジェットにコードを貼り付ける

そしたら「テキスト」の隣の▲をクリックして、窓を開きましょう。(上の図の通り)

この窓の中の「内容」の部分に、さっき取得したコードを貼っていきます。

しかしここで注意点があります。

さっき取得したコードに、二種類あったのを覚えていますか?

そうです、「ステップ2」という謎の呪文と、「ステップ3」という謎の呪文の二種類です。

実は、どちらの呪文もウィジェットの「内容」に貼らなければならないのですが(ステップ2から順に貼る)、私はウェブの知識がゼロなので、ここが全然わからなくて30分くらい苦戦しちゃったんですよね。

他の解説サイトではどちらのコードも貼るってことが書いてなくて、こんなことで30分も無駄にするのは本当にもったいないのですが、かなりあたふたしました。「表示できないじゃないかよぅ!」って(笑)

ですので、私のようにウェブが初心者の皆様は、気をつけてくださいね!

これで最後にウィジェット画面の右下にある「保存」を押すことで操作は完了です。

あとは実際に自分のブログを見て、ちゃんと表示されているか確認してみてください。

Facebookページ作りました!

最後にお知らせです。

「Global News Labo」のFacebookページがやっとできました!

以下リンクからアクセスできますので、もし良かったら「いいね!」してやってください。

Global News Labo Facebookページ

よろしくお願いします。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする