LoginSignup
2
3

More than 5 years have passed since last update.

「Page Plugin」(旧「Like Box」)を500px以上にできないかテスト【無理】

Last updated at Posted at 2015-08-04

ダメなんだろうなーとは思いつつ、諦めきれず無駄に色々あがいてみたのでメモ。
(結論:無理でした。)

ふつーに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程度?)

この記述を外してデフォルトの記述にすると、一般的なスマホのバージョンで問題なく表示された。(=いらなかった。)

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3