BeginningDeveloperFacebook DeveloperKnowledgeNewbiePHPProgramming LanguageSocial Media MarketingTechnology

พัฒนา Open Graph API ของ Facebook ด้วย PHP ฉบับเริ่มต้น ตอนที่ 1

หลายคนคงต้องการที่อยากจะรู้ว่าการพัฒนาโปรแกรมบนเว็บไซต์ด้วยภาษา PHP เพื่อเชื่อมต่อกับ Open Graph API ของ Facebook นั้นยากหรือไม่

ก่อนอื่นต้องถามตัวคุณเองก่อนว่ามีทักษะในการเขียนภาษาโปรแกรม HTML พื้นฐาน, ภาษาโปรแกรม PHP และ Javascript ที่แน่นแค่ไหน ซึ่งสำหรับบทความนี้อาจจะไม่ได้ต้องการทักษะที่
สูงนัก แต่ก็ต้องการทักษะที่พอจะรู้เรื่องเหล่านี้ระดับเริ่มต้น ถึงพอใช้ หรือประมาณ 60-80% ก็พอครับ เพียงเท่านี้ก็อยู่ที่ว่าจะนำค่า Open Graph API ไปเขียนประยุกต์ใช้ยังไง ก็ไม่มีปัญหา
แล้วครับ

งตัวอย่างที่เราสามารถค้นหาได้นั้นว่ามีการเรียกดูอะไรได้บ้าง
ซึ่งตัวอย่างที่เราสามารถค้นหาได้นั้นว่ามีการเรียกดูอะไรได้บ้าง

เริ่มต้นรู้จักกับ Open Graph API ของ Facebook
ก่อนอื่นเราต้องมาทำความรู้จักกันก่อนกับ API ของ Facebook ตัวนี้ที่มีการเริ่มเปิดเผยให้เหล่านักพัฒนาแพลตฟอร์มเว็บไซต์ที่ต้องการเรียกใช้ข้อมูลทั้งหลายบนเครือข่ายสังคมออนไลน์อย่าง
Facebook หลักการของ Facebook Open Graph คือการอนุญาตให้เราใช้ข้อมูลที่มีอยู่ในระบบมาเรียกให้แสดงที่หน้าเว็บไซต์ของเรา ซึ่งจะมีการแสดงผลออกมาเป็น JSON ไฟล์ให้เขียนภาษา
PHP หรือ Javascript เข้าไปเรียกชุดข้อมูลให้มาแสดงผลในหน้าดีไซน์ของเราครับ

โครงสร้างของชุดข้อมูล Open Graph API
โครงสร้างที่จะถูกเรียกใช้จะอยู่ในรูปแบบของ JSON ครับโดยมีโครงสร้างข้อมูลที่แบ่งการเข้าถึงได้ 2 ระดับคือ เข้าถึงได้โดยทั่วไป และ เข้าถึงได้หากได้รับการอนุญาติซึ่งข้อมูลที่สามารถเข้า
ถึงได้โดยทั่วไปนั้นสามารถเรียกดูได้ตลอดเวลาด้วยวิธีการง่าย แสนง่ายโดยการเรียกผ่าน เว็บบราวเซอร์ธรรมดาที่ URL นี้ครับ https://graph.facebook.com/ID ซึ่ง “ID” ที่ว่าคือค่ารหัสของข้อมูลทั้งหลายตั้งแต่ ผู้ใช้งาน, อัลบัมภาพ, อีเวนท์กิจกรรม หน้า Fan Page และ สถานที่ครับ ตัวอย่างเช่นหากว่าผมต้องการ
ทราบว่า Profile ของผม http://www.facebook.com/banyapon นั้นมีรหัส ID ของ Facebook คืออะไรผมแค่ เปลี่ยน ID ที่ว่าแทนด้วย banyapon เหมือนรูปแบบข้างล่างครับ
http://graph.facebook.com/banyapon

โครงสร้างของชุดข้อมูล Open Graph API
โครงสร้างของชุดข้อมูล Open Graph API

ข้อมูลที่ปรากฏจะเป็นข้อมูลเหมือนภาพข้างล่าง ซึ่งจะมี ID ว่า 625532477 นั้นคือ ID Facebook ของผมครับ

ตัวอย่างชุดข้อมูลของหน้า Facebook Platform หรือ URL: https://graph.facebook.com/19292868552 นั้นจะมีโครงสร้างข้อมูลใน JSON ตามนี้ครับ

ให้ลองเข้าไปที่หน้าเว็บไซต์ ของ https://developers.facebook.com/docs/reference/api/ ว่ามีค่าอะไรบ้างก็จะเห็นตามนี้ครับ

Facebook Developers's Group
Facebook Developers’s Group

การเรียกดูข้อมูลของ Open Graph เบื้องต้น

ในบทนี้ ผมจะโฟกัสไปที่การเรียกดูข้อมูลที่ไม่ซับซ้อนและยังไม่ได้เรียกใช้ PHP SDK จากทาง Facebook เหมือนบทความก่อนหน้านี้ที่เป็นกรณีศึกษานะครับ

ขั้นตอนง่ายๆ ที่จะใช้กันวันนี้คือ PHP ในการอ่าน JSON ไฟล์ธรรมดาครับ
ซึ่งการเขียนคือ หา URL ที่เป็นของ Open Graph มาสัก 1 URL ครับแล้วทำหารเรียกค่าไป เช่นตัวอย่างของผมคือ URL ของผมเองครับ
http://graph.facebook.com/banyapon

คราวนี้ก็มาในส่วนของภาษา PHP ครับให้ลองเขียน Code ตามนี้นะครับ

ซึ่งเวลาที่เราต้องการเรียกค่าตัวแปรต่างๆ ก็สามารถนำไปแทรกลงใน HTML ได้เลยครับด้วย

ผลที่ได้ก็คือ หน้า Page จะมีการเรียกค่ามาแสดงตามนี้

ซึ่งถ้าหากอยากจะสร้างรูปภาพ Profile ของเราสามารถเรียกใช้ Tag HTML <img> ได้เลยครับผ่าน username ของเราได้เลย ตัวอย่างก็
https://graph.facebook.com/banyapon/picture
หรือจะแทรกลงใน Tag imd ของ HTML ได้ตามนี้ครับ
<img src=”https://graph.facebook.com/banyapon/picture”/>
ซึ่งถ้าต้องการภาพโปรไฟล์ภาพใหญ่หน่อยก็เสริม ตัวแปรเข้าไปเป็น
https://graph.facebook.com/banyapon/picture?type=large ก็ได้ครับ

Facebook Piture Profile
Facebook Piture Profile

เอาล่ะครับพอนึกไอเดียออกแล้วสินะครับ ตอนต่อไปเป็นการเขียน Open Graph API กับ PHP
ด้วยวิธีการร้องขอข้อมูลที่ลึกกว่าเดิมด้วยการเรียกค่าผ่าน Access Token Key ครับ

Tags

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

15 Comments

  1. ขอบคุณมากครับสำหรับบทความ ผมกำลังเริ่มหัดอยู่ครับ ได้อ่านแล้วเป็นประโยชน์มากเลยครับ.

  2. เยี่ยมเลยครับ ผมกำลังหัดทำอยู่ อยากทำแนว กด like Page ก่อน แล้วตอบคำถามชิงรางวัลอะไรประมาณนี้ครับ ไม่ทราบว่าทำยากไหม…

  3. เป็นประโยชน์มากๆเลยค่ะ ขณะนี้กำลังศึกษาเรื่องนี้อยู่เลยคะ ไม่ทราบว่าถ้าทำเป็น Page แล้วจะสามารถเก็บข้อมูล ประมาณความถี่ในการใช้และ activity log ที่เพื่อนๆ page ของเรามาใช้บน facebook page ได้ไหมเอ๋ยคะ แล้วยากมากไมคะ.

  4. ในตอนนี้ Facebook API และ Facebook SDK มีการเปลี่ยนแปลง Library เยอะพอสมควรครับ อาจจะมีบางบทความที่ Case Study และ Tutorial ที่ทำไว้ใช้งานไม่ได้ หากมีปัญหาอะไร หรือมีคำแนะนำก็สามารถเพิ่มเติมได้นะครับ.

    1. อยากสอบถามเรื่อง open graph บทที่ 7 เรื่อง Like และ Comment ค่ะ

      พอดีว่าลองโหลด Code ตัวอย่างมาลองดูเเล้ว แต่พอรันเเล้ว

      Warning: file_get_contents(https://graph.facebook.com/?fields=feed&access_token=406833949401207|adb073bf2904d49d607ffd7179171c6f&limit=30) [function.file-get-contents]: failed to open stream: No error in C:AppServwwwopengraphlikecomindex.php on line 130

      Warning: Invalid argument supplied for foreach() in C:AppServwwwopengraphlikecomindex.php on line 133

      $jsource=file_get_contents($source);

      foreach ($jsonfeed->feed->data as $data ) {

      แบบนี้ ไม่ทราบว่าพอจะรู้สาเหตุรึเปล่าคะ เห็นว่าเวปของพี่ยังใช้ไดอยุ่ ต้องแก้ Code อะไรรึเปล่าคะ

      ขอบคุณค่ะ

    2. Warning: file_get_contents(https://graph.facebook.com/?fields=feed&access_token=406833949401207|adb073bf2904d49d607ffd7179171c6f&limit=30) [function.file-get-contents]: failed to open stream: No error in C:AppServwwwopengraphlikecomindex.php on line 130
      ต้องไปเปิด openssl ก่อนครับ โดยเข้าไปที่ C:Windows แล้วหา php.ini ไล่ลงมาหา
      ;extension=php_openssl.dll เอา ; ออกนะครับจะเป็น extension=php_openssl.dll
      แล้ว stop appserv แล้ว restart นะครับแล้วก็จะใช้ได้ส่วน

      Warning: Invalid argument supplied for foreach() in C:AppServwwwopengraphlikecomindex.php on line 133

      if (is_array($jsonfeed->feed->data)) // ใส่บรรทัดนี้คุมนะครับ
      {

      foreach ($jsonfeed->feed->data as $data )
      {

      }
      }
      ลองดูนะครับ ^^ ผมก็นั่งหาตั้งนานอิอิ

Leave a Reply

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน