Integrating WordPress With Web APIs

7,330 views

Published on

An application programming interface (API) is a way for two different pieces of software to communicate with each other. In your WordPress plugins and themes, you’ll often want to pull data from or send data to a third-party service that has an API. In this talk, Randy will explain the terminology you need to know to get started, share best practices and techniques for integrating with APIs, and walk through two real-world examples. You’ll leave with code snippets to help you get started integrating.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,330
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
60
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Integrating WordPress With Web APIs

  1. 1. Integrating WordPressWith Web APIsRandy Hoyt
  2. 2. About Me Randy Hoyt randyhoyt.com @randyhoyt Presentation randyhoyt.com/wcmia#wcmia @randyhoyt
  3. 3. Overview • APIs: Defined • Two Examples: 1. Get Treehouse Badges 2. Get ShopLocket Products • WordPress Functions#wcmia @randyhoyt
  4. 4. API
  5. 5. Application Programming Interface
  6. 6. A point where two systems, subjects, organizations, etc., meet and interact.Interface, http://dictionary.com/browse/interface
  7. 7. [Keyboard]
  8. 8. [Lock and Key]
  9. 9. An interface for software components to communicate with each other.Wikipedia: API, http://trhou.se/defineAPI
  10. 10. API Examples • Android SDK: Camera API#wcmia @randyhoyt
  11. 11. import android.hardware.Camera;Camera.getNumberOfCameras();Camera.open(cameraId);
  12. 12. API Examples • Android SDK: Camera API • WordPress: Plugin API#wcmia @randyhoyt
  13. 13. <?php/*Plugin Name: Treehouse BadgesDescription: Displays the badges ...Version: 1.0*/?>add_action(init,treehouse_badges_init);...
  14. 14. API Examples • Android SDK: Camera API • WordPress: Plugin API • HTML5: Canvas API#wcmia @randyhoyt
  15. 15. var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");context.fillRect(10, 10, 40, 380, "#000000");context.drawImage(img, x, y, 100, 77);
  16. 16. Web APIs
  17. 17. REST
  18. 18. Representational State Transfer
  19. 19. RESTful API
  20. 20. Example #1: Treehouse
  21. 21. [Treehouse screenshot]
  22. 22. JavaScript Object Notation: Text-based open standard designed for human-readable data interchange.Wikipedia: JSON, http://trhou.se/defineJSON
  23. 23. { "firstName": "John", "lastName": "Smith", "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }, "phoneNumber": [ { "type": "home", "number": "212 555-1234" }, { "type": "fax", "number": "646 555-4567" } ] }Wikipedia: JSON, http://trhou.se/defineJSON
  24. 24. [Treehouse JSON]
  25. 25. [HTML]
  26. 26. Asynchronous JavaScript and XML: Technique used by the browser to retrieve data from a server in the background without interfering with the existing pageWikipedia: Ajax, http://trhou.se/defineAJAX
  27. 27. [AJAX Request Code]
  28. 28. [Badge Code]
  29. 29. [Badge Display]
  30. 30. <?php$curl = curl_init();curl_setopt_array($curl, array( CURLOPT_RETURNTRANSFER => 1, CURLOPT_URL => http://teamtreehou...));$resp = curl_exec($curl);curl_close($curl);?>
  31. 31. GET  Request  with  WordPress  HTTP  APIWordPress, http://codex.wordpress.org/HTTP_API
  32. 32. REST: Types of Requests • GET (Read) • POST (Create) • PUT (Update) • DELETE (Delete)#wcmia @randyhoyt
  33. 33. API Questions • Does it have to be real time? • What if something goes wrong?#wcmia @randyhoyt
  34. 34. Example #2: ShopLocket
  35. 35. [Screenshot of WP]
  36. 36. [Screenshot of WordPress]
  37. 37. [Screenshot of Product Picker]
  38. 38. [Screenshot of Product Picker]
  39. 39. [Screenshot of Shortcode]
  40. 40. [Screenshot of Website]
  41. 41. Authentication
  42. 42. OAuth An open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications.OAuth, http://oauth.net/
  43. 43. App ID5f4a89f2d6655ac7a8859343d6d152579410e7b659b200e00aaf3721cf46269eApp Secretfa963a1ef3702c16d934500f7621697e2d6bfd05d3ef1751a32bdeb2a0599020
  44. 44. [ShopLocket]
  45. 45. [ShopLocket Login]
  46. 46. [ShopLocket]
  47. 47. /? code = 53fe... & state = auth...
  48. 48. $args = array( "code" => $_GET["code"], "app_id" => "app id", "app_secret" => "app secret",); [GET Request]$response = wp_remote_post( https://www.shoplocket.com/ . oauth/token, $args );
  49. 49. Token:310826b20a535a422ccaa46d65c7065f83e403b9218a38962ab4e43021b93585
  50. 50. [Token]
  51. 51. API Questions • Does it have to be real time? • What if something goes wrong?#wcmia @randyhoyt
  52. 52. [Refresh Button]
  53. 53. WordPress Functions
  54. 54. WordPress wp_ajax, http://trhou.se/wp_ajax_hook
  55. 55. GET  Request  with  WordPress  HTTP  APIWordPress HTTP API, http://codex.wordpress.org/HTTP_API
  56. 56. WordPress update_option, http://trhou.se/update_option
  57. 57. Transients?WordPress, http://codex.wordpress.org/Transients_API
  58. 58. Integrating WordPressWith Web APIsRandy Hoyt randyhoyt.com @randyhoytPresentation randyhoyt.com/wcmia

×