Facebookページプラグイン!3ステップの設置方法|Page Plugin

ページプラグインアイキャッチ

皆さんこんばんは!

WordPressでよく見かける、facebookのライクボックス。自分のサイトにも設置できたらいいなぁと思っていました。

最近、Wordpressのテーマをハミングバードにしたこともあり、フッターの3カラムに何か設置したいと思い、

そうだ!フェイスブックのページを埋め込もう!と、色々検索して設置してみましたw

完成図

まずはこちらをご覧ください。このページの解説でできる事です!右のフッターにFacebookページプラグインを設置することができます。

フッター完成図

実際設置してみると、やり方も簡単でしたので、誰でもできると思います!

ではやってみましょ~!

参照したサイトはこちら

Facebookページプラグイン[Page Plugin]の設置方法(ライクボックス代替)

引用元:寝ログ

寝ログさんには、検索でいつもお世話になっております。

設置方法も詳しく紹介していて、とても参考になりました。ありがとうございます。

その中で、若干変わっているところもあり、もう少し初心者がわかるように解説したいと思います!

Facebookページプラグインの説明は、寝ログさんのページで詳しく説明されていますので、今回は省略させていただきます。

Facebookページプラグインの設置に必要なもの

これからは、Wordpressありきで説明させていただきます。

その中で、設置に必要なものは、

  • 作りたいFacebookページのURL

※ 個人用FacebookのURLでは作成できません

以上です。

簡単な設置の方法の流れ

  1. Page Pluginのページへ移動
  2. FacebookページURLを入力し、微調整
  3. コードを掲載したいところにコピーする

以上が簡単な流れです。

Facebookページプラグインの設置方法を詳しく解説

1.Page Pluginのページへ移動

まず、FacebookのPage Pluginへアクセスしましょう。

Facebookページプラグイン

ページに移動すると、自動的にFacebook Page URLが入力されますので、違うページを作成するのであれば削除してください。

2.FacebookページURLを入力し、微調整

Facebook Page URL

 

Facebook-Page-URL

Facebook Page URLに作りたいFacebookページのURLを入力しEnterを。

※ FacebookページのURLはFacebookページのホーム画面のURLです

このURLを入力すれば、下の空欄にイメージが出てきます。

以下は、微調整です。

Tabs

Tabs

Tabsに入力できる項目は、

  • timeline
  • messages
  • events

の3項目です。ページプラグイン画像の下に表示されます。

Width

width

ページプラグインの幅を設定できます

幅の設定は、180px~500pxまで設定できます。

Height

height

ページプラグインの高さが設定できます。

高さは、70px以下は設定できません。

チェックボックス欄

checks
  • Use Small Header・・・小さいサイズのページプラグインが作成されます
  • Hide Cover Photo・・・カバー写真を消してくれます
  • Show Friend’s Faces・・・ページプラグイン画像の下に、いいねをしてくれた方の写真が出ます

デフォルトでは、『 Hide Cover Photo 』と『 Show Friend’s Faces 』が選択されています。

Get-code

最終的な調整が終わったら、Get Codeをクリックしましょう。

コードを掲載したいところにコピーする

Get Codeをクリックすると、コードのダイアログが表示されますので、

コピーして表示したい場所に、貼り付けます。

getcode1

 

getcode2

基本的に貼り付けるのは、2のコードだけでかまいません。

ただし、貼り付けるときは、テキスト形式で貼り付けましょう。

ウィジェット(フッターなど)に貼り付ける場合

今回、私の目的である、ウィジェットからフッターに貼り付ける場合は

1のコード+2のコードで貼り付ければ大丈夫です!

ウィジェット入力テキスト

WordPressのメニューより

外観→ウィジェット→フッター(右)を選択します。

フッター(右)のタブを開いて、ウィジェット選択一覧よりテキストを選択し

ドラッグアンドドロップで移動します。

タイトルを入力し、

下の空欄に

1のコードと2のコードを順に貼り付けましょう。

最後に保存を押して完成です!

まとめとお願い!

今回は、Facebookページプラグインの作成方法を詳しく解説してみました。

やり方さえわかれば、3ステップで簡単に設定できましたw

今まで放置していたことが不思議でしたよw

寝ログさん、ありがとうございました。

この解説が、皆様のためになればと思います。One for all!

また、phpなどをいじって画面が真っ白になってしまったときはこちらを参照してください

『 WordPressが真っ白!|カスタマイズする前に、絶対に知っておかないといけない対処法 』

そして、このページプラグイン記事が役に立った場合、

下記のFacebookページプラグインより「いいね!」と「シェア」をお願いします。

それでは最後までご覧いただき、ありがとうございました。

 

 

ページプラグインアイキャッチ


WordPressの構築相談!1回無料

WordPressの構築って色々ありすぎて初心者の方には難しいですよね。
カスタマイズしすぎてサイトのデザインが崩れたり。
もっとひどい時は、表示されなかったり。

一人で悩まず、まずは相談してください!

解決策がきっと見つかるはず!

まずはお気軽に1回無料のスカイプ相談サービスをお使いください!




 

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

訪問していただき、ありがとうございます。 はじめまして。 zeroichiです このブログでは、自分でわからないことがあったときの解決方法などを紹介しています。 サブタイトルにもありますように、 「 One for all ! 」 この記載が誰かの救いになれれば幸いです。 また、PCやWordpressの設定などでわからないことがあれば、気軽にメールやコメントください。 1人で悩むより、誰かと探せばいい方法が見つかりやすくなりますから。