เริ่มต้น facebook ด้วย facebook sdk (javascript)

shokarita · 27 เมษายน 2012, 17:58:24

การเชื่อมต่อ กับ 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>
ปล.ผมคิดแล้วเขียน หากไม่สมบูรณ์ก็เพิ่มเติ่มได้เลยหนะครับ

shokarita · 27 เมษายน 2012, 18:03:29

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 ได้
});

shokarita · 27 เมษายน 2012, 18:11:28

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;
       }
   });
};

shokarita · 27 เมษายน 2012, 18:12:27

ตอนนี้เราก็เชื่อมต่อกับ facebook ได้แล้วหนะครับ
คราวหน้าจะมาสอนการ query ที่สำคัญของ facebook หนะครับ

rnon · 27 เมษายน 2012, 21:49:28

ขอบคุณมากครับ
เก็บไว้ก่อน
เดี่ยวมาลอง

bus12236 · 27 เมษายน 2012, 22:07:55

ขอบคุณมากนะครับ

signalnco746 · 27 เมษายน 2012, 22:09:23

ขอบคุณครับ เยี่ยม

aosto · 27 เมษายน 2012, 22:11:53

อิอิ ไม่รู้ว่าเชื่อมทำมัย แต่ จะตามอ่านนะครับ

mahatang · 27 เมษายน 2012, 22:53:10

ว่าแต่เชื่อมต่อกับอะไรอะ

jeking · 28 เมษายน 2012, 00:24:59

สอนวิธีเอารูปโปรไฟล์มาแทรกใน รูปมั่งจิ *0*

shokarita · 28 เมษายน 2012, 10:00:47

อ้างถึงจาก: mahatang ใน 27 เมษายน 2012, 22:53:10
ว่าแต่เชื่อมต่อกับอะไรอะ

เป็นการสร้าง application ของ facebook ครับ

shokarita · 28 เมษายน 2012, 10:54:29

ตอนที่ 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>

บอทใหญ่ · 28 เมษายน 2012, 11:03:12

ขอบคุณครับ

shokarita · 28 เมษายน 2012, 11:08:12

ตอนที่ 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 ครับ

shokarita · 28 เมษายน 2012, 11:10:02

การเขียนด้วย javascript จะประหยัดเรื่อง Process ของทาง Server หรือของทาง Host ของเราเนื่องจาก ตัวที่ทำการ query นั้นได้ดึงมาที่ เครื่อง Client หรือเครื่องของผู้ใช้ app ของเราแล้ว
รับลองว่าเร็วกว่าการ ใช้ PHP SDK แน่นอน

shokarita · 28 เมษายน 2012, 11:12:51

ดูตัวอย่างเพิ่มเติมหรือรูปแบบที่ทำเสร็จได้เลยที่
http://facebook.ddscript.com

คลิกขวา วิวโค้ด ได้เลย อยากได้ตรงไหน copy ได้ครับ เพราะเป็นของผมเอง เขียนด้วย javascript
php เขียนแค่ตอนดึง รูปเท่านั้น หากเป็นประโยชน์ กด like ให้ด้วยหนะ

pugkung · 28 เมษายน 2012, 21:55:13

ตัวนี้เป็น app ที่อยู่ฝั่งเว็บเราใช่ป่ะครับ

หรือ เป็น app ที่เอาไปไว้ใน หน้า Facebok App ได้ด้วย

shokarita · 28 เมษายน 2012, 21:56:58

อ้างถึงจาก: pugkung ใน 28 เมษายน 2012, 21:55:13
ตัวนี้เป็น app ที่อยู่ฝั่งเว็บเราใช่ป่ะครับ

หรือ เป็น app ที่เอาไปไว้ใน หน้า Facebok App ได้ด้วย

ได้ทั้งสองอย่างขึ้นอยู่กับ host ครับ

PDATAM · 29 เมษายน 2012, 11:30:49

+ 1 ให้นะครับสำหรับน้ำใจอันดีงาม

shokarita · 29 เมษายน 2012, 12:07:02

สำหรับท่านที่ยังเขียน javascript ไม่เป็นหนะครับลองอ่านดูครับ แล้วจะเข้าใจโครงสร้างหนะครับ
http://meewebfree.com/site/javascript-jquery/190-start-with-javascript-basic-javascript