2017/08/20
Facebookの投稿を外部サイトに埋め込むことが出来るのですが、バグなのか何なのか表示されない時があります。
どうすれば表示されるのか？またどうすれば表示されないのか試してみました。
あくまで個人的な検証結果ですのであしからず。
sponsored link
Contents
Page Plugin
2015年6月にLikeBoxの廃止という無慈悲な仕様変更に伴い、Page PluginというLikeBoxの後継的機能が使えるようになっているのですが、このPage Pluginのscriptが投稿埋め込み用scriptに何らかの影響を与えているような感じです。
Page Pluginが必須？？
僕が試してみた限りでは、Page Pluginを設置していないページでは投稿が表示されませんでした。
理由は分かりませんw
投稿埋め込み用scriptの有無
しかしPage Pluginを設置していればいいってことでもないんです。
Page Pluginを設置した上で、投稿埋め込み用のコード内のscriptを省くと、投稿が表示されます。
は？ですよね。
何がどうなっているか意味不明ですが、見たままのことを言うてます。
コードそのまま
Facebookから投稿埋め込み用に取ってきたコードそのままだとこんな感じです。↓
|
1 2 3 4 5 6 7 8 9 |
<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/permalink.php?story_fbid=1820593058166839&id=1798777470348398" data-width="500"> <div class="fb-xfbml-parse-ignore"> <blockquote cite="https://www.facebook.com/permalink.php?story_fbid=1820593058166839&id=1798777470348398"> <p>test</p>Posted by <a href="https://www.facebook.com/pages/WordPress%E3%83%86%E3%83%BC%E3%83%9E-%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB/1798777470348398">WordPressテーマ マテリアル</a> on <a href="https://www.facebook.com/permalink.php?story_fbid=1820593058166839&id=1798777470348398">2015年4月11日</a> </blockquote> </div> </div> |
見やすいように改行だけ入れてます。これをそのまま貼っちゃうとただのblockquoteタグ扱いになってしまい、ちゃんと表示されません。
scriptを省いたコード
生のコードからscriptタグを取っ払ったのがこちら↓
|
1 2 3 4 5 6 7 8 9 |
<div id="fb-root"></div> <div class="fb-post" data-href="https://www.facebook.com/permalink.php?story_fbid=1820593058166839&id=1798777470348398" data-width="500"> <div class="fb-xfbml-parse-ignore"> <blockquote cite="https://www.facebook.com/permalink.php?story_fbid=1820593058166839&id=1798777470348398"> <p>test</p>Posted by <a href="https://www.facebook.com/pages/WordPress%E3%83%86%E3%83%BC%E3%83%9E-%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB/1798777470348398">WordPressテーマ マテリアル</a> on <a href="https://www.facebook.com/permalink.php?story_fbid=1820593058166839&id=1798777470348398">2015年4月11日</a> </blockquote> </div> </div> |
このコードを実際貼り付けたのがこちら↓
test
Posted by WordPressテーマ マテリアル on 2015年4月11日
投稿用scriptは一つでもあったらダメ
投稿埋め込み用コード内のscriptは、どの投稿でも共通なので、一つでもscriptコードを貼っているとアウトです。なぜかPage Pluginもろともそのページ内のFacebook関連のscriptが全部死ぬようです。
もし複数の投稿埋め込み用コードを貼り付けている場合、全てのコード内のscriptを消さないと駄目です。
この仕様は嫌がらせなんでしょうか？
投稿を表示する方法まとめ
- Page Pluginを設置する
- 投稿埋め込み用コードからscriptタグを消したものを貼り付ける
- ページ内に投稿埋め込み用のscriptが一つでもあったら、何もかも表示されない
そのうちまた仕様が変更されるかも知れませんが、今のところこんな感じでした。投稿が表示されてないぞ！っていう人は参考にしてみて下さい。
コメント
質問です。
livedoorブログのサイドバーフリーエリアに、facebookのpage pluginを貼り付けようとしているのですが上手くいきません。
コード取得までは問題なく出来るのですが、その後それぞれのコードをフリーエリアに貼り付けるだけではダメなのでしょうか？
ブログ上で確認すると、フリーエリアのスペースだけ空欄で確保されpage pluginは出てきません。
何か工程が抜けていますでしょうか？
御指南頂けますと有難いです。
by TK 2015年7月21日 2:48 AM