Integrating 3rd Party APIs with WordPress

Whether you want to display locations on your website with a map powered by Google, list events from a Meetup page (like we do on our website in the header of every page), or customize how a social media feed is displayed, an API will allow you to retrieve and use data hosted elsewhere on the web within your WordPress website. 

What is an API?

API stands for Application Programming Interface.  As the video below explains, an API is like the waiter carrying information and dishes back and forth from the kitchen – it allows various applications across the web to send and receive data.

Relevant API Terminology

Here’s a glossary of terms you’ll want to know as we get deeper into the meat of this post:

• API Key
  An API key is the authorization code that is passed in an API request via a header or URL parameter, that identifies the requester and establishes that they have the ability to retrieve the requested data.
• Authentication
  Authentication is the process of identifying the user of the API, either via API Key(s), as defined above, or with OAuth (see below).
• Client
  The client is the application or requester who initiates the data retrieval.
• Endpoint
  The exact web address (URI) that points to the requested API functionality.
• JSON
  JSON stands for Javascript Object Notation.  It is a data format commonly used for APIs requests.
• OAuth
  OAuth stands for Open standard authorization. OAuth is an alternative method of authentication that grants access without directly sharing credentials (in contrast to API Keys).
• REST
  Representational state transfer a standardized method for interacting with resources via HTTP methods:
  
  • Get – retrieves resources
  • Post – creates resources
  • Put – updates resources
  • Delete – deletes resources

Examples of API Integrations in WordPress

As mentioned in the video above, API’s integrations are everywhere.  They’re powering the connections that allow you to check the weather without ever leaving Google search results and display posts from your (or your clients’) social media feeds on your/their websites.  Here’s a common example, images from my Instagram feed embedded in the footer of my personal website:

This sort of integration is so common that we don’t even think about what’s powering it.  In the case of WordPress, we simply install a plugin (this one happens to be WP Instagram Widget), configure a few settings and everything is good to go.  But what do we do if a plugin does not exist to pull in the data we want?  This is where you get to expand your developer skills and build your own integration!

Displaying Upcoming Meetups from Meetup.com

Right here on our website you can see an example of a simple API integration:

Upcoming events are pulled from Meetup.com’s API and, with a shortcode, displayed in a widget area on our website.  The shortcode is part of our core functionality plugin that Bill Erickson wrote when building our website.  Here’s what the code looks like:

Essentially, this code starts by creating a shortcode in WordPress using the Shortcode API, which accepts two attributes – count (limiting the number of events to show, in this case, the default is 5) and meetup (allows the shortcode to be reused to display events from other Meetup groups).  Then the shortcode attributes are passed through to create the request URI, in this case http://api.meetup.com/georgetown-tx-wordpress/events, then the JSON response is decoded and formatted into a bulleted list of upcoming events with event name (linked to Meetup.com), date and time.

You can see the full plugin on GitHub, as well as the code for our website theme if you’d like to dig into that as well.

Nonpublic-Facing Websites

Another interesting example of API usage is for internal use or non-public facing websites like intranets or portals.  We built and maintain a “sponsor portal” for one of our clients which allows them to share data with sponsors of their conferences.  Among that data are the names, demographic data, resumes, and contact information of conference attendees who are looking for jobs and have opted-in to having their data shared with companies.

These attendees purchased tickets for the event on Eventbrite.com or via an Eventbrite tickets widget published on a separate website.  Upon purchasing tickets, the attendees choose whether to opt-in to data sharing, then our portal grabs the attendee information from the Eventbrite API and creates a new post in a “candidate” custom post type in WordPress. This allows the conference organizer to pass real-type attendee information to event sponsors without having to export CSV reports and manually go through them to remove people who did not agree to data sharing.

Here’s what the code for the import looks like:

Basically, what this code does is this:

1. Check the Eventbrite attendees API url as built by data passed from Eventbrite event IDs stored elsewhere.
2. If attendees exist, first check to see if a post has already been created in WordPress, using the attendee’s email as a unique identifier.  If a post already exists, it will be updated.  If it does not, a new one will be created.
3. Check to see if attendees gave permission for their information to be shared and only import or update records where permission was granted.
4. Check for answers to specific questions asked at time of ticket purchase in Eventbrite and save answers either as post meta or taxonomy terms attached to the post.
5. Only run this import when a checkbox is check in the backend toggling import on.

Let’s Try One…

We’re going to build a plugin that displays lost dogs and cats recently found in Austin, Texas.  The data will be pulled from data.austintexas.gov’s Austin Animal Center Found Pets Map/open data project, visible at https://data.austintexas.gov/Health-and-Community-Services/Austin-Animal-Center-Found-Pets-Map/hye6-gvq2.

We’ll take this data and build a plugin that allows recently found pets to be displayed via shortcode in a WordPress website.  Here’s an example of the shortcode output we will be building:

You can see the code for this project at on Road Warrior Creative’s GitHub account.  Here are some extra resources that might be helpful:

• Endpoint: https://data.austintexas.gov/resource/hye6-gvq2.json
• API Docs: https://dev.socrata.com/foundry/data.austintexas.gov/vwti-2wcd
• Get and App Token for data.asutintexas.gov: https://data.austintexas.gov/profile/app_tokens
• How to Build a Plugin: https://codex.wordpress.org/Plugin_API
• How to Make a Shortcode: https://codex.wordpress.org/Shortcode_API

Video Recap

Have questions?  Leave a comment below!