ワードプレスにFacebookのPage Pluginを設置したときの備忘録
ワードプレスにFacebookのPage Pluginを設置
このブログではないんですが、ワードプレスのブログにFacebookのPage 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ページにいいね！をもらうのはそんなに簡単じゃないような気がしています。