Follow @papepo100
    

Facebookのページプラグインの画像幅が揃わない時の対処法

ブログパーツ
0 0 2016/12/04
pageplugin1.png 2015年にライクボックスの代わりに導入されたFacebookのページプラグイン
Twitterの埋め込みタイムラインとほぼ同じ様な機能として、ブログのサイドバーに取り入れてみたものの、左図の様に画像サイズが均等でなかったり、descriptionが異常に短かったりして、イマイチきれいに表示されず困っていました。

この状態でのページプラグインの実装は以下の様にになっています。
<h3>Facebook</h3>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fmanga.review%2F&tabs=timeline&width=320&height=350 &small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=false&appId" width="320" height="350" style="border:none;overflow:hidden; scrolling="yes" frameborder="0" allowTransparency="true"></iframe>
<div style="text-align:right;font-size:small"><a href="https://www.facebook.com/manga.review/" target="_blank">View on Facebook</a></div>
pageplugin2.png画像サイズの手動調整はできる限りやらないでいるのでサイズが統一されておらず、そのせいでこのようになってしまうようです。
試しにページプラグインサイズを最大(500px)にしてみたところ、すべての画像が自動的に同じサイズで表示されることがわかりました。いろいろサイズを変えてみると私のブログでは460pxくらいにすればキレイに画像が表示されます。
しかし460pxだとサイドバーとしては広すぎ。。私のPCでは1/3以上サイドバーになってしまいます。。
pageplugin3.png iframeの横スクロールが表示されてくれればまだ良いのですが、パラメータをどう変更しても出ません。。
ちなみに以下でも横パラメータは出ません。
<h3>Facebook</h3>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fmanga.review%2F&tabs=timeline&width=466&height=650 &small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=false&appId" width="328" height="650" style="border:none;overflow:scroll; scrolling="auto" frameborder="0" allowTransparency="true"></iframe>
<div style="text-align:right;font-size:small"><a href="https://www.facebook.com/manga.review/" target="_blank">View on Facebook</a></div>
pageplugin4.pngそこでページプラグインを表示するiframeを縮小することはできないか調べてみたら、丁寧にやり方を説明してくれているページがありました。
コチラの手順にしたがってサイドバーの幅にあわせてページプラグインを縮小したところ、多少ぼやけてしまっているようには思えますが、Twitterの埋め込みタイムラインと同じような感じで表示することができました。
(descriptionを複数行で表示する方法はまだわかっていません)
iframeの縮小を実装したものは以下の通り
<h3>Facebook</h3>
<div style="width:328px;height:290px;overflow-x:hidden;border:0 solid #999">
<div style="width:328px;height:290px;overflow:hidden;">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fmanga.review%2F&tabs=timeline&width=466&height=430& small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=false&appId" width="466" height="430" style="border:none;overflow:hidden;transform:scale(0.69);-o-transform:scale(0.69);-webkit-transform:scale(0.69);-moz-ransform:scale(0.69);-ms-transform:scale(0.69);transform-origin:0 0;-o-transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;" scrolling="yes" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
<div style="text-align:right;font-size:small"><a href="https://www.facebook.com/manga.review/" target="_blank">View on Facebook</a></div>
スポンサーサイト
このエントリーをはてなブックマークに追加

コメント

非公開コメント