|
หัวข้อ: เริ่มต้น 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> ปล.ผมคิดแล้วเขียน หากไม่สมบูรณ์ก็เพิ่มเติ่มได้เลยหนะครับ หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: 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 ได้ }); หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: 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; } }); }; หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: shokarita ที่ 27 เมษายน 2012, 18:12:27 ตอนนี้เราก็เชื่อมต่อกับ facebook ได้แล้วหนะครับ
คราวหน้าจะมาสอนการ query ที่สำคัญของ facebook หนะครับ :wanwan044: หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: rnon ที่ 27 เมษายน 2012, 21:49:28 ขอบคุณมากครับ
เก็บไว้ก่อน เดี่ยวมาลอง หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: bus12236 ที่ 27 เมษายน 2012, 22:07:55 ขอบคุณมากนะครับ :wanwan017:
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: signalnco746 ที่ 27 เมษายน 2012, 22:09:23 ขอบคุณครับ เยี่ยม
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: aosto ที่ 27 เมษายน 2012, 22:11:53 อิอิ ไม่รู้ว่าเชื่อมทำมัย แต่ จะตามอ่านนะครับ
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: mahatang ที่ 27 เมษายน 2012, 22:53:10 ว่าแต่เชื่อมต่อกับอะไรอะ
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: jeking ที่ 28 เมษายน 2012, 00:24:59 สอนวิธีเอารูปโปรไฟล์มาแทรกใน รูปมั่งจิ *0*
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: shokarita ที่ 28 เมษายน 2012, 10:00:47 ว่าแต่เชื่อมต่อกับอะไรอะ เป็นการสร้าง application ของ facebook ครับหัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: 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) {ตัวอย่างนี้มีการกำหนด backgroup ด้วยต้องเปลี่ยนให้เป็นของเราหนะครับ โค๊ด: <div id="fb-root"></div> หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: บอทใหญ่ ที่ 28 เมษายน 2012, 11:03:12 ขอบคุณครับ
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: 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 ครับ หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: shokarita ที่ 28 เมษายน 2012, 11:10:02 การเขียนด้วย javascript จะประหยัดเรื่อง Process ของทาง Server หรือของทาง Host ของเราเนื่องจาก ตัวที่ทำการ query นั้นได้ดึงมาที่ เครื่อง Client หรือเครื่องของผู้ใช้ app ของเราแล้ว
รับลองว่าเร็วกว่าการ ใช้ PHP SDK แน่นอน หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: shokarita ที่ 28 เมษายน 2012, 11:12:51 ดูตัวอย่างเพิ่มเติมหรือรูปแบบที่ทำเสร็จได้เลยที่
http://facebook.ddscript.com คลิกขวา วิวโค้ด ได้เลย อยากได้ตรงไหน copy ได้ครับ เพราะเป็นของผมเอง เขียนด้วย javascript php เขียนแค่ตอนดึง รูปเท่านั้น หากเป็นประโยชน์ กด like ให้ด้วยหนะ หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: pugkung ที่ 28 เมษายน 2012, 21:55:13 ตัวนี้เป็น app ที่อยู่ฝั่งเว็บเราใช่ป่ะครับ
หรือ เป็น app ที่เอาไปไว้ใน หน้า Facebok App ได้ด้วย :wanwan017: หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: shokarita ที่ 28 เมษายน 2012, 21:56:58 ตัวนี้เป็น app ที่อยู่ฝั่งเว็บเราใช่ป่ะครับ ได้ทั้งสองอย่างขึ้นอยู่กับ host ครับหรือ เป็น app ที่เอาไปไว้ใน หน้า Facebok App ได้ด้วย :wanwan017: หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: PDATAM ที่ 29 เมษายน 2012, 11:30:49 + 1 ให้นะครับสำหรับน้ำใจอันดีงาม
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: shokarita ที่ 29 เมษายน 2012, 12:07:02 สำหรับท่านที่ยังเขียน javascript ไม่เป็นหนะครับลองอ่านดูครับ แล้วจะเข้าใจโครงสร้างหนะครับ
http://meewebfree.com/site/javascript-jquery/190-start-with-javascript-basic-javascript หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: MonkeyAstro ที่ 29 เมษายน 2012, 13:56:40 ขอบคุณครับ
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: pugkung ที่ 29 เมษายน 2012, 19:51:55 ท่านครับทำไงเวลา Login ไม่ให้มันเด้ง popup ครับ :P
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: shokarita ที่ 29 เมษายน 2012, 19:54:20 ไม่ค่อยเห็นภาพครับ ยังไงเอย
ท่านครับทำไงเวลา Login ไม่ให้มันเด้ง popup ครับ :P หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: shokarita ที่ 29 เมษายน 2012, 19:55:51 login อะไรคร้าบ
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: pugkung ที่ 29 เมษายน 2012, 20:00:23 ตอนที่เราสร้าง app เสร็จใช่ป่ะครับ
เวลาเรารันสคริป มันจะมีเด้งให้ login เข้า Facebook อ่ะครับ แต่ผมเห็นสคริปตัวอย่างท่าน ไม่ต้องมี popup มันก็ไปหน้า login facebook ได้ แต่ผมลองทำตามตัวอย่างมันบังคับให้มี popup ตลอดเลยอ่ะครับ :wanwan017: หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: 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; } หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: pugkung ที่ 29 เมษายน 2012, 21:47:48 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: หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: ichioini ที่ 30 กันยายน 2012, 18:21:23 บังคับ 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> หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: top18753 ที่ 30 กันยายน 2012, 18:27:21 :wanwan003:
บ่ะน่าสนใจมาก หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: Chokdee ที่ 30 กันยายน 2012, 19:14:25 เข้ามาเก็บความรู้ ขอบคุณครับ
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: rungchai39 ที่ 30 กันยายน 2012, 21:41:18 :wanwan017: สุดยอดเลย ขอบคุณครับ
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: nutchanon11 ที่ 30 กันยายน 2012, 22:29:35 เข้ามาเก็บความรู้ ขอบคุณครับ
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: mikeyx ที่ 10 มกราคม 2013, 10:13:10 กระทู้ดีมีประโยชน์ ขุดหน่อยละกันตอนนี้มันupdate ไปถึงไหนแล้ว
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: SoldOut ที่ 10 มกราคม 2013, 10:23:13 กระทู้แบบนี้น่าขุดครับ
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: SEO [Aoom] ที่ 10 มกราคม 2013, 16:34:19 ขอบคุณครับ
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: dekmv ที่ 11 มกราคม 2013, 21:56:59 ขอบคุณครับ ,,, กำลังหาเลยครับ
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: atzcret ที่ 11 มกราคม 2013, 22:26:18 ใช่ app บังคับกด Like หรือเปล่าคะ
เคยใช้ โดน Blog ไป 3 วัน เครียดเลย :wanwan004: หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: zapdna ที่ 11 มกราคม 2013, 23:35:51 กำลังนั่งทดลองเขียนตามเลย ขอบคุณครับผมที่ขุดขึ้นมากำลังอยากได้พอดี .. :wanwan011:
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: chlorophill ที่ 11 มกราคม 2013, 23:56:44 โอะ เก่งจัง อยากเขียนเปนบ้าง :'(
หัวข้อ: Re: เริ่มต้น facebook ด้วย facebook sdk (javascript) เริ่มหัวข้อโดย: piyapongrot ที่ 15 มกราคม 2013, 14:37:44 ขอบคุณคับ
|