AppPageTab

by mach3ss

HTML

<div id="fb-root"></div>

<h1>AddPageTab</h1>

<div id="container">
    <p>FacebookアプリをFacebookページのページタブに追加するアレ。</p>
    <p>cf) <a href="https://developers.facebook.com/docs/reference/dialogs/add_to_page/" target="_blank">Add Page Tab Dialog - Facebook開発者</a></p>

    <form id="add-page-tab-form">
        <table>
            <tr>
                <th>Application ID</th>
                <td>
                    <input name="appId" type="text" value="" />
                    <small>Ex) 000000000000</small>
                </td>
            </tr>
            <tr>
                <th>Application URL</th>
                <td>
                    <input name="appUrl" type="text" value="" />
                    <small>Ex) http://www.example.com/your/app/</small>
                </td>
            </tr>
            <tr>
                <th></th>
                <td>
                    <input type="submit" value="Add to pagetab" />
                </td>
            </tr>
        </table>
    </form>
</div>

CSS

body {
            font-size:81%;
            margin:0px;
            padding:0px;
        }
        h1 {
            background-color:#3B5998;
            color:#fff;
            padding:1em;
            font-size:2em;
            margin-top:0;
        }
        #container {
            margin:1em;
        }
        table {
            border-collapse:collapse;
        }
        th, td {
            padding:1em;
            border:1px solid #ddd;
            line-height:1.6em;
        }
        th {
            background-color:#eee;
        }
        input[type=text] {
            border:1px solid #999;
            font-size:1.2em;
            padding:0.3em;
            width:20em;
            box-shadow:inset 0px 0px 3px #ccc;
        }
        small {
            display:block;
            color:#999;
        }

JavaScript

(function($,FB,undefined){
    $("#add-page-tab-form").on( "submit", function( e ){
        FB.init({
            appId : $("input[name=appId]", this).val(),
            status : true,
            cookie : true
        });
        FB.ui({
            method : "pagetab",
            redirect_uri : $("input[name=appUrl]", this).val()
        });
        return false;
    });
    
})(jQuery,FB);