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

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

この記事を書いている人 - WRITER -

『webとITをもっと身近に。』
大分県日田市で『webとIT』の専門家として活動中!
ミラサポや保証協会に登録し、webコンサルタントとして企業の相談などを行っております(全国どこでも出張可能です!まずはお気軽にお問合せ下さい)
制作では、販売促進に効果的なランディングページの制作も行っております!

宮野大樹

この記事を書いている人 - WRITER -
「webとITをもっと身近に。」 大分県日田市で『ITとweb』の専門家として活動中! ミラサポや保証協会に登録し、webコンサルタントとして企業の相談などを行っております(全国どこでも出張可能です!まずはお気軽にお問合せ下さい) 制作では、販売促進に効果的なランディングページの制作も行っております!
詳しいプロフィールはこちら

皆さんこんばんは!

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ページプラグインより「いいね!」と「シェア」をお願いします。

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

 

 

 

 
この記事を書いている人 - WRITER -
「webとITをもっと身近に。」 大分県日田市で『ITとweb』の専門家として活動中! ミラサポや保証協会に登録し、webコンサルタントとして企業の相談などを行っております(全国どこでも出張可能です!まずはお気軽にお問合せ下さい) 制作では、販売促進に効果的なランディングページの制作も行っております!
詳しいプロフィールはこちら

Daiju.techで使ってる
ワードプレステーマはこれだ!

Daiju.techでは、エレファント購入者様限定で、無料にて設定作業を行っております。

Zoomと呼ばれるオンラインビデオチャットを使いますので、全国どこでも対応できます!

まずは、お気軽にお問合せ下さい。

Copyright© Daiju.tech , 2016 All Rights Reserved.