WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

Add Instagram Photos to Your Website or WordPress Website

In this tutorial, we will show you how you can add an Instagram feed using a WordPress plugin, and how you can add one using an external plugin for any type of website.

Adding Instagram Photos to your website using a Premium WordPress Plugin

The best plugin in which we have come across and use on a lot of our website builds is Instagram Feed – WordPress Instagram Gallery which is created by Elfsight. The plugin can be purchased here. This plugin can be purchased for $59 and can be used across multiple WordPress websites.

All you have to do is install the plugin, activate it and connect your Instagram account either using Facebook Business or Personal Instagram and then you can fully customise it to your needs.

A shortcode is provided so that you can add it anywhere on your website. The beauty of this plugin is that it’s very easy to use, it allows you to fully customise the appearance. You can use either a slider or tile display, specify how many items you want per row or column, and it even allows you to hover the images to see the post description, amount of likes, and comments which links to the feed. Sounds awesome right? That’s exactly why it’s our go-to plugin for Instagram feeds on WordPress websites.

The best part of using a plugin for this sort of thing is that Instagrams policies are forever changing, so by simply updating to the latest version, we can always ensure this plugin works as intended.

Here is an example of how this plugin looks on your WordPress website:

We actually use this plugin on this website which you will see just above the footer. You will see the description and comments/links in the first image above.

Looks great right?

We’ve used a variety of plugins, but this one has definitely proved to be the best on the market!

Add Instagram Photos to your website using Instafeeed.js

We came across a really good light-weight plugin to add Instagram photos to your website and this was by using Instafeed.js. No jQuery required, just plain old javascript.

https://raw.github.com/stevenschobert/instafeed.js/master/instafeed.min.js

How do I set it up?

Setting up Instafeed.js is pretty straight-forward. Just download the script and include it in your HTML:


<script type="text/javascript" src="path/to/instafeed.min.js"></script>

Instafeed.js also supports AMD/CommonJS:


// AMD
require(["path/to/instafeed"], function(Instafeed) {

});

// CommonJS
var Instafeed = require("instafeed.js");

NPM/Bower

Instafeed.js is also available on NPM and Bower:


npm install instafeed.js      # npm
bower install instafeed.js    # bower

Basic Usage

Here’s how easy it is to get all images tagged with #awesome:


<script type="text/javascript">
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'awesome',
        clientId: 'YOUR_CLIENT_ID'
    });
    feed.run();
</script>

Instafeed.js with automatically look for a

and fill it with linked thumbnails. Of course, you can easily change this behaviour using the standard options. Also, check out the advanced options and the section on templating for additional customizations.

Requirements

The only thing you’ll need to get going is a valid client id from Instagram’s API. You can easily register for one on Instagram’s website.

If you need help with that step, try Googling “How to get an Instagram client ID“.

Standard Options

  • clientId – Required. Your API client id from Instagram.
  • accessToken – A valid oAuth token. Can be used in place of a client ID.
  • target – The ID of a DOM element you want to add the images to.
  • template – Custom HTML template to use for images. See templating.
  • get – Customize what Instafeed fetches. Available options are:
    • popular (default) – Images from the popular page.
    • tagged – Images with a specific tag. Use tagName to specify the tag.
    • location – Images from a location. Use locationId to specify the location.
    • user – Images with a user. Use userId to specify the user. More info here.
  • tagName – Name of the tag to get. Use with get: ‘tagged’.
  • locationId – Unique id of a location to get. Use with get: ‘location’.
  • userId – Unique id of a user to get. Use with get: ‘user’.
  • sortBy – Sort the images in a set order. Available options are:
    • none (default) – As they come from Instagram.
    • most-recent – Newest to oldest.
    • least-recent – Oldest to newest.
    • most-liked – Highest # of likes to lowest.
    • least-liked – Lowest # likes to highest.
    • most-commented – Highest # of comments to lowest.
    • least-commented – Lowest # of comments to highest.
    • random – Random order.
  • links – Wrap the images with a link to the photo on Instagram.
  • limit – Maximum number of Images to add.
  • resolution – Size of the images to get. Available options are:
    • thumbnail (default) – 150×150
    • low_resolution – 306×306
    • standard_resolution – 612×612

Advanced Options

  • before – A callback function called before fetching images from Instagram.
  • after – A callback function called when images have been added to the page.
  • success – A callback function called when Instagram returns valid data. Takes the JSON data as an object argument.
  • error – A callback function called when there is an error fetching images.Takes an error message as a string argument.
  • mock – Fetch data without inserting images into DOM. Use with success callback.
  • filter – A function used to exclude images from your results. The function will be given the image data as an argument, and expects the function to return a boolean. See the example below for more information.

Example Filter (get username + tagged):


<script type="text/javascript">
    var feed = new Instafeed({
        get: 'user',
        userId: 'USER_ID',
        filter: function(image) {
            return image.tags.indexOf('TAG_NAME') >= 0;
        }
    });
    feed.run();
</script>

Templating

The easiest way to control the way Instafeed.js looks on your website is to use the template option. You can write your own HTML markup and it will be used for every image that Instafeed.js fetches.


<script type="text/javascript">
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'awesome',
        clientId: 'YOUR_CLIENT_ID',
        template: '<a href="{{link}}"><img src="{{image}}" /></a>'
    });
    feed.run();
</script>

Notice the {{link}} and {{image}}? The templating option provides several tags for you to use to control where variables are inserted into your HTML markup. Available keywords are:

  • {{type}} – the image’s type, can be image or video.
  • {{width}} – the image’s width, in pixels.
  • {{height}} – the image’s height, in pixels.
  • {{orientation}} – the image’s orientation, can be square, portrait, or landscape.
  • {{link}} – URL to view the image on Instagram’s website.
  • {{image}} – URL of the image source. The size is inherited from the resolution option.
  • {{caption}} – Image’s caption text. Defaults to empty string if there isn’t one.
  • {{likes}} – Number of likes the image has.
  • {{comments}} – Number of comments the image has.
  • {{location}} – Name of the location associated with the image. Defaults to empty string.
  • {{id}} – Unique ID of the image. Useful if you want to use iPhone hooks to open the images directly in the Instagram app.
  • {{model}} – Full JSON object of the image. If you want to get a property of the image that isn’t listed above you access it using dot-notation. (ex: {{model.filter}} would get the filter used)
Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Join the discussion

Related Posts

Related - How to increase WordPress Memory Limit

Wordpress / 22nd December 2020

How to increase WordPress Memory Limit

Read More Related - How To Fix “Unable to connect to the filesystem. Please confirm your credentials” In WordPress

Wordpress / 3rd December 2020

How To Fix “Unable to connect to the filesystem. Please confirm your credentials” In WordPress

Read More