Langsung ke tutorial :
Source Codenya Sich ternyata Mank Simple..
Source Code real Dari Facade
0 . Bikin Apps di gedebook..
http://www.facebook.com/developers
1. Buka/Bikin Hosting.
2. Bikin File Apps.html,php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://apps.in.th/facade/jquery-placeholder.js"></script>
<script src="http://apps.in.th/facade/emoji.js"></script>
<style>
body{
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size: 11px;
}
#mid{
margin-bottom:15px;
}
#badge{
height:50px;
padding:15px 15px 15px 5px;
}
#badge #name{
font-weight:bold;
}
#profile_pic {
float:left;
width:50px;
height:50px;
margin-right:5px;
}
#emoji_pane{
float:left;
width:400px;
height:300px;
margin-left:15px;
}
#main{
float:left;
width:500px;
}
#main textarea{
width:100%;
}
#emoji{
display:none;
overflow:scroll;
height:300px;
width:100%;
}
#preview_pane{
background:#c3c3c3;
border-radius:5px;
padding:5px;
}
#preview{
background:#f0f0f0;
min-height:50px;
border: 2px #ccc solid;
padding:5px;
}
#footer{
background:#eee;
border-radius:5px;
padding:15px;
clear:both;
margin-top:15px;
}
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-239852-8']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<fb:login-button autologoutlink="true" perms="read_stream,publish_stream"></fb:login-button>
<div id="fb-root"></div>
<div id="mid">
<div id="badge">
<img id="profile_pic" style=""/>
<span id="name"></span>
<div id="status"></div>
</div>
<div id="update_pane" style="display:none;">
<div id="main">
<div id="status_message"></div>
<p><textarea id="message" name="message" placeholder="What is on your mind?" onchange="update_preview()" onkeyup="update_preview()"></textarea>
</p>
<p><input type="button" onclick="postUpdate()" value="Share" /> <a href="#" id="toggler">Toggle Emoji</a></p>
You can insert an emoji to your status by clicking on the emoji on the right.
<div id="preview_pane">
<h3>Preview:</h3>
<p id="preview"></p>
</div>
</div>
<div id="emoji_pane">
<div id="emoji"></div>
</div>
</div>
</div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: ' ID Apps Lu ', status: true, cookie: true,
xfbml: true});
FB.Event.subscribe('auth.logout', function(response) {window.location.reload();});
FB.Event.subscribe('auth.login', function(response) {window.login_completed();});
window.login_completed();
$("#toggler").click(function (e){$("#emoji").slideToggle()});
var t = "";
$.each(emoji, function(k, e){
var template = "<img src=\""+e.img_url+"\" alt=\""+k+"\" onclick=\"add_text('"+k+"')\" width=\"15\" height=\"15\"/> ";
t += template;
})
$("#emoji").html(t);
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
window.login_completed = function(e){
FB.getLoginStatus(function(response) {
if (response.session) {
// Show user's badge
FB.api("/me", function(e){
window.FBProfile = e;
$("#name").text(window.FBProfile.name);
$("#profile_pic").attr('src', 'http://graph.facebook.com/'+window.FBProfile.id+'/picture?type=square');
window.updateStatus();
$("#update_pane").show();
});
}
});
}
window.updateStatus = function(){
FB.api('/me/statuses', function(response)
{
if (response.data){
$("#status").text(response.data[0].message);
}
});
}
window.update_preview = function(e){
var ttp = $('#message').val();
var pattern = /\:fe[0-9a-f]{3}\:/gi;
var result = ttp.replace(/[<]/g, '<');
result = result.replace(/[>]/g, ">");
result = result.replace(/\n/g, "<br />");
var matches = ttp.match(pattern);
for(var i=0;matches && i<matches.length;i++){
var match = matches[i];
if (!emoji[match]) continue;
var src = emoji[match].img_url;
result = result.replace(match, '<img src="'+src+'" width="15" height="15" />');
}
$("#preview").html(result);
};
window.postUpdate = function(e){
var ttp = $('#message').val();
var pattern = /\:fe[0-9a-f]{3}\:/gi;
var result = ttp;
var matches = ttp.match(pattern);
for(var i=0;matches && i<matches.length;i++){
var match = matches[i];
if (!emoji[match]) continue;
var code = (emoji[match].code);
result = result.replace(match, code);
}
//$("#preview").append(result);
//alert(result);
//alert(ttp);
FB.api(
'/me/feed',
'post',
{ message: result},
function (response) {
window.updateStatus();
$('#message').val('');
$("#status_message").text("Status updated.").effect("highlight", {}, 3000);
}
);
}
window.add_text = function (t){
$('#message').val($('#message').val() + t);
window.update_preview();
}
</script>
</body>
</html>
3. Edit html pada bagian :
ID Apps dengan UID Apps yg sudah dibuat ..
4. Masukan URL Apps.html,php di bagian Menu setting Apps.
Call back Pada terhubung <-- untuk FB Connect Website Facade
And bisa juga dengan Canvas callback <-- untuk url Apps Setting I-frame
Source : facade
Tidak ada komentar:
Posting Komentar