ページタブに実装したFacebookアプリページのスクロールバーを消したら、遷移先のページの表示位置がおかしくなった

Facebook アプリ スクロールバー

ページタブに iframe でアプリを読み込んだときに、コンテンツの高さが収まらずにスクロールバー出てしまった時は、以下の JavaScript SDK でスクロールバーを消すことができます。

でもこれだと問題があって、、

ページ遷移後の表示位置がスクロールした位置のままなんだ、、、

スクロールバーは消せるんだけど、1つ問題があって、アプリ内(iframeの状態のまま)でページ遷移を伴う場合、ページをスクロールした後に例えばボタン等を押下して、ページ遷移した場合、スクロールした位置のまま遷移先のコンテンツが表示されてしまうので、遷移した先で「なかなか表示されないなぁ」などと思っていると、上の方にしっかりとコンテンツが表示されていたりします。

なので、ページ遷移を伴い、遷移前後のコンテンツ高さが異なる場合は以下の様な対応が必要です。

  • Facebookページで一番上までスクロールさせる。|ソーシャルメディアン|広告・PR担当者のためのソーシャルメディア情報サイト
  • FB.Canvas.scrollTo – Facebook開発者
  • FB.Canvas.scrollTo : Facebook開発者向けドキュメントの日本語訳とTips

FB.Canvas.scrollToを使って、ページが遷移する際に、強制的に表示位置を調整します。

ちなみに僕はうまく行かなかったのだけど、アンカータグの name 属性とか使ってうまく行った人もいるみたいです。スマートじゃないけど仕様変更の恐怖からは逃れられますね。

ということで、対応出来ないわけではないのだけれど、アプリページ内(iframe内)でのページ遷移というの避ける事ができるのであれば、設計時に配慮してあげるのが望ましいと思います。(JavaScript SDK がいつ使えなくなるか分からないので)

というかこうやってみると、ページタブにアプリページ内でページ遷移を伴うコンテンツを、そもそも置くのがあまり良くないのかなーという気がしました。

コメントを残す

  • コメント欄には個人情報を入力しないようにしてください。

  • 入力いただいたメールアドレスは公開されませんがサーバーに保存されます。
  • 入力いただいた情報の他に、IPアドレスを取得させていただきます。取得した IPアドレス はスパム・荒らしコメント対処ために利用され、公開することはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください