Creating a Simple Instagram Plugin

In the following tutorial we will create a plugin to get the popular pictures from Instagram's main feed.

1. The Plan

Our plugin will work with the [instagradam] shortcode. You can insert it anywhere where HTML content can go eg. template code, editor code, etc.

As a result about 10-15 thumbnail pictures will be shown with clickable links. The core of the plugin is based around a remote feed, which we will retrieve using the Function API of WordPress.

The raw data list functionally will look like this:


/*
  theluxurystyle --- https://distilleryimage8.s3.amazonaws.com/c4c876f4780a11e2a15422000a9f19a4_5.jpg
  loveobe --- http://distilleryimage3.s3.amazonaws.com/0c2d3b20781911e2b92122000a9e0727_5.jpg
  jaredleto --- http://distilleryimage8.s3.amazonaws.com/21d07bce781c11e2adc122000a1f9ace_5.jpg
  balloop --- http://distilleryimage11.s3.amazonaws.com/4fe04e66781411e2890222000a1fb0b2_5.jpg
  pinkshosho --- http://distilleryimage10.s3.amazonaws.com/abaef1b4781b11e2a2ce22000a1fa411_5.jpg
*/

We will pull in some pictures

2. Getting Client ID and Secret

This step is needed for every new plugin. Register it at Instagram to get a client_id and client_secret. The plugin name should be simple alphabetical characters in my experience (eg. johnsplugin).

3. Plugin Information

This is the place to describe your plugin's base data like plugin name, url, version number, and author.


/*
Plugin Name: Instagradam
Plugin URI: https://code.tutsplus.com
Description: A simple and fast Instagram shortcode plugin. Please use [instagradam] to pull main feed!
Version: 1.0
Author: Adam Burucs
Author URI: http://burucs.com/
*/

4. Registering the Shortcode

This will define the [instagradam] shortcode, which will work based on the instagradam_embed_shortcode function.

1
2	// register shortcode
3	add_shortcode( 'instagradam', 'instagradam_embed_shortcode' );

5. Defining Main Function for the Shortcode

This will describe our plugin's core operation. The $atts and $content should be defined as we see here, but we won't use them in this lesson.


	// define shortcode
	function instagradam_embed_shortcode( $atts, $content = null ) {

		// ...

	}

6. Making Variables

We need a helper variable for making an output for our function and a data retrieval which uses the Wordpress Function API. That is $str and $result, respectively.


		// define main output
		$str    = "";
		// get remote data
		$result = wp_remote_get( "https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121" );

7. Handling Feed Errors

The main selection handles the feed error (in some cases we can get SSL errors, but there is a fix for that described later in this article).

If there is any error we echo it to the page: Something went wrong: ... .


	if ( is_wp_error( $result ) ) {
		// error handling
		$error_message = $result->get_error_message();
		$str           = "Something went wrong: $error_message";
	} else {
		// processing further
		// ...
	}

8. More Variables

Variable $result will contain the main data, for processing we make another helper called $main_data. We also need a counter for the iteration.


// processing further
$result    = json_decode( $result['body'] );
$main_data = array();
$n         = 0;

9. Looping, Part One

This loop will collect all usernames and thumbnails we need. Previously I analyzed the main feed (the structure of the feed), to discover how to get the data I want. So this is an important step and also let's not forget that Instagram can change this later
and we might need to modify $d->user->username and $d->images->thumbnail->url.


	// get username and actual thumbnail
	foreach ( $result->data as $d ) {
		$main_data[ $n ]['user']      = $d->user->username;
		$main_data[ $n ]['thumbnail'] = $d->images->thumbnail->url;
		$n++;
	}

10. Looping, Part Two

In the following lines, we create the HTML code which will contain the pictures and links from the Instagram main feed. The links will open in a new window, made with target="_blank". Note the space at the end of the main string, this is for basic separation.


	// create main string, pictures embedded in links
	foreach ( $main_data as $data ) {
		$str .= '<a target="_blank" href="http://instagram.com/'.$data['user'].'"><img src="'.$data['thumbnail'].'" alt="'.$data['user'].' pictures"></a> ';
	}

11. The Easy Part

This (shortcode) standard code will return our main content.

1
2	return $str;

12. SSL Problems

In some cases the wp_remote_get function can work badly, to solve this we need to use this code before the main code sections.


	// fix SSL request error
	add_action( 'http_request_args', 'no_ssl_http_request_args', 10, 2 );
	function no_ssl_http_request_args( $args, $url ) {
		$args['sslverify'] = false;
		return $args;
	}

13. Complete Code

The finished code looks like this.


/*
Plugin Name: Instagradam
Plugin URI: https://code.tutsplus.com
Description: A simple and fast Instagram shortcode plugin. Please use [instagradam] to pull main feed!
Version: 1.0
Author: Adam Burucs
Author URI: http://burucs.com/
*/

	// fix SSL request error
	add_action( 'http_request_args', 'no_ssl_http_request_args', 10, 2 );
	function no_ssl_http_request_args( $args, $url ) {
		$args['sslverify'] = false;
		return $args;
	}

	// register shortcode
	add_shortcode( 'instagradam', 'instagradam_embed_shortcode' );
	
	// define shortcode
	function instagradam_embed_shortcode( $atts, $content = null ) {
		// define main output
		$str    = "";
		// get remote data
		$result = wp_remote_get( "https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121" );

		if ( is_wp_error( $result ) ) {
			// error handling
			$error_message = $result->get_error_message();
			$str           = "Something went wrong: $error_message";
		} else {
			// processing further
			$result    = json_decode( $result['body'] );
			$main_data = array();
			$n         = 0;

			// get username and actual thumbnail
			foreach ( $result->data as $d ) {
				$main_data[ $n ]['user']      = $d->user->username;
				$main_data[ $n ]['thumbnail'] = $d->images->thumbnail->url;
				$n++;
			}

			// create main string, pictures embedded in links
			foreach ( $main_data as $data ) {
				$str .= '<a target="_blank" href="http://instagram.com/'.$data['user'].'"><img src="'.$data['thumbnail'].'" alt="'.$data['user'].' pictures"></a> ';
			}
		}

		return $str;
	}

Finished Look

This is a picture showing the plugin in action. For this, the shortcode was inserted in an article.

Finished plugin, how it looks in browser

How it looks in a browser