พัฒนา Facebook Open Graph API ตอนที่ 7 เรียก Feed และจำนวน Comments
พอดีมีหลายคนเรียกหาว่าจะดึง Likes และจำนวน Comments ของแต่ละ Post ออกมายังไงก็เลยเขียนตัวอย่าง Facebook Open Graph API ให้ครับอันที่จริงมันเป็น การเรียกค่า JSON ธรรมดาๆ นะครับแค่เราต้องใช้ Facebook SDK ในการเก็บ Access Token ของเราไว้กับหน้าเว็บไซต์ที่เราสร้างพ่วงไว้กับ แอพพลิเคชันบน Facebook ของเราครับ ถ้ายังไม่รู้ว่าทำยังไงให้ไปอ่านบทความเหล่านี้ให้เข้าใจ หรือทำตามไปก่อนนะครับ
- พัฒนา Open Graph API ของ Facebook ด้วย PHP ฉบับเริ่มต้น ตอนที่ 1
- พัฒนา Open Graph API ของ Facebook ด้วย PHP ฉบับเริ่มต้น ตอนที่ 2
- พัฒนา Facebook Open Graph API ตอนที่ 3 เรียกดู Place บน Mobile
- พัฒนา Facebook Open Graph API ตอนที่ 4 วัดผลด้วย Keyword ค้นหา
ถ้าหากว่าเข้าใจหรือติดตามกันมาตลอดแล้วล่ะก็ มาเริ่มกันดีกว่าครั ว่าเราจะเอาจำนวนคน และข้อความที่ Comments ออกมายังไง และเรียกจำนวน Likes ออกมายังไงหากว่ามีแอพพลิเคชันที่สร้างขึ้นแล้ว ให้เข้าไปเตรียมพร้อม และดูข้อมูลเบื้องต้นจาก Graph API explorer ที่
Graph API explorer
เลือก Connections ที่แถบด้านขวา เป็น Feed นะครับรอสักครู่ จะปรากฏหน้าจอ ให้เราเลื่อนศึกษา JSON ชุดนี้ครับ
เลือก Connection เป็น “Feed”
ได้ค่า JSON มาแล้ว
คราวนี้ลองมาพิจารณาค่าของ JSON ดูหน่อยนะครับ ว่ามันได้อะไรบ้าง เราต้อง Likes และ comments ก็ต้องไล่หาเล็กน้อย
ตัวอย่าง JSON ของ Likes
ตัวอย่าง JSON ของ Comments
คราวนี้จะเห็นว่า ลำดับของข้อมูลจะมีความซับซ้อนเล็กน้อย เพราะว่าข้อมูลจะเริ่มต้นด้วยลำดับชั้น
data->likes ซึ่งใน likes ก็จะประกอบด้วย data->likes->data->name และ data->likes->data->id เป็นข้อมูลของคนที่มา Likes เราครับ โดยจะมี data->likes-
>count เป็นจำนวนคน Likes ทั้งหมด
เช่นกันครับ ในส่วนของ Comments จะเป็นลำดับดังนี้ครับ
data->comments ซึ่งใน comments ก็จะมี data->comments->data->from->name และ data->comments->data->from->id ครับมีจำนวนรวมคนมา
comments ให้เราใน data->comments->count ครับ
หาก จะทำการเรียก JSON ผ่าน PHP ต้องมีการวน 2 ระดับ ดังตัวอย่างนี้ครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 |
<?php require 'src/facebook.php'; // Create our Application instance (replace this with your appId and secret). $facebook = new Facebook(array( 'appId' => 'APP ID', 'secret' => 'APP SECRET', )); $scope='email,publish_actions,publish_stream,user_likes,user_photos,user_relationships,user_relationship_details,read_stream'; // Get User ID $user = $facebook->getUser(); $access_token = $facebook->getAccessToken(); if ($user) { try { // Proceed knowing you have a logged in user who's authenticated. $user_profile = $facebook->api('/me'); } catch (FacebookApiException $e) { error_log($e); $user = null; } } // Login or logout url will be needed depending on current user state. if ($user) { $logoutUrl = $facebook->getLogoutUrl(); } else { $loginUrl = $facebook->getLoginUrl(array( 'scope' => $scope, )); } // This call will always work since we are fetching public data. $daydev = $facebook->api('/daydevthailand'); ?> <!DOCTYPE> <html xmlns:fb="http://ogp.me/ns/fb#"> <head> <title>Facebook Open Graph API Examples by @daydev</title> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="styles/style.css" /> <!--[if IE 6]> <script src="js/ie6-transparency.js"></script> <script>DD_belatedPNG.fix('#wrap .line, #header #header-photo');</script> <link rel="stylesheet" href="styles/ie6.css" /> <![endif]--> <!--[if IE 7]><link rel="stylesheet" href="styles/ie7.css" /><![endif]--> <!--[if IE 8]><link rel="stylesheet" href="styles/ie8.css" /><![endif]--> <!--[if IE 9]><link rel="stylesheet" href="styles/ie9.css" /><![endif]--> </head> <body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=406833949401207"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <script src="//connect.facebook.net/en_US/all.js"></script> <div id="wrap"> <div id="header"> <?php if ($user) {?> <div id="header-content"> <h2><a href="<?php echo $logoutUrl; ?>">Logout</a></h2> <h1><?=$user_profile['name'];?></h1> <h2>Profiles:</h2> <p><?=$user_profile['bio']?></p> <div id="contact-details"> <p class="contact"><span>Email: </span><?=$user_profile['email'];?></p> <p class="contact"><span>Religion: </span><?=$user_profile['religion'];?></p> <p class="contact"><span>Relation: </span><a href="http://www.facebook.com/<?=$user_profile['significant_other']['id'];?>"><?=$user_profile['significant_other']['name'];?></a></p> </div> </div> <!--end header-content--> <div id="header-photo" style="background-image:url(http://graph.facebook.com/<?=$user_profile["id"];?>/picture?type=large); background-repeat:no-repeat; width:170px; height:220px;"> </div> <!--end header-photo--> </div> <!--end header--> <?php }else{ ?> <div id="header-content"> <a href="<?php echo $loginUrl; ?>"> <img src="images/facebook-connect-button.png" style="padding-bottom:20px;"/> </a> <h1>Please Login with Facebook</h1> <h2>Your data will display</h2> <p>Powered by <a href="http://twitter.com/daydev">@daydev</a> [Banyapon Poolsawasd] and Free-Css for Website Template</p> <div id="contact-details"> <p class="contact"><span>Email: </span>daydevthaland@gmail.com</p> <p class="contact"><span>Website: </span>www.daydev.com</p> </div> </div> <!--end header-content--> <div id="header-photo" style="background-image:url(images/placeholder.png); background-repeat:no-repeat;"><img src="images/placeholder.png"/> </div> <!--end header-photo--> </div> <!--end header--> <?php } ?> <div align="center"> <script type="text/javascript"><!-- google_ad_client = "ca-pub-5951866056770179"; /* LeaderBoard */ google_ad_slot = "7899721000"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div class="line"></div> <div id="content"> <div id="experience" class="cv-section"> <h3>Experience</h3> <?php $source='https://graph.facebook.com/'.$user_profile["id"].'?fields=feed&access_token='.$access_token.'&limit=30'; $jsource=file_get_contents($source); $jsonfeed = json_decode($jsource); foreach ($jsonfeed->feed->data as $data ) { ?> <div class="cv-section-item"> <h4 class="title"><?php echo $data->from->name;?></h4> <?php if(empty($data->message)){?> <h4 class="meta"> </h4> <?php }else{?> <h4 class="meta">"<?php echo $data->message;?>"</h4> <?php }?> <img src="http://graph.facebook.com/<?php echo $data->from->id;?>/picture" style=" border:#006699 solid 5px;" align="left"/> <?php if(empty($data->picture)){}else{?> <img src="<?php echo $data->picture;?>" style="width:80px; margin-bottom:10px; border:#999999 solid 5px;" align="right"/> <?php }?> <div style="margin-left:65px; width:540px;"><p><?php echo date("d (D), M Y", strtotime($data->created_time));?></p> <?php if(empty($data->name)){?> <p>Shared some content! <a href="http://www.daydev.com" title="Social Media Marketing">Social Media Marketing</a></p> <?php }else{ ?> <p><a href="<?php echo $data->link;?>">"<?php echo $data->name;?>"</a></p> <p><?php echo $data->description;?></p> <?php }?> <?php if(empty($data->application->name)){}else{?> <?php }?> <p> <?php foreach($data->likes->data as $valike){?> <a href="http://www.facebook.com/<?php echo $valike->id;?>"><img src="http://graph.facebook.com/<?php echo $valike->id;?>/picture" style="float:left; padding-right:5px; width:24px; height:24px;"/></a> <?php }?> <?php if(empty($data->likes->count)){}else{?>Likes: ( <?php echo $data->likes->count;?> )<?php }?></p> </div> <div class="line"></div> <?php foreach($data->comments->data as $values){ ?> <div style="margin-left:65px; width:540px; padding-left:5px; background-color:#EBEBEB; border:#999999 solid 1px; margin-top:15px; vertical-align:text-top;"> <a href="http://www.facebook.com/<?php echo $values->from->id;?>"><img src="http://graph.facebook.com/<?php echo $values->from->id;?>/picture" style="margin-right:10px; margin-top:5px; border:#999999 solid 5px;" align="right"/></a> <h4>Comments by <a href="http://www.facebook.com/<?php echo $com_name=$values->from->id;?>"><?php echo $com_name=$values->from->name;?></a></h4> <p><?php echo $com_message=$values->message;?></p> </div> <?php }?> </div> <!--end cv-section-item--> <?php } ?> </div> <!--end experience--> <!--end education--> <div class="line"></div> <!--end training--> </div> <!--end content--> </div> <!--end wrap--> <div id="spacing"></div> <!--hack for ie6 and ie7--> </body> </html> |
ก็เสร็จเรียบร้อยครับ ซึ่งถ้านำไปเขียนร่วมกับ PHP และ HTML แล้วจะสามารถสร้าง Personal Website ที่ดึงข้อมูลจาก Facebook ออกมาได้เว็บหนึ่งเลยครับ ลองไป
ดูตัวอย่างที่นี่ครับ
โปรดระวัง Stream ที่ปรากฏขึ้นดึงข้อมูลทั้งหมด รวมไปถึงใน Group ที่คุณอยู่แม้จะเป็น Secret Group ก็ตาม
ตัวอย่างของเว็บไซต์ครับที่ผมทำไว้
เว็บตัวอย่าง: http://www.daydev.com/demo/opengraphlikecom/
ดึงจำนวนคน Likes ออกมาครับ
เอาคน Comments ออกมาให้ด้วย
ไปดาวน์โหลด Source Code ได้ที่นี่ครับ
หวังว่าคงได้ประโยชน์กับบทความนี้นะครับ :3
Franz Chang August 24, 2012
เชอร์
May Skyfire January 11, 2013
"หาก จะทำการเรียก JSON ผ่าน PHP ต้องมีการวน 2 ระดับ ดังตัวอย่างนี้ครับ".
ผมอยากทราบ Code ส่วนนี้อ่ะครับ เพราะCode มันไม่ขึ้นครับ พอได้มาแล้ว แล้วเราจะเอาค่าจาก JSON มาใช้ยังไงครับ ขอบคุณครับ.
Banyapon Poolsawasd January 15, 2013
เพิ่ม Code ให้แล้วนะครับ
Apichai Densamut March 24, 2013
ขอบคุณครับ