Display an Instagram feed on your WordPress website

Need to display an Instagram feed on your WordPress blog/site? Eaaassssyyy!

In this short little snippet, I’m going to show you how. I’ve done two different implementations of Instagram feeds on WordPress sites recently. The first one, was the display of a single users feed in the footer of a website. The second solution aggregated multiple different user feeds and showed the most recent images that were uploaded across the different feeds.

Today I’m going to share the first method, and then I will follow up this snippet with the aggregated solution in another snippet later this week.

Let’s dive in to the code first and then look at how it works…

WordPress Instagram Feed Snippet

<?php
/**
 * Class used for fetching and displaying Instagram feeds.
 *
 * License: GPLv2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 *
 * WordPress Instagram Feed Class, Copyright 2017 Matt Geri
 *
 * WordPress Instagram Feed Class is distributed under the terms
 * of the GNU GPL.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * @since 1.0
 * @package MattGeri
 */

namespace MattGeri;

/**
 * Class Instagram
 *
 * @since 1.0
 * @package MattGeri
 */
class Instagram {
	/**
	 * The transient key used to store the feed results.
	 *
	 * @since 1.0
	 */
	const TRANSIENT_KEY = 'instagram_feed_%s';

	/**
	 * When to expire the transient - set to an hour.
	 *
	 * @since 1.0
	 */
	const TRANSIENT_EXPIRE = 60 * 60 * 24;

	/**
	 * The Instagram endpoint for fetching images.
	 *
	 * @since 1.0
	 */
	const INSTAGRAM_API = 'https://www.instagram.com/%s/media';

	/**
	 * Display an unordered list of Instagram images for a given profile
	 *
	 * @since 0.1
	 * @param string $user The Instagram user id.
	 */
	public function display( $user ) {
		$instagram_feed = $this->fetch( $user );

		if ( ! is_wp_error( $instagram_feed ) && ! empty( $instagram_feed ) ) {
			?>
			<ul id="instagram">
				<?php foreach ( $instagram_feed as $image ) : ?>
					<li class="instagram-item">
						<a href="">
							<img src="" alt="" title="">
						</a>
					</li>
				<?php endforeach; ?>
			</ul>
			<?php
		} else {
			esc_html_e( 'There was an error retrieving the Instagram feed', 'instagram' );
		}
	}

	/**
	 * Fetch and cache an Instagram feed for a given profile.
	 *
	 * @since 0.1
	 * @param string $user The Instagram user id.
	 * @return array|\WP_Error
	 */
	public function fetch( $user ) {
		$instagram_api = sprintf( self::INSTAGRAM_API, $user );
		$transient_key = sprintf( self::TRANSIENT_KEY, $user );

		if ( false === ( $instagram_feed = get_transient( $transient_key ) ) ) {
			$instagram_feed = array();
			$response       = wp_remote_get( $instagram_api );

			if ( ! is_wp_error( $response ) ) {
				if ( 200 === wp_remote_retrieve_response_code( $response ) ) {
					$body = json_decode( wp_remote_retrieve_body( $response ) );

					if ( ! empty( $body->items ) ) {
						foreach ( $body->items as $image ) {
							$instagram_feed[ $image->created_time ] = array(
								'src'     => $image->images->standard_resolution->url,
								'link'    => $image->link,
								'caption' => $image->caption->text,
							);
						}
					}

					set_transient( $transient_key, $instagram_feed, self::TRANSIENT_EXPIRE );
				} else {
					return new \WP_Error( 'instagram_feed_failed', __( 'Failed to retrieve Instagram feed', 'instagram' ) );
				}
			} else {
				return $response;
			}
		}

		return $instagram_feed;
	}
}

$instagram = new Instagram();
$instagram->display( 'mattgeri' );

How The WordPress Instagram Feed Snippet Works

So! What’s happening in the above snippet?

Line 63: display is a public method that can be called on the class and it will fetch the feed (see line 64) and then output a unordered list (see line 68) of all the images that were returned from the feed.

Line 96: If you’ve got a keen eye, you’ll notice that I’m using a JSON feed that is provided by Instagram to fetch the images that have been uploaded by the user.

Line 112: We then cache the results inside a WordPress transient so that we don’t hit up the Instagram feed on every page load. We cache the results for a day (see line 48)

That’s pretty much it! If something goes wrong, a WP_Error is returned and we handle it gracefully on line 78. Feel free to play around with the class and make it even better! Send me a link once it’s done so that I can check it out.

Free WordPress Instagram Feed Plugin

So just because I can, I’m bundling up this snippet in to a free, open source plugin that you can download and install from the WordPress plugin repo. Check back in a couple days for the plugin URL.

Enjoyed this content? Get an article like this delivered to your inbox every Tuesday...

Leave a Reply

Your email address will not be published. Required fields are marked *