Age of Article Warning: This article was originally published a few years ago. The information, tips and techniques explained may outdated. Examples shown on this page may no longer work. Please consider this when viewing the below content.

Many bloggers use Instagram as part of their social media strategy. If you are looking at ways to share your Instagram photos on your WordPress website, then one option is to use the WordPress embed, which simply requires you to copy the Instagram URL of a photo and paste it on its own line in the WordPress editor. As an example if I put http://instagram.com/p/yiNjY6JrLI/ onto a line all by itself, then the following photo appears.http://instagram.com/p/yiNjY6JrLI/Alternatively you could use a WordPress plugin to add Instagram photos, or otherwise you can try the jQuery Spectragram jQuery script function to connect your website with your Instagram account and then embed photos onto your pages. I've setup this easy to use script to add my 9 latest photos from Instagram into my footer widget using the technique in this article, but you can use this shortcode in a variety of ways, either adding into your sidebar or on a page. There are options in the shortcode to customise the output, and you can modify your photos further using script options and css. If you want to be able to setup different looking Instagram feeds on separate pages, then you can customise the script to display your user feed, what's popular at the moment, or by recently tagged. Only use the shortcode once per page however, so if you have added it to your sidebar or footer, then don't use it also in a post or page. NB: If you want to add multiple instances of Instagram photo feed onto a single page, then you can do this without using the shortcode, but instead adding different jQuery selectors to your custom script. Here is an example of using the medium size images, displaying the latest 4 images all tagged with #WHPpointofview.[instagridtwo]If you'd like to view my Instagram footer widget then scroll down to the bottom of the page. Otherwise here is how to setup your own Instagram shortcode.

Quick Overview of Steps

1. Register an application at Instagram.com/developer to receive a client ID2. Obtain a token for your application to communicate with Instagram3. Create the shortcode, setup the script options, and upload the files to your website.4. Test it out and customise with CSSIt might seem a little complicated, but it's actually pretty easy to use jQuery Spectragram.

Register an Instagram application

This is a necessary step to validate your script so that you can communicate with Instagram. Go to instagram.com/developer, sign in and click the button that says to register an application or register a client.Fill in your details, I just used a simple application name like "mywebwidget", enter in my website URL and for the OAuth redirect_uri I just used my website URL again. Next you need to uncheck the box that says "Disable implicit OAuth". When you save you will receive your CLIENT ID and CLIENT SECRET. You will need this next.

Obtain an Access Token

Copy the URL below into a browser address bar, modify the parts marked in capital letters with the corresponding values.https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=tokenSo where it says CLIENT-ID replace with your client ID, and where it says REDIRECT-URI replace with your redirect url. (These are the values from the application/client you just setup)Once you submit the URL with your updated values it will redirect to your website. Take a look at the address bar and you will see attached to the end of your URL something like ... /#access_token=123456789123456798ABCABCThe bit after the access_token= is your ACCESS TOKEN and you will need this, so copy it down into a text file and save on your computer.That's it for the Instagram application, though if you want to you can go back into your application via Manage Client and re-tick the box "Disable implicit OAuth".

Set up the files and shortcode

Download the spectragram.js script from github.com/adrianengine/jquery-spectragram. Save it into a folder called "spectragram" inside a "js" folder, located inside the childtheme folder of your WordPress website. (if you don't have a "js" folder inside the childtheme folder, then add one). So the path should look like /wp-content/themes/your-childtheme/js/spectragram/Now create a javascript file (save it as spectragramscript.js in the spectragram folder also) to setup the options for Spectragram. Use the code below, but insert your CLIENT ID and ACCESS TOKEN into the corresponding sections./*script for spectragram*/

jQuery(document).ready(function($) {

jQuery.fn.spectragram.accessData = {

accessToken: 'add-access-token',

clientID: 'add-client-id'

};

var instamethod = instag.method;

var instaquery = instag.query;

var instamax = instag.max;

var instasize = instag.size;

var instaclass = instag.class;

$('.'+instaclass).spectragram(instamethod,{

query: instaquery,

max: instamax,

size: instasize,

wrapEachWith: '<li></li>'

});

});

Now you want to setup your shortcode function, so the following code is added to your childtheme's functions.php file. The first part registers the scripts ready for enqueueing. The second part sets up the shortcode with some default values and enqueues the scripts (so only loading on pages that have the shortcode).function add_spectragram_files() {

wp_register_script('spectragram',get_stylesheet_directory_uri().'/js/spectragram/spectragram.js',array('jquery'),'',true);

wp_register_script('spectragramscript',get_stylesheet_directory_uri().'/js/spectragram/spectragramscript.js',array('spectragram'),'',true);

}

add_action('wp_enqueue_scripts','add_spectragram_files');



function spectragram_shortcode($atts, $content = null){

$spectragramdata = shortcode_atts(array(

'query' => '',

'max' => '9',

'size' => 'small',

'class' => 'instagrid',

'method' => 'getUserFeed'

),$atts);

wp_enqueue_script('spectragram');

wp_enqueue_script('spectragramscript');

wp_localize_script('spectragramscript','instag',$spectragramdata);

$spectra_class = $spectragramdata['class'];

$instagram_spectragram = '<ul class="'.$spectra_class.'"></ul>';

return $instagram_spectragram;

}

add_shortcode('instagrid','spectragram_shortcode');

How to use the shortcode

Simply add [instagrid query="your-Instagram-username"] to your page or sidebar widget. This will add 9 small photos from your Instagram account onto the page. Options in the shortcode:

  • query="your username | tag name" //default is empty *so this option must always be included. Use a username if setting method as getUserFeed; use a tag name if setting method as getRecentTagged
  • method="getUserFeed | getRecentTagged" //default is getUserFeed
  • max="number" //default is 9
  • size="small | medium | big" //default is small
  • class="add a classname" //default is instagrid
  • Remember to only use this shortcode once on a page

Ok so now you will need to style your Instagram photo feed. To do this you simply add some CSS to your childtheme's style.css file. If you noticed above I used list markup for the photos, so the first CSS modification you would do is to remove the bullets and to change the alignment..instagrid li {

display:inline-block;

float:left;

list-style:none outside none;

margin:0;

padding:0;

}

ul.instagrid {

display:inline-block;

margin:0 auto;

}

Here are some more CSS notes:

  • If you are inserting into a text widget, you may need to add more specificity using .textwidget css rules
  • If you wish to manually change the size of the images try adding width rules to the .instagrid li css for eg, width:75px;
  • If you wish to control the overall width of the displayed photos, try adding width or max-width css rules
  • If you want to add the shortcode onto different pages and style each one differently, use the class="ADD CLASS NAME" option in your shortcode, and then add the corresponding CSS rules.

Now you have your very own Instagram photo feed shortcode setup to use the Instagram API. For more information consult their documentation. Don't forget to checkout my Instragram grid in the footer below, and click on one of the images to look at it on Instagram.Follow my blog with Bloglovin

Comments: