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

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

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

75x75のロゴを作成する

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

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

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

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

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

横幅を810pxにする

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

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

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

これで横幅が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でウェルカムページとしてアプリページへ誘導することもできました。

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

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

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

できあがり

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

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

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