Just another WordPress site
FacebookページをWebサイトでも表示するには、Facebookページで次の３つのうち１つでも制限をかけていると表示されなくなります。
Webサイトの埋め込みコードは、パソコンのGoogleカレンダーでしか設定できません。スマホアプリには埋め込みコードを生成する機能はありません。また、Webサイトに公開させるカレンダーのアクセス権限が「一般公開」でないとWebサイトに埋め込みコードを貼り付けてもGoogleカレンダーは表示されないので注意しましょう。他のWebサイトに表示させるときは「Webサイト公開用カレンダーを作成」の手順2で「カレンダー作成」をクリックした後に「設定」をクリックして「カレンダーを一般公開する」に必ずチェックを入れるようにしてください
携帯本体でみたらレスポンシブになっている。PCサイトではスマホ幅にブラウザー縮小してもダメ。
http://wpgatera.matrix.jp/post-1922/
マックス幅は500ｐｘ！
ここでdata-widthはmax値である500pxを指定しておきます。親ボックスのpagepluginの幅は100%にしておく
<div id="pageplugin"> <div class="fb-page" data-href=“xxxxxx” data-width="500px" data-height="600" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false" data-show-posts="true"> <div class="fb-xfbml-parse-ignore "><blockquote cite="http://www.facebook.com/xxxxxxxx”><a href="http://www.facebook.com/xxxxxxxx”>xxxxxxx</a></blockquote></div> </div></div>下記のコードを追加する
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<scripttype="text/javascript"> $(window).load(function () { var htmlStr = $('#pageplugin').html(); var timer = false; $(window).resize(function () { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { $('#pageplugin').html(htmlStr); window.FB.XFBML.parse(); }, 200); }); });</script> |
ウィンドウのサイズが変わるたびにwindow.FB.XFBML.parse()で再読み込みしています。$(window).resizeはウィンドウサイズ変更中は呼ばれまくるのでタイマを使って呼ばれる頻度を減らします。
window.FB.XFBML.parse();だけで良さそうですがどうやら親ボックスの幅がよまれないようなのでボックスから書き換えます。
これで完了。
横向きにした際にはみ出していたら、再読み込みしたら治る
http://okwave.jp/qa/q8974406/a24953575.html
取得しようとしてるページがfacebookページじゃなく、個人アカウントのウォールをうめこもうとしていた。 岩瀬工務店
http://unguis.cre8or.jp/web/7170
http://mbdb.jp/hacks/page-plugin.html
http://websae.net/facebook-page-plugin-20150326/
http://www.ikedahayato.com/20150401/26017828.html
https://39life.net/fbpageplugin/
age Pluginと旧プラグインの大きな違いはこんなところ。
最大幅が決まってしまい、500pxとわりと狭め。背景色は白固定で、透明にしたり自由に変えられないため「デザインに溶けこませる」ことが難しくなりました。
しかし最大幅や最小幅が決まってるとはいえレスポンシブに対応したのは嬉しいところ。data-widthで横幅を指定すると、それを最大幅として親要素に合わせて可変します。
縦幅も変わり、最小値が130pxとなり最小値になるとちょうど投稿がぴったり隠れる形に。最大値はなく縦幅の分だけ投稿の描画領域が広くなります。
旧プラグインでも縦幅は指定出来ましたが、いいねしたユーザーの領域が広くなるだけで、そのいいねしたユーザーも100人までしか表示されないので大きな値を指定すると余白が広がるだけという状態でした。
いいねしたユーザーのアイコンがいい感じにコンパクトになったのも好印象。これまではアイコンが結構大きくて変更ができませんでした。なのでアイコンを小さくしたいがために別のプラグインを使ってたりしていましたが、今度は逆にアイコンを大きくする時に別のプラグインを使うことになりそうです。
※他のfacebookページへアカウントログイン中だと、page pluginのタイムラインは表示されずログアウトするようにと該当箇所に表示されるのでログアウトすること。