Facebookタブページを制作するときに気をつけていること

こんにちは！

今回は僕がFacebookのタブページを制作するときに何個か気をつけていることがあるので記事にしておこうと思います。 誰かの役に立つことを信じて。

ちなみにタブページっていうのは昔の記事で言及しているもののことを指しています。

Facebookタブページを制作しているときに気をつけていること

そこまで多くないし普通にページ制作してれば大丈夫なのですが、Facebookタブページ内では以下のことに気をつけながら制作しています。

  • widthは810px
    810pxより大きく作ってしまうと、ページにスクロールバーが出てしまうのでここは気をつけて作っておいたほうがいいです。

  • Facebook JavaScript SDKを読み込む
    Facebookタブページを作る際、Facebook JavaScript SDKが準備されているのでそれを読み込みましょう。 具体的には以下のコードになります。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="css/reset.css" type="text/css" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/rollover.js"></script>
    <script type="text/javascript" src="https://connect.facebook.net/ja_JP/all.js"></script>
    <script language="JavaScript">
    FB.init({
            appId: [アプリID],　
            status: true,
            cookie: true,
            xfbml: true
    });

    window.fbAsyncInit = function() {
        FB.Canvas.setAutoGrow();
    }
</script>
<title></title>
</head>
<body>
</body>
<div id="fb-root"></div>
<script>
    FB.Canvas.setAutoGrow({ width: 851, height: 1400 });
</script>
</body>
</html>

関連記事: