ブログにFacebookページプラグインで埋め込み

この記事は備忘録ですので飛ばしてください。

Twitterを埋め込むのはネットで調べてすぐにできたんですが、Facebookページの埋め込みがいくらやってもうまくいかず……。
という方もいらっしゃると思いますので備忘録も兼ねて残しておきます。

環境

・サーバー:エックスサーバー
・テーマ:STORK(ストーク)ーOPENCAGE(オープンケージ)
・ソーシャルプラグイン:FacebookページプラグインーIFrame

エラー

まずは私の大間違いから書いておきます。
『Facebookの個人ページでも埋め込めると思ってた』ところ。
どうりでコード取得画面でプレビューが表示されないわけです。

それは調べていくうちに、
『どうやら個人ページではなく、Facebookページしか埋め込めないらしい』といことがわかりました。
Facebookページは作成済みでしたのでそちらのURLをコピペ。
ここでやっと、コード取得画面にプレビューが表示されました。

『やっと苦労が実る』と思い、ワードプレスのカスタマイザーでウィジェットにコードを貼り付け、いざ確認。

『あれあれ?』
『なんも表示されんやん?』

そこからしばらく格闘の日が続くことに……。

『格闘中』

『悩み中』

『あきらめモード突入準備』

『もう、アカン、、、最後にオープンケージに問い合わせしてみよ!』

オープンケージに問い合わせ

なにをどう説明していいかもわからないスーパービジターなので、
担当者からの返事も、ありきたりな、しかもわかってることしか書かれてない。

『なに的外れな返事してきてんねん、アホちゃう?』と思いつつも、
私の質問が的外れで説明不足だったのも承知の上で責任を転嫁してました、笑。

『もうええ!2度とオープンケージには問い合わせん!』と思ってはみたものの、
やっぱりFacebookページを埋め込みたい。

またここで格闘が始まりました。

すると休日のはずのオープンケージの担当者から1通のメールがきました。

ここで担当者の名前を断りもなく書きます。
オープンケージの平田さんです。

 

親切というか、仕事熱心というか。

オープンケージの平田さんのおかげ

埋め込みができたのは平田さんのおかげです。

というのも、『私にはムリ』と思ったので、
『平田さま、この度のご尽力には感謝申し上げます。しかし私には無理そうなので今回は諦めることにします。
また何かありましたら問い合わせさせていただきます。』という感じのお礼メールを送ったんです。

すると平田さんから、「reriotyのFacebookページのURLを教えてくだされば、当方で埋め込みできるか試してみます」というメールが。

もうあきらめていた私は『はいはい、これでいいんでしょ』という投げやりな気持ちでURLを返信しました。

そして後日、またもや平田さんからのメール。

『え?まじで?埋め込めるやん』感動です。

エラーの原因は、この1行

たったこの1行のコードがあったがためエラーがでていたようです。

問題のエラーコード
allowTransparency=”true”
allowTransparency=”true”⇐この1行をウィジェットにコピペしたものから消し去ってください。
このたった1行のせいで何日も悩み、格闘し、あきらめモードになったのに。

「Facebookページが埋め込めない」と何日も格闘して、心が折れそうな方は試してみてください。
テーマの仕様などもあるかも知れませんが。

埋め込みの流れ
① Facebookページプラグインでコード取得
② IFrameに変更
③ 任意のウィジェットにペースト
④ allowTransparency=”true”を消去
これで完了。

最後のまとめ

Facebookページが無事に埋め込めたのは平田さんのご尽力のおかげです。
この度は本当にお世話になりました。
ありがとうございます。

『有料のテーマにしてよかった』と思えた瞬間のお話しでした。

ちなみに現在は埋め込んでません。

 

長くなりましたが、いつも最後まで読んでいただきありがとうございます。
ご質問、ご意見はこちらのコンタクトフォームからお願いします。
rerioty