ページアプリ、Facebookページのタイムライン化に伴いしておきたいこと

Facebookページのタイムライン化に伴い、ページアプリの仕様も若干変わっています。ウェルカムページが使えなくなり、ページアプリの注目度も低くなったかもしれませんが、せっかくですので作り替えてみました。

facebook-runtime-page.png

ちなみに、ページアプリの編集はFacebook開発者からできます。

これ意外と分からなくなります。

75x75のロゴを作成する

今までもロゴはあったのですが、目に触れることはなかったので作っていない人も多いのかなと思います。

ですが、今回のタイムライン化に伴い、75x75サイズのロゴが表示されるようになりました。

facebook-runtime-page4.png

ロゴを設定しないと、今までの15x15サイズのアイコンが表示されるので見た目が地味です。

facebook-runtime-page1.png

「Edit」をクリックして画像をアップロードするだけです。

アイコンだと地味なので、ロゴも作った方がいいと思います。

横幅を810pxにする

今まで横幅は520pxでしたが、520pxと810pxから選べるようになっています。

520pxだと左右にスペースができて寂しいので、810pxにしました。

facebook-runtime-page1.png

方法は簡単、「アプリ → Webpark2 → 基本設定」と進んで以下にチェックするだけです。

facebook-runtime-page3.png

これで横幅が810pxになります。

後はこれに合わせて、インラインフレーム内を修正すれば画面いっぱいに表示されます。

ただ、810pxにすると右側のスペースが小さい気がするので、コンテンツは800pxくらいにして右側を余らす方が整って見えるかも。

縦のスクロールバーの再確認

以前も紹介しましたが、コンテンツが画面以上長くなるとインラインフレーム内にスクロールバーが現れます。

この問題は、</body>の直前に以下のコードを入れておくと解決します。

<script type="text/javascript"> FB.init({ appId : 'アプリのID' }); FB.Canvas.setAutoResize(); </script> <script> FB.Canvas.setSize({ width: Fluid, height: Fluid }); </script>

縦横の長さをFluidにすることで、コンテンツに合わせてくれます。

以前は、pxで指定していたのですが、こちらのほうが間違いないですかね。

アプリページへリンクさせる

このブログのFacebookページのURLはこんな感じで、現在はタイムライン化されたページに移動します。

タイムライン化前でしたら、このURLでウェルカムページとしてアプリページへ誘導することもできました。

で、アプリページのアドレスはこんな感じです。

どうしてもアプリページに来てほしい場合は、アプリページに直接リンクさせるのもひとつの手だと思います。

これは賛否両論あるかと思いますし、私自身していませんが、どうしてもアプリページに誘導したい場合はこういうのもありかなと。

できあがり

ということで、今回勉強ついでに作り替えてみました。

急いで作ったので、落ち着いたら作り変えたいです。

facebook-runtime-page6.png

ページアプリの作り方もかなり変わっているみたいですので、またの機会に紹介したいと思います。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加