ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingเริ่มต้น facebook ด้วย facebook sdk (javascript)
« หน้าที่แล้ว ต่อไป »
หน้า: [1] 2   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: เริ่มต้น facebook ด้วย facebook sdk (javascript)  (อ่าน 6426 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
shokarita
สมุนแก๊งเสียว
*

พลังน้ำใจ: 49
ออฟไลน์ ออฟไลน์

กระทู้: 996



ดูรายละเอียด เว็บไซต์
« เมื่อ: 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>
ปล.ผมคิดแล้วเขียน หากไม่สมบูรณ์ก็เพิ่มเติ่มได้เลยหนะครับ
บันทึกการเข้า
รับเพิ่มไลค์แฟนเพจ ฟรีโฮสติงค์ VPS เริ่มต้นที่ 550 บาท
shokarita
สมุนแก๊งเสียว
*

พลังน้ำใจ: 49
ออฟไลน์ ออฟไลน์

กระทู้: 996



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 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 ได้
  });
บันทึกการเข้า
รับเพิ่มไลค์แฟนเพจ ฟรีโฮสติงค์ VPS เริ่มต้นที่ 550 บาท
shokarita
สมุนแก๊งเสียว
*

พลังน้ำใจ: 49
ออฟไลน์ ออฟไลน์

กระทู้: 996



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 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;      
       }
   });
};
บันทึกการเข้า
รับเพิ่มไลค์แฟนเพจ ฟรีโฮสติงค์ VPS เริ่มต้นที่ 550 บาท
shokarita
สมุนแก๊งเสียว
*

พลังน้ำใจ: 49
ออฟไลน์ ออฟไลน์

กระทู้: 996



ดูรายละเอียด เว็บไซต์
« ตอบ #3 เมื่อ: 27 เมษายน 2012, 18:12:27 »
ตอนนี้เราก็เชื่อมต่อกับ facebook ได้แล้วหนะครับ
คราวหน้าจะมาสอนการ query ที่สำคัญของ facebook หนะครับ  wanwan044
« แก้ไขครั้งสุดท้าย: 27 เมษายน 2012, 18:14:53 โดย shokarita » บันทึกการเข้า
รับเพิ่มไลค์แฟนเพจ ฟรีโฮสติงค์ VPS เริ่มต้นที่ 550 บาท
rnon
ก๊วนเสียว
*

พลังน้ำใจ: 23
ออฟไลน์ ออฟไลน์

กระทู้: 257



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 27 เมษายน 2012, 21:49:28 »
ขอบคุณมากครับ
เก็บไว้ก่อน
เดี่ยวมาลอง
บันทึกการเข้า

█ SketchUp
█ IINON
█ SketchUP , Layout
bus12236
ก๊วนเสียว
*

พลังน้ำใจ: 41
ออฟไลน์ ออฟไลน์

กระทู้: 293



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 27 เมษายน 2012, 22:07:55 »
ขอบคุณมากนะครับ  wanwan017
บันทึกการเข้า
GTAOnline E-Cardsell Cookie Run
hostgator Coupon CODE: THAI2011Host < Update 2016 ใช้ได้ !
signalnco746
คนรักเสียว
*

พลังน้ำใจ: 5
ออฟไลน์ ออฟไลน์

กระทู้: 150



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 27 เมษายน 2012, 22:09:23 »
ขอบคุณครับ เยี่ยม
บันทึกการเข้า
aosto
ก๊วนเสียว
*

พลังน้ำใจ: 20
ออฟไลน์ ออฟไลน์

กระทู้: 321



ดูรายละเอียด เว็บไซต์
« ตอบ #7 เมื่อ: 27 เมษายน 2012, 22:11:53 »
อิอิ ไม่รู้ว่าเชื่อมทำมัย แต่ จะตามอ่านนะครับ
บันทึกการเข้า
ช้อนทองเหลืองการบินไทย
ขายของสะสม
ขายเครื่องทำไข่ม้วน
ช้อนการบินไทย
mahatang
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 47
ออฟไลน์ ออฟไลน์

กระทู้: 2,117



ดูรายละเอียด เว็บไซต์
« ตอบ #8 เมื่อ: 27 เมษายน 2012, 22:53:10 »
ว่าแต่เชื่อมต่อกับอะไรอะ
บันทึกการเข้า
เมเร่ย์ เมอร์เร่ High life travel MEREÊ
Fuel Factor X Meree
jeking
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 48
ออฟไลน์ ออฟไลน์

กระทู้: 1,869



ดูรายละเอียด
« ตอบ #9 เมื่อ: 28 เมษายน 2012, 00:24:59 »
สอนวิธีเอารูปโปรไฟล์มาแทรกใน รูปมั่งจิ *0*
บันทึกการเข้า
หมี่โคราช
ผัดหมี่โคราช
shokarita
สมุนแก๊งเสียว
*

พลังน้ำใจ: 49
ออฟไลน์ ออฟไลน์

กระทู้: 996



ดูรายละเอียด เว็บไซต์
« ตอบ #10 เมื่อ: 28 เมษายน 2012, 10:00:47 »
อ้างจาก: mahatang ที่ 27 เมษายน 2012, 22:53:10
ว่าแต่เชื่อมต่อกับอะไรอะ
เป็นการสร้าง application ของ facebook ครับ
บันทึกการเข้า
รับเพิ่มไลค์แฟนเพจ ฟรีโฮสติงค์ VPS เริ่มต้นที่ 550 บาท
shokarita
สมุนแก๊งเสียว
*

พลังน้ำใจ: 49
ออฟไลน์ ออฟไลน์

กระทู้: 996



ดูรายละเอียด เว็บไซต์
« ตอบ #11 เมื่อ: 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, 10:55:05 โดย shokarita » บันทึกการเข้า
รับเพิ่มไลค์แฟนเพจ ฟรีโฮสติงค์ VPS เริ่มต้นที่ 550 บาท
บอทใหญ่
Newbie
*

พลังน้ำใจ: 2
ออฟไลน์ ออฟไลน์

กระทู้: 13



ดูรายละเอียด เว็บไซต์
« ตอบ #12 เมื่อ: 28 เมษายน 2012, 11:03:12 »
ขอบคุณครับ
บันทึกการเข้า
shokarita
สมุนแก๊งเสียว
*

พลังน้ำใจ: 49
ออฟไลน์ ออฟไลน์

กระทู้: 996



ดูรายละเอียด เว็บไซต์
« ตอบ #13 เมื่อ: 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 ครับ
บันทึกการเข้า
รับเพิ่มไลค์แฟนเพจ ฟรีโฮสติงค์ VPS เริ่มต้นที่ 550 บาท
shokarita
สมุนแก๊งเสียว
*

พลังน้ำใจ: 49
ออฟไลน์ ออฟไลน์

กระทู้: 996



ดูรายละเอียด เว็บไซต์
« ตอบ #14 เมื่อ: 28 เมษายน 2012, 11:10:02 »
การเขียนด้วย javascript จะประหยัดเรื่อง Process ของทาง Server หรือของทาง Host ของเราเนื่องจาก ตัวที่ทำการ query นั้นได้ดึงมาที่ เครื่อง Client หรือเครื่องของผู้ใช้ app ของเราแล้ว
รับลองว่าเร็วกว่าการ ใช้ PHP SDK แน่นอน
บันทึกการเข้า
รับเพิ่มไลค์แฟนเพจ ฟรีโฮสติงค์ VPS เริ่มต้นที่ 550 บาท
shokarita
สมุนแก๊งเสียว
*

พลังน้ำใจ: 49
ออฟไลน์ ออฟไลน์

กระทู้: 996



ดูรายละเอียด เว็บไซต์
« ตอบ #15 เมื่อ: 28 เมษายน 2012, 11:12:51 »
ดูตัวอย่างเพิ่มเติมหรือรูปแบบที่ทำเสร็จได้เลยที่
http://facebook.ddscript.com

คลิกขวา วิวโค้ด ได้เลย อยากได้ตรงไหน copy ได้ครับ เพราะเป็นของผมเอง เขียนด้วย javascript
php เขียนแค่ตอนดึง รูปเท่านั้น หากเป็นประโยชน์ กด like ให้ด้วยหนะ
« แก้ไขครั้งสุดท้าย: 28 เมษายน 2012, 11:15:19 โดย shokarita » บันทึกการเข้า
รับเพิ่มไลค์แฟนเพจ ฟรีโฮสติงค์ VPS เริ่มต้นที่ 550 บาท
pugkung
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 196
ออฟไลน์ ออฟไลน์

กระทู้: 2,681



ดูรายละเอียด เว็บไซต์
« ตอบ #16 เมื่อ: 28 เมษายน 2012, 21:55:13 »
ตัวนี้เป็น app ที่อยู่ฝั่งเว็บเราใช่ป่ะครับ

หรือ เป็น app ที่เอาไปไว้ใน หน้า Facebok App ได้ด้วย  wanwan017
บันทึกการเข้า
shokarita
สมุนแก๊งเสียว
*

พลังน้ำใจ: 49
ออฟไลน์ ออฟไลน์

กระทู้: 996



ดูรายละเอียด เว็บไซต์
« ตอบ #17 เมื่อ: 28 เมษายน 2012, 21:56:58 »
อ้างจาก: pugkung ที่ 28 เมษายน 2012, 21:55:13
ตัวนี้เป็น app ที่อยู่ฝั่งเว็บเราใช่ป่ะครับ

หรือ เป็น app ที่เอาไปไว้ใน หน้า Facebok App ได้ด้วย  wanwan017
ได้ทั้งสองอย่างขึ้นอยู่กับ host ครับ
บันทึกการเข้า
รับเพิ่มไลค์แฟนเพจ ฟรีโฮสติงค์ VPS เริ่มต้นที่ 550 บาท
PDATAM
สมุนแก๊งเสียว
*

พลังน้ำใจ: 109
ออฟไลน์ ออฟไลน์

กระทู้: 676



ดูรายละเอียด
« ตอบ #18 เมื่อ: 29 เมษายน 2012, 11:30:49 »
+ 1 ให้นะครับสำหรับน้ำใจอันดีงาม
บันทึกการเข้า
shokarita
สมุนแก๊งเสียว
*

พลังน้ำใจ: 49
ออฟไลน์ ออฟไลน์

กระทู้: 996



ดูรายละเอียด เว็บไซต์
« ตอบ #19 เมื่อ: 29 เมษายน 2012, 12:07:02 »
สำหรับท่านที่ยังเขียน javascript ไม่เป็นหนะครับลองอ่านดูครับ แล้วจะเข้าใจโครงสร้างหนะครับ
http://meewebfree.com/site/jav...th-javascript-basic-javascript
บันทึกการเข้า
รับเพิ่มไลค์แฟนเพจ ฟรีโฮสติงค์ VPS เริ่มต้นที่ 550 บาท
หน้า: [1] 2   ขึ้นบน
พิมพ์
« หน้าที่แล้ว ต่อไป »
กระโดดไป: