【Facebookページ】サイトへの設置方法【WordPress連動】

こんばんは、FCめがぶーの宗岡（@pre_muneoka）です。
仕事が一段落つき久々の更新でございます。

先日、合奏魂のタクト＝テイラー役を担当して頂いた堀内隼人さん（@gekkojyourei）と七輪でサンマを食いました。あと燻製的な食材を。

いやー秋ですね。「ビール + サンマ」最高の休日でした。
そんな感じで本編！

やたら読まれているFacebookページ記事

【Facebookページ】ブログとFacebookページを連動しました【WordPress】

上記の記事なのですがかなりの方が読んでくださっていて嬉しい限りです。
それだけ皆様が設置に苦労をされているということなのでしょうか？

上記の記事ではFacebookページとは何よー的な基本的なこととサイトとの連動に関して書いています。
興味のある方はご確認ください！

サイトへの「より」具体的な設置方法

WordPressとFacebookページの連動にこのサイトでは「WordPress jetpack」のプラグインを使用しています。各SNSとの連動はもちろん、統計上の収集やタイルギャラリーの設置などが可能です。

機能の一挙紹介がされています。参考にぜひぜひ！

そんな訳で、ここからの説明はWordPress jetpackを使ってWordPressとFacebookを連動していることを前提に進めていきます。
ただし、別の方法で連動をしていても問題ない内容を記述していきます。

記事下にどうやって設置するの？

このサイトでは、記事の下にFacebookページのBOXが設置されています。
前回の記事ではこのBOXの作成方法は掲載しましたが具体的な設置方法を記述していませんでした。
記事下にFacebookページのBOXを設置する方法を記述していきます。

①BOXを作成しましょう

まずはFacebook公式サイト Like BoxでBOXを作りましょう。
サイトにアクセスする前にFacebookにログインをしておきましょう。

こんなページに飛ぶはずです。

1.Facebook Page URL→自分のFacebookページのURLを入力してください
2.Width→横幅です。px換算されますので好きな数字を入力しましょう（※後述します）
3.Height→縦幅です。px換算されますので好きな数字を入力しましょう
4.Color Scheme→light・darkの2種から選択出来ます
5.チェック項目
　Show Friends’ Faces→チェックを入れるとフォロワーのリストが追加されます
　Show Header→チェックを入れると「Facebookもチェック」というヘッダーが追加されます
　Show Posts→チェックを入れると「Facebookページの記事」が表示されます
　Show Border→チェックを入れると「枠線」がつきます

項目をいじると変化が確認できるのでその場で調整しましょう。
項目の調整が終わったら「Get Code」をクリックしてください。

上記のようなかたちでコード吐出されます。
HTML5、XFBML、IFRAME、URLから好きなモノを選択できます。
このサイトの場合は「IFRAME」によって表示がされています。
これでFacebookページの「BOX」の作成は終了です！

②記事下に表示をさせるプラグイン

先ほどゲットしたコードをsingle.phpなどに打ち込めば表示が可能です。
ただし、「よくわからん」・「管理が面倒」という理由から設置をするためのプラグインをご紹介します。

Add Post Footer

プラグインの導入方法や設置方法を解説しております！
Facebookページの設置に限らず、SNSの設置やバナーの設置も出来る便利なプラグインです。

「Ad Code Script」の部分に先ほどゲットしたコードを貼り付けましょう。
投稿記事のみ、固定ページも含むなどの設定はご自分の環境と相談して決めてください。
このサイトの場合は投稿記事だけで表示しています。

③スマホでも表示を最適化させよう！

基本的な設置方法はこれで終了！
しかし、スマホで表示をさせて見ると枠がリサイズされていない！！
めっちゃはみ出る、という方は先ほど「①BOXを作成しましょう」を見てみてください。

1.Facebook Page URL→自分のFacebookページのURLを入力してください
2.Width→横幅です。px換算されますので好きな数字を入力しましょう（※後述します）
3.Height→縦幅です。px換算されますので好きな数字を入力しましょう
4.Color Scheme→light・darkの2種から選択出来ます

2.Widthが非常に重要です。
この部分が「px」で入力されているのですが、「%」に切り替えて表示をすれば端末に影響されない表示が可能です。

□修正前

<iframe src=～略～width:500px; height:290px;" allowTransparency="true"></iframe>

□修正後

<iframe src=～略～width:100%; height:290px;" allowTransparency="true"></iframe>

こんな感じでwidthの表記方法を「%」にすればスマホもタブレットもちゃんと表示されます。
このやり方が正しくて合理的かは不明ですが…参考程度に！！

フッターやサイドバーへの設置

先ほど取得したコードを貼り付けても問題ありません。
ただし、簡単に手軽に設置をしたい方にオススメなのが「WordPress jetpack」の機能です。
jetpackを導入しているとウィジェットに「Facebook Like ボックス（jetpack）」が追加されています。
設置をしたいウィジェットエリアに設置をしましょう。

日本語で書かれているので非常にわかりやすいと思います。
上記はこのサイトの設定例です。お好きなかたちで設定をしてみてください。

今日のまとめと雑談

本日の3行まとめ
1.Facebookページの記事が人気らしい
2.Facebookページのより詳しい設置方法紹介
3.秋はさんまが旨い

先日の七輪祭では絵動-kaiDo-の梅津真琴（@makoTo_Umetsu）さんも来ていました。
いやー彼は立派なラブライバーなのですが、コンテンツ投資する人間の「凄み」を感じます。
pillowsとイエモンしか最近聞いていませんでしたがラブライブの楽曲を聞いております。
個人的にはSnow halationが好きです。
パワーにあふれた90年台j-popがどこか彷彿とさせるあの感じ…ノスタルジー。

では本日はこの辺で！！

関連記事