質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Facebook

Facebookは、実名登録制のSNS(ソーシャル・ネットワーキング・サービス)です。開発者用のデベロッパーサイトが存在し、一般ユーザーによるFacebook向けアプリケーション開発が可能です。

ウィジェット

ウィジェットとはユーザインタフェイスの要素(GUI widget)であるか、もしくは、独立した比較的サイズの小さいソフトウェアアプリケーション(desktop widget)のことを指します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

3937閲覧

【Facebook】Page Pluginについて

e_green_field

総合スコア6

Facebook

Facebookは、実名登録制のSNS(ソーシャル・ネットワーキング・サービス)です。開発者用のデベロッパーサイトが存在し、一般ユーザーによるFacebook向けアプリケーション開発が可能です。

ウィジェット

ウィジェットとはユーザインタフェイスの要素(GUI widget)であるか、もしくは、独立した比較的サイズの小さいソフトウェアアプリケーション(desktop widget)のことを指します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2015/04/15 10:45

2015年の4月にFacebookさんの仕様が変更になり、
LikeBoxがpage pluginに変更になったかと思います。

スマートフォンサイトにPage Pluginの埋め込みを行い、
縦横切り替えたときに可変となるようCSSで下記のような設定をしました。

.fb_iframe_widget, .fb_iframe_widget span,
.fb_iframe_widget span iframe[style]{
width: 100% !important;
}

どうやら、Page PluginではCSSを変更しても可変にはならず、
コード生成時のwidth(またはdata-width="xxx")に固定化されてしまうようです。
MAX500pxまでのようなので500を指定してみましたが、ページ読み込み時に
その幅で固定されてしまうため、横から縦の状態にするとはみ出てしまいます。

なんとか、可変にしたいのですがこれって可能なんですかね?

ちなみに、JSでアクセスして変更を試みてみましたがうまくいきませんでした。。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

No Dynamic Resizing

The Page plugin works with responsive, fluid and static layouts. You can use media queries or other methods to set the width of the parent element, yet:

The plugin will determine its width on page load
It will not react changes to the box model after page load.
If you want to adjust the plugin's width on window resize, you manually need to rerender the plugin.

Page Plugin - Facebook Developers

とあるので、リサイズの度に再描画させる処理を書く必要がありそうです
対応として、ウィンドウのリサイズがある度にページプラグインのセットアップコードを挿入・初期化するという方法があるようです

lang

1<div id="pageContainer"> 2 <div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="500" data-height="250" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div> 3</div> 4 5$( window ).resize(function() { 6 var container_width = $('#pageContainer').width(); 7 $('#pageContainer').html('<div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="' + container_width + '" data-height="250" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>'); 8 FB.XFBML.parse(); 9});

javascript - Facebook Page Plugin - rerender / change width dynamically (Responsive / RWD) - Stack Overflow

以上、簡単に調べてみましたが、何か参考になれば幸いです

投稿2015/07/04 15:18

gouf

総合スコア2321

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問