ダメなんだろうなーとは思いつつ、諦めきれず無駄に色々あがいてみたのでメモ。
(結論:無理でした。)
ふつーにHTML内の横幅を変える
・data-width="500" → 500pxで表示
・data-width="100%" → 340pxで表示(※デフォルトサイズ)
・data-width="720" → 500pxで表示
↓
HTMLだけでは無理。
CSSで横幅を変える
.fb-page.fb_iframe_widget span { width: 100% !important; }
で、外枠だけは大きくできたが、肝心の中身は変化なし。
jQueryで親ページからiframe内にCSSを適用
親ページからiframe内の要素にCSSを適用させる方法: 小粋空間
http://www.koikikukan.com/archives/2015/03/03-005555.php
クロスドメイン(親ページと子ページのドメインが異なる)の場合、この方法は適用できません。
↓
ドメイン違うから無理…。
HTML5 で iframe 要素の属性として新たに追加された seamless 属性を使う
iframe 要素の seamless 属性を試してみた | WWW WATCH
http://hyper-text.org/archives/2012/05/iframe_seamless_attribute.shtml
↓
iframeのHTML触れないから無理…。
デフォルトのLike BoxとjQueryのプラグイン「fb.wall」を組み合わせ
それでも、Facebook「Like Box」をカスタマイズしたかった。 - ウェブDeBLOG | トライデントコンピュータ専門学校 Webデザイン学科ブログ | Webデザイナー
http://tridentwebdesign.blog.fc2.com/blog-entry-379.html
↓
「fb.wall」の開発終わってた。\(^o^)/
「LikeBox」のカスタマイズ方法(FBMLでCSSを追加)を流用できないか?
How To Add a Custom Facebook Like Box to Your Site(英語)
http://line25.com/tutorials/how-to-add-a-custom-facebook-like-box-to-your-site
↓
Facebook Markup Language in validem XHTML 1.1 - neue Version(ドイツ語)
http://www.ka-mediendesign.de/blog/post/facebook-markup-language-in-validem-xhtml-11-neue-version/
2010年で更新止まってるのであかんぽいが、検証してみる。
↓
動かん。
↓
Facebookの「Likebox」を自由にカスタマイズ|Webディレクター・ハラヒロシのブログ
http://www.ultra-l.net/note/2011/07/facebooklixebox.php
2013年の段階で、動いたり動かなかったりしてたらしい。
↓
PC、iOS 8.x~、Android 5.x~でうまくいったように見えたが、
iOS 7.x~、Android 4.x~で妙に小さいサイズで表示された。(ちゃんと計ってないけど目視で200px程度?)
↓
この記述を外してデフォルトの記述にすると、一般的なスマホのバージョンで問題なく表示された。(=いらなかった。)