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.

1. Integrating WordPress
With Web APIs
Randy Hoyt

2. About Me
Randy Hoyt randyhoyt.com
@randyhoyt
Presentation randyhoyt.com/wcmia
#wcmia @randyhoyt

3. Overview
• APIs: Defined
• Two Examples:
1. Get Treehouse Badges
2. Get ShopLocket Products
• WordPress Functions
#wcmia @randyhoyt

4. API

5. Application Programming Interface

6. A point where two systems,
subjects, organizations, etc.,
meet and interact.
Interface, http://dictionary.com/browse/interface

7. [Keyboard]

8. [Lock and Key]

9. An interface for software
components to communicate
with each other.
Wikipedia: API, http://trhou.se/defineAPI

10. API Examples
• Android SDK: Camera API
#wcmia @randyhoyt

11. import android.hardware.Camera;
Camera.getNumberOfCameras();
Camera.open(cameraId);

12. API Examples
• Android SDK: Camera API
• WordPress: Plugin API
#wcmia @randyhoyt

13. <?php
/*
Plugin Name: Treehouse Badges
Description: Displays the badges ...
Version: 1.0
*/
?>
add_action('init','treehouse_badges_init');
...

14. API Examples
• Android SDK: Camera API
• WordPress: Plugin API
• HTML5: Canvas API
#wcmia @randyhoyt

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. Web APIs

17. REST

18. Representational State Transfer

19. RESTful API

20. Example #1: Treehouse

21. [Treehouse screenshot]

22. JavaScript Object Notation:
Text-based open standard
designed for human-readable
data interchange.
Wikipedia: JSON, http://trhou.se/defineJSON

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. [Treehouse JSON]

25. [HTML]

26. Asynchronous JavaScript and XML:
Technique used by the browser to
retrieve data from a server in the
background without interfering with
the existing page
Wikipedia: Ajax, http://trhou.se/defineAJAX

27. [AJAX Request Code]

28. [Badge Code]

29. [Badge Display]

38. <?php
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_URL => 'http://teamtreehou...
));
$resp = curl_exec($curl);
curl_close($curl);
?>

39. GET
Request
with
WordPress
HTTP
API
WordPress, http://codex.wordpress.org/HTTP_API

40. REST: Types of Requests
• GET (Read)
• POST (Create)
• PUT (Update)
• DELETE (Delete)
#wcmia @randyhoyt

46. API Questions
• Does it have to
be real time?
• What if something
goes wrong?
#wcmia @randyhoyt

47. Example #2: ShopLocket

48. [Screenshot of WP]

49. [Screenshot of WordPress]

50. [Screenshot of Product Picker]

51. [Screenshot of Product Picker]

52. [Screenshot of Shortcode]

53. [Screenshot of Website]

54. Authentication

55. OAuth
An open protocol to allow secure
authorization in a simple and standard
method from web, mobile and desktop
applications.
OAuth, http://oauth.net/

56. App ID
5f4a89f2d6655ac7a8859343d6d15257
9410e7b659b200e00aaf3721cf46269e
App Secret
fa963a1ef3702c16d934500f7621697e2
d6bfd05d3ef1751a32bdeb2a0599020

57. [ShopLocket]

58. [ShopLocket Login]

59. [ShopLocket]

60. /? code = 53fe... & state = auth...

61. $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
);

62. Token:
310826b20a535a422ccaa46d65c7065f
83e403b9218a38962ab4e43021b93585

63. [Token]

64. API Questions
• Does it have to
be real time?
• What if something
goes wrong?
#wcmia @randyhoyt

73. [Refresh Button]

75. WordPress Functions

78. WordPress wp_ajax, http://trhou.se/wp_ajax_hook

80. GET
Request
with
WordPress
HTTP
API
WordPress HTTP API, http://codex.wordpress.org/HTTP_API

82. WordPress update_option, http://trhou.se/update_option

83. Transients?
WordPress, http://codex.wordpress.org/Transients_API

84. Integrating WordPress
With Web APIs
Randy Hoyt randyhoyt.com
@randyhoyt
Presentation randyhoyt.com/wcmia