Creating a Simple Instagram Plugin


This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.

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:

This is our plan
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.

4. Registering the Shortcode

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

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.

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.

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: ... .

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.

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.

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.

11. The Easy Part

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

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.

13. Complete Code

The finished code looks like this.

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