Webノートデス

ワードプレスにFacebookのPage Pluginを設置したときの備忘録

      2015/09/02

ワードプレスにFacebookのPage Pluginを設置

このブログではないんですが、ワードプレスのブログにFacebookPage Pluginを設置したのでそのときのことを備忘録として書いておきたいと思います。

ワードプレスとFacebookページの連携を試みているんですが、アクセスアップにつながるかどうかはわかりません。長い目で様子を見たいけどとりあえずPage Pluginを設置しておいたというお話。

まず今回ワードプレスにFacebookのPage Pluginを設置するにあたり、参考にさせていただいたサイトはコチラ↓

 

早速ワードプレスへのFacebookのPage Plugin設置を説明していきたいと思います。

Page Pluginのコードを取得する

まずはPage Pluginページにアクセスします。

⇒https://developers.facebook.com/docs/plugins/page-plugin

こんなページですね。設定の項目が参考サイトのキャプチャと違ったので、わかる限りで説明しておきます。

赤枠で囲ったところが設定箇所ですね。画像はデフォルトのものです。一つずつ説明します。

コードの設定

Facebook Page URL

その名の通り、FacebookページのURLを記入します。

Tabs

デフォルトで「timeline」と入っていますが、他にどんな設定ができるのかはわかりません。空欄にするとタイムラインの表示が消えます。

Width

Page Pluginの幅の設定ですね。書いてある通り150~500pxの間で設定できます。

Height

Page Pluginの高さの設定です。最低が70pxです。

Use Small Header

ここにチェックを入れるとヘッダーが小さくなります。

Hide Cover Photo

ここにチェックを入れるとカバー写真が非表示になります。

Adapt to plugin container width

ここにチェックを入れると幅を自動で調整してくれるようです。

Show Friend’s Faces

ここにチェックを入れるといいね!してくれた人の画像が表示されます。

以上の項目が設定になりますが、プレビューを見ながら設定できるので特に問題は無いと思います。私は今回以下の画像のように設定しました。

いいね!した友達がいないのは寂しいですが・・・「Get Code」をクリックしてコードを取得します。

上の画像ようにコードが表示されます。1のコードはワードプレスの<body></body>タグの中に、2のコードは表示したい場所に設置するそうです。早速やってみましょう。

Page Pluginコードのワードプレスへの設置

Page Pluginコードのワードプレスへの設置ですが、テーマによって編集場所が違ってくると思います。

私が今回Page Pluginを設置したブログのテーマは、「無料のワードプレステーマ”STINGER5″を選んだ理由」でも紹介したTCDのChill(tcd016)というテーマです。

とりあえずこのテーマに設置した方法を説明します。

1のコードはワードプレスダッシュボードの「外観」→「テーマオプション」から「その他の広告」のタブを開き、ヘッダーに表示する広告のスペースに挿入しました。

広告のスペースですが、このテーマの場合はここで問題ありません。他のテーマの場合でもheader.phpの<body>タグの下か、footer.phpの</body>タグの上に挿入すればOKでしょう。

2のコードは同じくテーマオプションの、広告ウィジェット2のタブの中に挿入しました。これはウィジェットでサイドバーに配置しました。

以上で今回のFacebookのPage Plugin設置作業は完了です。

まとめ

今回のワードプレスにFacebookのPage Pluginを設置する作業は、私がやった方法を備忘録として書いただけなので、テーマが違ったり設置場所を記事下にしたかったりする場合には参考になりづらいかもしれませんね。

検索すればいろんな情報がありますので、自分がやりたい方法を調べて頂くと幸いです。

実際の設置は結構簡単にいったのでどうということは無いんですが、Facebookページにいいね!をもらうのはそんなに簡単じゃないような気がしています。

 

 - SNS, WordPress

ad

ad

Message

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

  関連記事

ワードプレスの記事をツイッターにランダム投稿したくてやったこと

ワードプレスの記事をツイッターに投稿すればちょっとアクセスが増えるんじゃね?なん …

ヘディングタグに背景をつけたくて苦悩した俺の一日

Chill (tcd016)というワードプレステーマを使って完全趣味で運営してい …

FasebookページのURLを変更する方法

Fasebookは数年前にアカウントを作成してましたが、今までまったく使うことは …

ロリポップでWordPressログイン画面へのアクセス制限

ロリポップにインストールしていたワードプレスにログインしたら、いきなりこんなペー …

無料のワードプレステーマ”STINGER5″を選んだ理由

STINGERを選んだ理由、それは… なんて大げさな理由は何もなくて、いろいろな …

さくらサーバーにワードプレスをクイックインストールしてみた

さくらサーバーでワードプレスをクイックインストール さくらサーバーのクイックイン …

コアサーバーにワードプレスをインストールするのが簡単になった

コアサーバーにワードプレスをインストール コアサーバーのPHPのセーフモードが解 …

WordPressインストール後、最初に設定したプラグイン

WordPressをインストールしてまず考えるのは、最初に何のプラグインを使えば …

ワードプレスでサムネイル付きリンクを表示するのにやったこと

前記事の「ブログ開始でなぜかGIMPを使い始めたことについてのお話」にサムネイル …

All In One WP Security & Firewallでワードプレスのセキュリティ強化

このブログも立ち上げて数ヶ月が経過、まだ記事数も少ないですがポツポツとコメントが …