Fbpagestarter is front-end starter kit that makes it easy to create a page tab on Facebook, created and maintained by Tachun Lin
https://www.facebook.com/PageStartKit/app_263301367106483
- Loading and initialization Facebook's JS SDK
- Facebook login (permissions)
- Dialogs (add page tab, Feed, OAuth, Requests, Send)
- Canvas Methods (setSize, setAutoGrow, scrollTo)
- 810px Grid system
<script src="PATH/TO/jquery.fbpagestarter.min.js"></script>
$(function(){
$(document).fbStarter({
appId : 'YOUR APP ID',
pageId : 'YOUR PAGE ID',
canvasUrl : '//YOUR_CANVAS_URL'
});
});
$(function(){
$(document).fbStarter({
appId : 'YOUR APP ID',
pageId : 'YOUR PAGE ID',
locales : 'fr_FR', //Your locale, default is en_US
canvasUrl : '//YOUR_CANVAS_URL', //ex: '//blabla.com/'
dialogSuccess : function(){
//Custome callback function for dialog submit success
console.log('dialog success');
},
dialogFail : function(){
//Custome callback function when user close dialog without submit
console.log('dialog canceled');
},
permissionsSuccess : function(){
//Custome callback function for authentication success
FB.api('/me', function(response) {
//Fetch user data
var userName = response.name,
userID = response.id,
userBirthday = response.birthday,
userLocale = response.locale,
userEmail = response.email,
userLink = response.link,
userPicture =
'<img src="https://graph.facebook.com/'+response.username+'/picture">',
userData = userName + userID + userBirthday + userLocale + userEmail
+ userLink + userPicture;
console.log(userData);
});
}
});
});
<link rel="stylesheet" type="text/css" href="PATH/TO/810pxGrid.css">
<div id="application" class="page-container"></div>
// Basic 2 column layout
<div id="application" class="page-container"></div>
<div class="row">
<div class="col6"></div>
<div class="col6"></div>
</div>
</div>
// Basic 3 column layout
<div id="application" class="page-container"></div>
<div class="row">
<div class="col4"></div>
<div class="col4"></div>
<div class="col4"></div>
</div>
</div>
// Nested column layout
<div id="application" class="page-container"></div>
<div class="row">
<div class="col6">
<div class="col6"></div>
<div class="col6"></div>
</div>
<div class="col6">
<div class="col6"></div>
<div class="col6"></div>
</div>
</div>
</div>
Chrome, Firefox 3.5+, Safari 4+, IE7+, Opera 9+
MIT license: https://www.opensource.org/licenses/mit-license.php