Facebookの埋め込みタグが正常動作しない

blockquoteタグが問題ではないような気がします。
デベロッパーツールからconsoleとnetworkを見ると、2つエラーがあることがわかります。
sdkにエラーが発生しているためうまく表示されないのではないかと思うんですが、その理由としてはてブのSNSボタンのエラーともうひとつ、何がどこへリクエストしているのかまではわかりませんが
http://satoko-kimura.com/blog?action=rc-ajax&page=1&_=1459053284000
このアドレスにも何かしら出ています。

Error: invalid version specified sdk.js:43:189
Error: WebGL: getParameter: parameter: invalid enum value <enum 0x9246>

後者のアドレスが何なのかがわからないんですけれども、ひとまずはてブのSNSボタンを停止した時にどうなるかを見たほうが良いかと思いますのでカスタマイザーからはてブを停止してみて下さい。←どうなるかの確認

何も変わらない場合は、他に原因がありますが順番に調べていく必要があるので、やったけど変わらない旨のレスを貰えるとまた見に行けます。

あと、WP-OGP by http://www.millerswebsite.co.uk Version: 1.0.5を挿入しているプラグインかと思いますがこれは停止して下さい。simplicityではogpを入れる設定がカスタマイザーの設定でありますので必要ありません。逆にWP-OGPを入れておきたい場合はカスタマイザーの設定の方を解除して下さい。
ogpは重複してあると問題が発生する場合があるようです。←今回の質問と関係するかどうかは不明

どのようなプラグインを利用されているかわかりませんが、プラグインを全て停止して、1つずつ有効にし問題がどこで発生するかを調べたほうが良さそうです。

また質問のリンクにある2つのページで正しく表示されてる方にあって正しく表示されていないページにはないものは何か無いかをチェックしてみて下さい。

まったく関係ありませんが、仕切りというか区切りで入れてあるバラの画像でstyleに
display:block;とmargin: 0 auto;を追加するとセンターに自動で寄ります。
これは記事編集で入れられているのかと思うんですが、こういう場合は、

サンプル: セパレート画像のセンター寄せ | jsFiddle

このようにします。ブロックの中のimgとして子テーマcssにスタイルするか(修正案A)、imgタグにclassを追加するか(修正案B)です。
どちらのスタイルも親の#testに対してセンターに揃います。これは画像をblock要素にして(本来imgタグはインライン要素)、marginにて0 autoを設定します。0が上下マージン、autoが左右マージンです。

ご丁寧に返信いただきましてありがとうございます。
ひとつずつ試してみたいと思います。
後ほどご報告させていただきます。
素晴らしいテーマ、本当に感謝です。

取り急ぎ、はてブボタンとWP-OGPプラグインを停止しましたが、状況は変わりません。
他のプラグインをひとつずつ試すのは今晩またやってみますが、現段階でのご報告でした。

原因は
http://stackoverflow.com/questions/24019877/fb-init-function-gives-wrong-version-error
これみたいです。

つまり、facebookの初期化スクリプトがオープンする前にタグがあるみたいな感じでしょうか。
僕はfacebookを利用していないので調べて欲しいのですが、記事の中に毎回

<script type="text/javascript">// <![CDATA[
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
// ]]></script>

こんな感じのスクリプトを入れられてますよね？
これはヘッダに一つで良いということはないですか？またpタグで囲まれてますが、正しい埋め込みコードはどういったものでしょうか？
div class=”fb-post”から始まるいわゆる出力部分だけを記事仲に入れれば動作はしないですか？

Simplicityにも同じようなスクリプトがfooter最後に入っています。これと競合しているということはないでしょうか？
そこで、試して欲しいのは、新しい記事を作成してdiv class=”fb-post”から始まる上記スクリプトの部分がないものを投稿した場合どうなるかを確認してみて下さい。

また正しく表示されているページもあるということからタグの閉じ忘れがないかも確認してみて下さい。

やってみました！
おっしゃるとおり、該当のタグ（前半部分）を埋め込みタグから削除してみました。
1つめの埋め込みからも削除しましたが、問題なく全てのFacebook投稿が表示されました。
（正しく表示されているページに使っている埋め込みタグは1年以上前に生成したもので、そのときはこの前半分はない状態で生成されていました。）
アドバイスありがとうございました！

とりあえず一安心ではあるのですが、これは毎回この削除をやるしか方法はないという感じでしょうか？
Facebok埋め込みは簡単に記事が作れるのでまあまあの頻度で使う技なので、何か方法があれば嬉しいです。
図々しいお願いで申し訳ありません。お手すきの時間があればよろしくお願いいたします。

あとバラ画像のアドバイスありがとうございます。あれは確か以前のテーマだと画像を入れると自動で影がつくのがデフォルトで、むちゃくちゃなタグを入れてなんとか回避した記憶があります。
自分でもなにを書いたのかさっぱりです。ｗ
これを機に直したいと思います。
お世話になりました。

僕的には、
> またpタグで囲まれてますが、正しい埋め込みコードはどういったものでしょうか？
これが気になっています。

[div id=fb-root class=fb_reset][/div]
 [p][script][/script][/p] // ←ここのpタグ
[div class=fb-post]...[/div]

※文字化け対策で半角〈〉を[]、各クォートを省略して書いています。

scriptタグをpタグで囲むような事はないと思うんですよね。

スクリプトの動作的にはtwitterと同じで、classなりidを探してそこを変換し内容を読み込むというようなことをしているんだろうと思います。今は変わってしまったようで元のタグがわかりませんが、何かしらアドレスが入っているタグがあったと思うのでそれを読み込んでいるんだと思うんですよ。

ただ動作がかなり重いのも気になってます。
もしかすると直接全ての投稿のリンクを取得しないでも表示できたりする便利なfacebook埋め込み用のプラグインとかがあったりするのではないかなぁと思いますが、なんせ自分がfacebookを利用してないので、何が正解で何が問題かはイマイチわかりません。

ここらは実際にfacebookを利用されている方、何か情報を持ってられる方の待つより無いかと思います。

表示も問題ないようなら、はてブも有効にしても良いかと思います。SNSのボタンタイプを高速タイプを選ばれるのが良いかと思います。画像のセンタリングも #38097 を参考に。

あと、pタグの件についてビジュアルエディタではなく、テキストで編集して、facebookからのリンクを直接全部入れるというのも方法なのかも知れません。

テキストで編集なら自動でpタグが入ることはないと思うんですよ。わかりませんけど(笑)

おしゃるとおり、Pタグが入ってしまったのはテキストエディタでコピペしたあとに、ビジュアルエディタでちょっと右にずらしたりということをやって入ったものと思われます。
タグ書きは超苦手なので、なるべくビジュアルエディタを使ってしまってます・・。

生成されたままの状態の埋め込みタグは以下のようなものです。
文字化けしないか心配ですが・・
————–
<div id=”fb-root”></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = “//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.3″; fjs.parentNode.insertBefore(js, fjs);}(document, ‘script’, ‘facebook-jssdk’));</script><div class=”fb-post” data-href=”https://www.facebook.com/photo.php?fbid=953991874683833&set=a.237961626286865.55972.100002190895602&type=3&#8243; data-width=”500″><div class=”fb-xfbml-parse-ignore”>

<p>毎月同じポーズで撮るシリーズ。2016年1月分。1/5現在で93.8cm・14.1kg。4月からは4.9cm、1.1kg増加。この数字だけ見るとスリムになっているはずなのに、最近むっちりしっかりしてきた気がする。筋肉質になったのかな？…</p>木村 聡子さんの投稿 2016年1月31日

</div></div>

ああっ、そのままタグが働いてしまったorz
以下にテキストで置いておきます。↓
http://www.evernote.com/l/ACJSjsBBGG5LLYOrnHXKCPOMS8imQ0zNA-U/

ちなみに新たな問題なのですが、Facebook動画埋め込みも引用のようになってしまっていて、上の例を参考に前半分を削除してみたりしたのですが、そっちはうまくいかないのです。
お時間あればそれもご教授いただければありがたいです。
動画埋め込みタグも上記URLに置いておきます。

動画に関しては、Facebookに投稿した動画をwordpressに載せる方法を見る限りiframeで普通に載せられるっぽいですけど、これは現在できないんですかね？

facebookの動画をwebサイトに埋め込む方法 | FM575 このサイトの方はSimplicityを利用されていますが、ここに書かれている感じだと特別何かしないといけないようなことはないですね。

ただ、1. Include the JavaScript SDK on your page once, ideally right after the openingtag.
とあります。once、つまりひとつだけ入れれば良いということです。動画の方も埋め込みの方もどちらも同じスクリプトなので1つだけあれば良いということですが、

サンプル: 動作はしませんがこうじゃなかろうかという書き方のサンプル

こういうことではなかろうかと思うんですが、どうでしょうか？

またSimplicityではイイねだったか、名前はよくわかりませんが何かしらfacebookのウィジェットのために、同様のスクリプトがfooterの後の方に入っています。
これがあったら要らないような気がしないでもないんですが、bodyタグのどこかにスクリプトを入れろとある記述も気になります。

ここらはfacebookを実際に利用されている方でないと何とも言えない部分ではなかろうかと思うので、ひとまず利用してない僕が答えられるのはこんな感じだけです。

と・・・とりあえず全部目を通しましたが、いろいろ敷居が高かったので、iframeで埋め込みはできました！
Facebookへの元投稿そのものを写真と同様に埋め込めれば、元投稿に飛ぶ機能なども使えて良いっちゃ良いのですが、そんなにFacebook動画を埋め込む機会も多くないと思うので、iframeでやろうかなと思います。
本当にいろいろありがとうございました！
あ、バラ画像直しました♪

さっそくfunctions.phpを上書きして、今まで通りの感じでやってみたら、思った通りに表示されました！！！
すごく難しかったけど薄ぼんやりとですがタグを読んで勉強させていただきました。
4年ぶりにテーマ変更して、テーマだけでこんなに色々なことができるようになってるんだとビックリしました。
これで更新頻度もあがりそうです。
本当にありがとうございました。
これからもずっとお世話になります！

> あ、バラ画像直しました♪

imgにclassはありましたが、該当部分のcssが無いんじゃなかろうかと思うんですけれども？
imgタグにクラスを追加する場合は、子テーマstyle.cssに、

.separate_img {
  display: block;
  margin: 0 auto;
}

を追加します。既にされているようであれば、こちらのキャッシュの問題かと思うので問題ないかと思います。

バラ画像の件、ありがとうございます。
style.cssに追加しました！

それと、何度も申し訳ないのですがもう一つ質問させてください。

Simplicityにテーマを変えてから、Amazonのサイトで生成されるアフィリエイトタグを1記事の中に多数埋め込んでいるページが、読み込みが間に合わないのか商品名が表示されずにAmazonトップへのリンクに置き換わってしまうという現象が頻発するようになりました。

実際のページです。↓
http://satoko-kimura.com/blog/2015/04/07/baby_goods3/

ロリポップが遅いせいか元々表示がかなり重いのですが、Amazonリンクに関してはこのようなことは前のテーマではほとんど起きていなかったと思います。
対策ありましたら教えていただけると嬉しいです。
(今さらですが、現在導入しているのはSimplicity 2.1 安定版です)

これが良いというわけではありませんが、例えばAmazon JSみたいなプラグインを利用されるのが良いかと思います。

見栄えもそうですが、色々な場合に備えて対応がしてあるプラグインもあります。
結局httpリクエストが多すぎて対応しきれないのが原因だと思うので、facebookからの読み込みをできるだけ無くすようにするか、amazonの広告を減らす方向が良いかと思います。

wordpressに投稿すればfacebookに反映させるという方法もあるはずです。そっちのが比較的良いのではないかと思います。

やはりプラグインですか・・・。
現在すでに投稿されてる記事は書き直すしかないという感じになりますかね。
ありがとうございます！

Simplicity導入してからはカエレバを使うことにしてカスタマイズもしてたのですが、過去記事の分が一括でなんとかならないかな～と思ってたのです・・・
ちまちまと書き直してカエレバに置き換えて行くことにします！

あと、全然関係ない質問よろしいでしょうか。

スマホから閲覧したときにPCサイト表示に切り替えることってできるのでしょうか？
WPTouchはそれができて、意外に使うこともあったので可能ならばそのような設定にしたいなと思っています。
カスタマイザー見てもその設定が見つけられなかったので、もしあれば教えてください。

動的にview portを変えればイケると思います。実機では試してないですが、chromeのデベロッパーツールでは動作しました。

サンプル: viewportを動的に変更する | codepen

codepen上では、ボタンのスタイルは変わりますが見た目には変わりません。それはcodepenにviewportが設定されていないからです。
スクリプトを子テーマjavascript.jsにコピーして、cssは任意に変更可能ですが、codepenではscssで書いてあるのでcss欄のview compiledボタンからcssに変更したものを、子テーマstyle.cssに貼り付けます。

動作の仕様としては、画面幅が780px以下の時に、パンくずリスト(#breadcrumb)の前にボタンを挿入します。ボタンを押すとheadのmetaにあるview portの内容がPC view(width=1280)とwidth=devith-widthに切り替わります。

#breadcrumbの手前に入れてますが、これはどこでも入れられます。view portの内容自体はoriginalとpcViewの内容を変えればそれぞれに対応できます。

画面幅780px以下としたのは、場合によってはもう少し大きくする必要があるかも知れません。iPad縦向きを基準にしましたけれども、iPhone6plusの横幅まで対応したほうが良いのかも知れません。逆にipad横向きまで対応してしまうとPCの時にボタンが表示されることになってしまいます。
それはそれで色々と確かめられるかも知れませんが、おそらくは小さい画面からPCの時にどうなのかを確かめたいというのが希望かと思いますので、こういった内容になってます。
ここらは何とでもなるので、具体的な仕様が欲しいところです。

また、$(“.changeViewPort”).on(“click”, function(){のclickの部分も、PCでは操作しないので、touchendでやったほうが高速に動作するかと思いますが、別に動かないわけでもないのでまぁ良いかと思ったりしました。
またclassで指定していますがidに変更して.changeViewPortを#changeViewPortにしたほうが高速に動作します。体感できないほどかとは思いますけれども。より高速化したい場合はidで。スクリプトを変更すればおのずとcssもクラスからIDに変更する必要があります。

ちなみに、別件で。最初の質問と内容が変わる時は別のトピックを立ててもらう方が良いかと思います。流れで関係することを続けて問い合わせたい時は別ですが、別の内容になった場合は、その内容を必要とする方が他にいるかも知れません。その時に、全く違う内容の最初の質問があるとすぐに目的のものが見つけられないからです。
トピックが縦に長くなるとかと言う側面もありますが、基本的にサックリと質問の答えを見つけられるようにするためです。

容量はたかがテキストなので大した量にはなりませんし、サーバー容量がやばいと言うことになればそれはそれでわいひらさんが何とかしてくれるだろうと期待を込めて安心しても良いかと思います。

別質問は別トピックへの件、次回から気をつけます！
ひとりでいくつも立てたら図々しいかなと思ってしまいました。
今回は今さらなので、ここで続けさせてください。

＞わいひらさん
スマホで閲覧したときに、当然スマホに適応化した表示がデフォルトじゃないと困るわけですが、HidekichiさんのおっしゃるようにPCサイトで見たときのようなサイドバーが右側にある表示に切り替えたい場面がたまにあります。
どこかにこの切り替えボタンをスマホ表示のときに出すような設定がすでにあるけど見つけられないのかも、と思って気楽に質問してしまいました。

Hidekichiさんが書いてくださったコード、落ち着いて試してみたいと思います。