การเชื่อมต่อ กับ facebook นั้นทำได้หลายแบบ ไม่ว่าจะเป็น PHP , Javascript หรือการใช้งาน api ของ facebook เอง
วันนี้ผมจะสอนการเชื่อมต่อกับ facebook ด้วย javascript นะครับ ดังนี้
1. โหลด SDK facebook ที่เป็น javascript มาที่ pages ของเราดังนี้
<script type="text/javascript">
//=====================Start Load Facebook SDK=============================
//Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
//==================================================
</script>
ปล.ผมคิดแล้วเขียน หากไม่สมบูรณ์ก็เพิ่มเติ่มได้เลยหนะครับ
2 . กำหนด Cofig ที่สำคัญต่างๆๆใน การเชื่อมไปยัง Application ของเราดังนี้ ปล ให้ต่อจาก
[ //====================================
ก่อนปิด script หนะครับ]
//============Facebook Syn and Config=================
window.fbAsyncInit = function() {
FB.init({
appId : xxxxxxxxxxxxxxxxxxx, // แอพลิเคชั่นไอดีของเราหนะครับ
channelUrl : 'url ของ app หนะครับ', // url ของ app ที่สร้างหนะครับ
status : true, // บอกให้ตรวจสอบสถานะ login นะครับ
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // ใช้งาน query ของ facebook ได้
});
3. ตรวจสอบการ สถานะ login ของ User ดังนี้ เขียนต่อจาก ข้อ 2 ได้เลย
//==================login sttus ตรวจสอบสถานะการ login =======================
var uid;
var accessToken ;
FB.getLoginStatus(function(response) {//ตรวจสอบการ login
if (response.status == 'connected') {//หากมีการเชื่อต่ออยู่
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
FB.api('/me/permissions', function (response) {//ตรวจสอบ Permission หรือ สิทธิ์ในการใช้งาน App นะครับ
var permission = ["publish_stream","read_stream","user_likes","friends_likes","user_status","friends_status","user_photos","friends_photos","user_videos","friends_videos"];// สิทธิ์ที่เราต้องการ
var completescope = true;
for (chklist in permission)
{
if(!response.data[0][permission[chklist]])
{
completescope= false;
break;
}
}
if(!completescope)
FB.login(function(response) {//หากยัง ไม่ login นะครับ ให้ เด้งไปหน้า login
accessToken = response.authResponse.accessToken;
},{scope: 'publish_stream,read_stream,user_likes,friends_likes,user_status,friends_status,user_photos,friends_photos,user_videos,friends_videos'});
FB.Canvas.setSize({ width : 600,height: 800});//กำหนดขนาดของ Canvas
});
} else if (response.status === 'not_authorized') {
top.location = pageUrl;
} else {
top.location = pageUrl;
}
});
};
ตอนนี้เราก็เชื่อมต่อกับ facebook ได้แล้วหนะครับ
คราวหน้าจะมาสอนการ query ที่สำคัญของ facebook หนะครับ :wanwan044:
ขอบคุณมากครับ
เก็บไว้ก่อน
เดี่ยวมาลอง
ขอบคุณมากนะครับ :wanwan017:
ขอบคุณครับ เยี่ยม
อิอิ ไม่รู้ว่าเชื่อมทำมัย แต่ จะตามอ่านนะครับ
ว่าแต่เชื่อมต่อกับอะไรอะ
สอนวิธีเอารูปโปรไฟล์มาแทรกใน รูปมั่งจิ *0*
อ้างถึงจาก: mahatang ใน 27 เมษายน 2012, 22:53:10
ว่าแต่เชื่อมต่อกับอะไรอะ
เป็นการสร้าง application ของ facebook ครับ
ตอนที่ 4 มาสร้าง like ก่อนการเข้าใช้ app กัน
ตอนนี้สำหรับท่านที่ต้องการให้คนอื่นกด like ก่อนการเข้าใช้งานหนะครับ ตอนนี้จะต้องเขียน jquery นิดหนึ่งหนะครับ เลยต้องโหลด jquery เข้ามาใน page เราดังนี้หนะครับ
ตรงนี้เอาไปใส่ในส่วนของ <head>ใส่ไว้ตรงนี้</head> นะครับ
<script type="text/javascript" src="โฟลเดอร์ที่ใช้ในการเก็บ jquery/jquery-1.7.1.min.js"></script>
ที่นี้ใน tag <script> ของ javascript เพิ่มฟังก์ชั่นนี้เข้าไปหนะครับ
การเขียนตรวจสอบ การกด like นั้น เป็นการเขียนตรวจสอบว่า ใน profile ของคนที่เล่นนั้นมี fanpage ของเราหรือเปล่าหนะครับดังนี้
function checkIfUserIsLike(uid,page_id) {
var fql = "SELECT page_id FROM page_fan WHERE uid=me() and page_id=" page_id; // fql เป็น query ของ facebook หนะครับ ตัวนี้ตรวจสอบว่า page_id มีอย่ใน profile ของผู้เล่นหรือไม่
var query = FB.Data.query(fql);// ทำการ query fql หนะครับ
query.wait(function(rows) {//หากมี การ return ค่ากลับมาหนะครับ
if(rows && rows[0] && rows[0].page_id) {//หากมีการส่ง page_id ของ fanpage ของเรากลับมาหนะครับ
//ใส javascript ที่ต้องการให้ทำหนะครับหรืออาจสร้างตามนี้ได้
$('#likebox').hide();
} else {
clearInterval(_likeBoxId);//เคลียร์เวลาที่เอาไว้ตรวจสอบ
_likeBoxId = setInterval(function(page_id){//เซ็ตใหม่
checkIfUserIsLike(uid,'119432241521861');//ทำการตรวจสอบใหม่หากไม่มี การ return rows ออกมา
},3000);
//ตรวจสอบ tag html ที่เราสร้างขึ้นมาว่า stylesheet display เป็น block หรือเปล่า หากไม่เป็นให้แสดง tag html ขึ้นมาผู้ใช้กด like
if($('#likebox').css('display')!='block')
{
$('#likebox').show();
}
}
});
};
ตัวอย่าง html เพื่อให้คนกด like เขียนให้อยู่ใน tag <body></body> ดังนี้
ตัวอย่างนี้มีการกำหนด backgroup ด้วยต้องเปลี่ยนให้เป็นของเราหนะครับ
<div id="fb-root"></div>
<div id="likebox" class="trans_box" style="top:0px;z-index:32;position:absolute;width:100%;display:none;background:transparent url(images/bg_white.png);">
<div id="closebtn" style="z-index:34;width:37px;height:36px;display:block;position:absolute;"></div>
<div id="likeitem" style="z-index:33;position:absolute;width:323px;display:block;background:url(images/liketostart.png) repeat scroll 0% 0% transparent;left:231px;height:250px;">
<div style="position: absolute; float: left; width: 323px; padding-left: 40px; height: 95px; padding-top: 139px;">
<fb:fan profile_id="119432241521861" stream="0" connections="0" logobar="0" width="323" height="85" style="top:-15px;"></fb:fan>
<div style="text-align:left;padding-left:70px;margin-top: -35px !important;">
<img src="images/text.jpg">
</div>
</div>
</div>
</div>
ขอบคุณครับ
ตอนที่ 5 การ Post ภาพลง facebook ส่วนมากแล้วผมจะเขียนเป็น ฟังก์ชั่น เพื่อให้เรียกใช้งานได้ง่ายๆ หนะครับ ดังนี้
//ฟังก์ชั่นในการ create album นะครับ
function createalbum(){
FB.api('/me/albums', 'post',
{
name: 'giggoxz-shop.com',//ชื่อ albums
message: 'เล่นเกมส์ทำนาย ทายนิสัย ทายอนาคต ทายนู้นนี้ได้ที facebook.ddscript.com'//รายละเอียดของ albums
},
function(response) {
posPhotoTofb(response.id)
}
);
}
function posPhotoTofb(albums){
var name = $('#namedata').val();
var messegedata = "เล่นเกมส์ "+temp+" ได้ที่ http://facebook.ddscript.com ";// messege ที่เราต้องการโชว์ข้างบนรูปหนะครับ
var images = "http://ddscript.com/facebookpic/test.jpg";//url รูปภาพของเรา
//alert(images);
FB.api('/'+albums+'/photos', 'post',
{
message: messegedata,
url : images
},
function(response) {
if (!response || response.error) {
alert('ไม่สามารถ โพสไปยัง facebook ได้ในตอนนี้ กรุณาลองใหม่ในภายหลัง');
} else {
alert('Post to Facebook เรียบร้อยแล้ว');
}
}
);
}
แค่นี้เราก็ได้ระบบ app facebook ในส่วนของการติดต่อกับ facebook แล้ว
ก็เหลือเพียงฝั่งของ app เราเองว่าต้องการ post อะไรไปยัง facebook ครับ
การเขียนด้วย javascript จะประหยัดเรื่อง Process ของทาง Server หรือของทาง Host ของเราเนื่องจาก ตัวที่ทำการ query นั้นได้ดึงมาที่ เครื่อง Client หรือเครื่องของผู้ใช้ app ของเราแล้ว
รับลองว่าเร็วกว่าการ ใช้ PHP SDK แน่นอน
ดูตัวอย่างเพิ่มเติมหรือรูปแบบที่ทำเสร็จได้เลยที่
http://facebook.ddscript.com
คลิกขวา วิวโค้ด ได้เลย อยากได้ตรงไหน copy ได้ครับ เพราะเป็นของผมเอง เขียนด้วย javascript
php เขียนแค่ตอนดึง รูปเท่านั้น หากเป็นประโยชน์ กด like ให้ด้วยหนะ
ตัวนี้เป็น app ที่อยู่ฝั่งเว็บเราใช่ป่ะครับ
หรือ เป็น app ที่เอาไปไว้ใน หน้า Facebok App ได้ด้วย :wanwan017:
อ้างถึงจาก: pugkung ใน 28 เมษายน 2012, 21:55:13
ตัวนี้เป็น app ที่อยู่ฝั่งเว็บเราใช่ป่ะครับ
หรือ เป็น app ที่เอาไปไว้ใน หน้า Facebok App ได้ด้วย :wanwan017:
ได้ทั้งสองอย่างขึ้นอยู่กับ host ครับ
+ 1 ให้นะครับสำหรับน้ำใจอันดีงาม
สำหรับท่านที่ยังเขียน javascript ไม่เป็นหนะครับลองอ่านดูครับ แล้วจะเข้าใจโครงสร้างหนะครับ
http://meewebfree.com/site/javascript-jquery/190-start-with-javascript-basic-javascript
ขอบคุณครับ
ท่านครับทำไงเวลา Login ไม่ให้มันเด้ง popup ครับ :P
ไม่ค่อยเห็นภาพครับ ยังไงเอย
อ้างถึงจาก: pugkung ใน 29 เมษายน 2012, 19:51:55
ท่านครับทำไงเวลา Login ไม่ให้มันเด้ง popup ครับ :P
login อะไรคร้าบ
ตอนที่เราสร้าง app เสร็จใช่ป่ะครับ
เวลาเรารันสคริป มันจะมีเด้งให้ login เข้า Facebook อ่ะครับ แต่ผมเห็นสคริปตัวอย่างท่าน ไม่ต้องมี popup มันก็ไปหน้า login facebook ได้ แต่ผมลองทำตามตัวอย่างมันบังคับให้มี popup ตลอดเลยอ่ะครับ :wanwan017:
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
//connect อยู่ ก็ check เรื่องการใช้งาน app ก็ได้ครับ
}else{
var pageUrl = 'https://graph.facebook.com/oauth/authorize?client_id=[app id นะครับ]&redirect_uri=[url ที่เราต้องการให้มัน redirec ไปหา]scope=publish_stream,read_stream,user_likes,friends_likes,user_status,friends_status,user_photos,friends_photos,user_videos,friends_videos';
top.location = pageUrl;
}
อ้างถึงจาก: shokarita ใน 29 เมษายน 2012, 20:10:08
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
//connect อยู่ ก็ check เรื่องการใช้งาน app ก็ได้ครับ
}else{
var pageUrl = 'https://graph.facebook.com/oauth/authorize?client_id=[app id นะครับ]&redirect_uri=[url ที่เราต้องการให้มัน redirec ไปหา]scope=publish_stream,read_stream,user_likes,friends_likes,user_status,friends_status,user_photos,friends_photos,user_videos,friends_videos';
top.location = pageUrl;
}
ขอบคุณครับ ปกติเขียนแต่ PHP เห็นว่าอันนี้เร็วกว่าเลยอยากลองหัดดู ขอบคุณอีกทีครับ :wanwan017:
บังคับ Like นี่ทำยังไงครับ ผมลองเอาไปใช้ตามนี้แล้ว มันไม่ขึ้นอะไรมาเลย
อ้างถึง<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript">
function checkIfUserIsLike(uid,page_id) {
var fql = "SELECT page_id FROM page_fan WHERE uid=me() and page_id=" page_id; // fql เป็น query ของ facebook หนะครับ ตัวนี้ตรวจสอบว่า page_id มีอย่ใน profile ของผู้เล่นหรือไม่
var query = FB.Data.query(fql);// ทำการ query fql หนะครับ
query.wait(function(rows) {//หากมี การ return ค่ากลับมาหนะครับ
if(rows && rows[0] && rows[0].page_id) {//หากมีการส่ง page_id ของ fanpage ของเรากลับมาหนะครับ
//ใส javascript ที่ต้องการให้ทำหนะครับหรืออาจสร้างตามนี้ได้
$('#likebox').hide();
} else {
clearInterval(_likeBoxId);//เคลียร์เวลาที่เอาไว้ตรวจสอบ
_likeBoxId = setInterval(function(page_id){//เซ็ตใหม่
checkIfUserIsLike(uid,'110806405666193');//ทำการตรวจสอบใหม่หากไม่มี การ return rows ออกมา
},3000);
//ตรวจสอบ tag html ที่เราสร้างขึ้นมาว่า stylesheet display เป็น block หรือเปล่า หากไม่เป็นให้แสดง tag html ขึ้นมาผู้ใช้กด like
if($('#likebox').css('display')!='block')
{
$('#likebox').show();
}
}
});
};
</script>
</head>
<body style="text-align: center; font-family: tahoma, arial;">
<br>
<div id="fb-root"></div>
<div id="likebox" class="trans_box" style="top:0px;z-index:32;position:absolute;width:100%;display:none;background:transparent url(images/bg_white.png);">
<div id="closebtn" style="z-index:34;width:37px;height:36px;display:block;position:absolute;"></div>
<div id="likeitem" style="z-index:33;position:absolute;width:323px;display:block;background:url(images/liketostart.png) repeat scroll 0% 0% transparent;left:231px;height:250px;">
<div style="position: absolute; float: left; width: 323px; padding-left: 40px; height: 95px; padding-top: 139px;">
<fb:fan profile_id="110806405666193" stream="0" connections="0" logobar="0" width="323" height="85" style="top:-15px;"></fb:fan>
<div style="text-align:left;padding-left:70px;margin-top: -35px !important;">
<img src="images/text.jpg">
</div>
</div>
</div>
</div>
<br /> <br />
</body>
</html>
:wanwan003:
บ่ะน่าสนใจมาก
เข้ามาเก็บความรู้ ขอบคุณครับ
:wanwan017: สุดยอดเลย ขอบคุณครับ
เข้ามาเก็บความรู้ ขอบคุณครับ
กระทู้ดีมีประโยชน์ ขุดหน่อยละกันตอนนี้มันupdate ไปถึงไหนแล้ว
กระทู้แบบนี้น่าขุดครับ
ขอบคุณครับ
ขอบคุณครับ ,,, กำลังหาเลยครับ
ใช่ app บังคับกด Like หรือเปล่าคะ
เคยใช้ โดน Blog ไป 3 วัน
เครียดเลย
:wanwan004:
กำลังนั่งทดลองเขียนตามเลย ขอบคุณครับผมที่ขุดขึ้นมากำลังอยากได้พอดี .. :wanwan011:
โอะ เก่งจัง อยากเขียนเปนบ้าง :'(
ขอบคุณคับ