facebook page pluginが表示されない!「外部へ埋め込む(facebookの投稿)」のコードとの同居に要注意

page pluginが表示されない

facebookページの良いねをさりげなくアピールしているブログに書かせないfacebookのパーツ「page plugin」が、下の写真のように表示できないトラブルに出会いまして、色々と原因を調べたら、facebookの投稿を外部へ埋め込むのコードを埋め込んだことが、表示できないトラブルの原因でした。

スクリーンショット 2016-01-10 0.53.21

scriptのコードが重複すると表示が止まる

下のJavaScriptコードが、page plugin と 投稿の外部埋め込み で重複していたことがトラブルの原因でした。

[code]
<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_KS/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, ‘script’, ‘facebook-jssdk’));</script>
[/code]

JavaScriptコードの部分を削除

外部への埋め込みコードからJavaScriptコードの部分を削除し、下の部分から始まるように調整したことで、トラブルは解決しました。

[code]
<div class="fb-post" data-href="https://www.facebook.com/…..
[/code]

参考リンク

こちらの情報が解決のキッカケとなりました。感謝です。

http://wp-material.net/facebook-post/

page pluginの設置方法

page pluginのパーツを設置する方法はこちらです。

http://study314.jp/archives/719


この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

広告

あわせて読みたい

記事のタイトルとURL をコピーする!

広告

新着記事

著者プロフィール

ものくろ(大東 信仁)

ブロガー/Web&Blogコーチ/親指シフト orzレイアウト開発者/ものくろキャンプ運営。のべ1,000名のブログサポートに携わる。WordPressが得意。

Facebookを使うノウハウ公開中

農家・フリーランス・経営者向け SNS使いこなしセミナー (2018年1月版)の内容を全文公開中!

無料 メルマガ発行中

運営しているものくろキャンプの講座・イベント開催情報や、ちょっと役立つ情報をお届けしています。

ほぼ毎日発行しています。

Web・Blogコーチのご依頼はこちら

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。

  • Webを活用して本気でビジネス・人生を切り開きたい方
  • Webのテクニカルな改善でお悩みの方
  • アイディアはあるのに、記事の文章にするのがうまくいかない方
  • 親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みも見つけます。

ダイレクトにアドバイス。そして、ご自身の問題解決力を手にしていただく時間を。このブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

ものくろキャンプ Web・Blogコーチ セッション

お申し込みはこちらのお問い合わせフォームからお願いします。

お申し込みはこちらのお問い合わせフォームからお願いします。

ものくろキャンプ イベント案内

ものくろキャンプの開催スケジュールはこちら

広告