adrianengine/jquery-spectragram

A jQuery plugin using the Instagram Basic Display API to fetch and display user photo feeds inside a list or any container you define.

spectragram.js is a jQuery plugin using the Instagram API to fetch and display user, popular or tags photo feeds inside a list or any container you define.

Visit Project Page

Download spectragram.js (minified 3kb)

---

Instagram Platform Changes

• On June 1 2015, Instagram, which is owned by Facebook, will stop allowing many third parties to access the images in its feeds.

• This means you will no longer be able to fetch photos form other users with spectragram after May 31.

• Please follow this instructions to make it work with your own sandboxed feed: How to get Instagram API access token and fix your broken feed Update: Not longer valid.

• On April 4 2018, some endpoints this plugin use were deprecated: Instagram Platform Changelog

• Instagram Legacy API Will be disabled. Facebook announced the API will work until March 31, 2020. Update will be deprecated on June 29, 2020.

• Spectragram.js has been updated to use the new Instagram Basic Display API, please follow the new Token process.

Please upgrade in order to make your Instagram feed work again.

---

Features

• Get the most recent media published by one user from the Instagram Basic Display API.
• Display the results on list items or any other HTML tag you define,
• Define the size of the pictures (small, medium, large).
• Use your own Instagram application AccessToken.

Before You Start

In order to use the plugin you will need:

• A Facebook Developer Account.
• A public Instagram Account with media, and its user login credentials.

Register an app and get an Access Token

Please follow the instructions to get an Access Token from the Wiki.

Plugin Simple Usage

1. Be sure to have jQuery script included and then include the spectragram.min.js script right before the </body> tag.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script type="text/javascript" src="js/spectragram.min.js"></script>

1. Set your Instagram accessToken:

jQuery.fn.spectragram.accessData = {
	accessToken: 'your-instagram-access-token'
};

1. Call spectagram function on the container element and pass it your custom options:

$('ul').spectragram({
	size: 'small'
});

This example will show 25 or less photos in a list, "small" sized.

Configuration

.spectragram( Options )

Options

An object to configure the properties of spectragram:

Name	Required	Type	Default	Description
accessToken	Yes	String	null	This is your Instagram Application AccessToken.
max	No	Number	25	A number between 1 and 25 of photos to show.
size	No	String	large	The size of the photos. 'small', 'medium' or 'large'.
wrapEachWith	No	String	'<li></li>'	The HTML tag to wrap every result.
complete	No	Function	null	A callback function to execute after the display of the photos.

Example

jQuery.fn.spectragram.accessData = {
	accessToken: 'your-instagram-access-token'
};

$('ul').spectragram({
	complete : myCallbackFunc(),
	max: 4,
	size: "medium",
	wrapEachWith: "<li></li>"
});

License

Licensed under the MIT license. You are free to use this plugin in commercial projects as long as the copyright header is left intact.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Further notes

Maintained by Adrian Quevedo.

This code is provided with no warranty. While I strive to maintain backwards compatibility, the code is still under active development. As this is the case, some revisions may break compatibility with earlier versions of the library. Please keep this in mind when using the plugin.

This plugin uses the Instagram Basic Display API and is not endorsed or certified by Instagram or Facebook, inc. All Instagram© trademarks displayed on this plugin are property of Facebook, Inc.

jquery-spectragram's Issues

Show user name and profile image

I installed the plugin and works fine, but I have a question, could I show the user profile image and name?

You could write me in spanish too.

thanks you

VIdeo support

Will there be support for the new video feature? When I'm pulling images by tag, it stops fetching images if there is a video, then only the images before the video will show. I'm using the tag dehistoriske.

images everywhere?

Hi there, can anyone imagine why i have instagram images at every 'ul'?
I thought that the $('ul').spectragram … only affects the <ul class="spectragram" …
but at my page it seems that every ul on an page gets instagram images added … same if i use div instad of ul …
Any ideas? Thanks in advance

my code:
$('ul').spectragram('getUserFeed',{
query: 'fuenfseenland.de',
max: 6,
size: 'medium',
wrapEachWith: '

'
});

Enable/disable or Custom title for images

I wish there was an option to enable, disable or customize the titles of the images.Because if we show these pictures in the side by placing the pointer over an image bar it shows us a title that covers the entire page and looks unsightly

Error 429 on Spectragram Demo Site

Expected behavior

Instagram feeds showing on demo site: http://spectragram.js.org

Actual behavior

Instagram feeds not showing due to API change, error 429 for each in console.

Steps to reproduce this behavior

View Demo Site. Also note that after registering a new client ID and Access Token to get past the 429 error in a local install, I'm presented with the following JS error.

Hope this helps in any way mate!

Problem with initialization

Expected behavior

I tried adding the code below:
jQuery.fn.spectragram.accessData = { accessToken: '[your-instagram-access-token]', clientID: '[your-instagram-application-clientID]' };

Actual behavior

The console returns the following error.

Uncaught Error: Method [object Object] does not exist on jQuery.spectragram

Steps to reproduce this behavior

I am using jQuery version 1.13

Do you know what may be wrong?
Thanks in advance.

Uncaught TypeError: Cannot read property 'length' of undefined

Hi everyone, I have this message:
Uncaught TypeError: Cannot read property 'length' of undefined
at Object. (spectragram.min.js:1)
at j (jquery-1.11.3.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.11.3.min.js:2)
at x (jquery-1.11.3.min.js:5)
at HTMLScriptElement.b.onload.b.onreadystatechange (jquery-1.11.3.min.js:5)

And I don't know how to fix it, What I have to do? Thks!

Titles with apostrophes get cut short

Hovering over images in the feed displays their title. If the title has an apostrophe the title gets cut short.

Eg: "Don't miss out!" gets displayed as "Don"

Need an example please!

I tried and could not make it work. Can you share a full example ?

Failure to retrieve feed from account with recent name change.

Instagram feed consistently works with new accounts; however, I ran into an issue where the feed often won't be retrieved if the account has undergone a name change. More than 90% of the time the feed retrieval fails in this case.

Uncaught TypeError: Cannot read property 'text' of null

If a picture's caption is empty this error occurs, because such case is not expected:

results.data[i].caption.text

so if the caption is returned null this error occurs.
Thus may I suggest to put an empty title if such case would happen

TypeError: results.data is undefined

This error began happening recently. Was working without an issue for months beforehand.

Bootstrap for style

Hi!!! Help Please!!!

How can use bootstrap with spectragram to change the style of the images on my website?

THANKS for your help!

Display other user instead the one I choosed

Hello,
if I add my username, this plugin show me an other user feed... if I end my username with a . it display my correct feed... but I think this is an error!!! how to fix this?
Thank you!

Number of Pics on gallery

("#instagram-feed").spectragram("getUserFeed",{query:"madnessband",max:200})
With this is just showing 20 pics from my user feed. is there anyway to load all the pics from that user?

Possible to display photos from multiple accounts?

I have a client uses has an Instagram feed on the front page of their web site and now wants to be able to feed photos from multiple Instagram users. Is this possible?

Problem with missing captions :: getUserFeed

If a caption is missing, the getUserFeed-method exits with cannot read property "text" of undefined

Possible to get images from multiple hashtags at the same time?

Hi, is it possible to get pictures from multiple hashtags at the same time?

Ie.

$('ul').spectragram('getRecentTagged',{
query: 'converse','nike','adidas'
});

Thanks!

Images are not loading in recently

No images are loading from instagram in recently including from your website http://spectragram.js.org/

Kindly check, Please.

getRecentTagged returning limited amount of tagged images

When using the getRecentTagged call it is only returning 4 images with the specified hashtag but the Instagram account has 10 images that use it.

Is there only a set amount of images it will work back through?

I have my code set up like this...

    jQuery.fn.spectragram.accessData = {
        accessToken: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        clientID: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    };

    $('.instafeed').each(function() {
        $(this).children('ul').spectragram('getRecentTagged', {
            query: $(this).attr('data-user-name')
        });
    });

Error on getRecentTagged

In browser console:

Uncaught Error: Spectragram.js - Error: the tag tbt does not have results.
at Function.error (jquery.js:247)
at Object. (spectragram.min.js:1)
at j (jquery.js:3148)
at Object.fireWith [as resolveWith] (jquery.js:3260)
at x (jquery.js:9314)
at HTMLScriptElement.b.onload.b.onreadystatechange (jquery.js:9829)

My code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript" src="spectragram.min.js"></script>

<script>
    $(document).ready(function() {
        var Spectra = {
          instaToken: '***',
          instaID: ' ***',

          init: function () {
            $.fn.spectragram.accessData = {
              accessToken: this.instaToken,
              clientID: this.instaID
            };

            $('.Feed').spectragram('getRecentTagged',{
              max: 12,
              query: 'tbt',
              wrapEachWith: '<div class="photo">'
            });
          }
        }

        Spectra.init();
    });
</script>

spectragram.js:62 Uncaught TypeError: Cannot read property 'length' of undefined

I searched this error and any solution works for me :(

This is what im doing: https://jsfiddle.net/nbennfw9/

• Spectragram.js is correctly linked
• The accesToken and clientID in the jsfiddle are ficticious but in my real code are OK.

Whats the problem? :(

Error account private while running the code?

Hi,

I'm running the example and I'm getting after done!

`This user account is private or doesn't have any photos.`

and console saying

Error: Spectragram.js - Error: the tag converse does not have results.

code :

/**

• Instagram (v1.0)
• GoToLoop (2018-Jan-17)
• https://Forum.Processing.org/two/discussion/25961/instagram-api-p5js#Item_3
  */

"use strict";

jQuery.fn.spectragram.accessData = {
accessToken: 'token',
clientID: 'id'
};

function setup() {
noCanvas();

$(createElement('ol').elt).spectragram('getPopular');

$(createDiv('').elt).spectragram('getRecentTagged', {
query: 'converse',
max: 14,
size: 'big',
wrapEachWith: '

',
complete: alert('Done!')
});
}

Request on a Fetch method.

Hi, in the ajax part is there a way to trigger the fetch method after a period of time, so i can performed the instagram effect, fadeIn out on each image after x mins / sec.

User liked photos

I'm sorry, I'm not very familiar with github, maybe this should go elsewhere, but i enhanced the script by new method for getting the photos that the user liked.

I use this with my website's Instagram account, I log-in, like selected photos and that way the gallery on my website is created/updated..

        getUserLikedFeed: function () {
            var self = this,
                getData = '/users/self/media/liked/?access_token=' + self.accessData.accessToken + '';
            self.fetch(getData).done(function (results) {
                if (results.data.length) {
                        self.display(results)
                } else {
                    $.error('Spectagram.js - Error')
                }
            })
        },

Won't resize

It won't resize on mobile devices. I have a style-mobile.css that resizes everything else accordingly but spectragram stays the same size as if it were being viewed on a desktop. How can I get it to resize if viewed on a mobile device?

stopped working today - fix

I looked to api and stripped .url on rows 114-122 like this:

                    if (setSize == "small") {
                        size = results.data[i].images.thumbnail;
                    }
                    else if (setSize == "medium") {
                        size = results.data[i].images.low_resolution;
                    }
                    else {
                        size = results.data[i].images.standard_resolution;
                    }

getUserFeed Dont Work?

Hi Adrian!

I try your code, but the "getUserFeed" dont Work =(

File > https://www.dropbox.com/s/pfb56sgax6autg9/demo.html

What is wrong? Thank you for your time.

JD

Getting error results.data is undefined

Hi,
Thanks for this cool extension. I tried to use it for a website but I don't get any result. I created the access token and entered also the client ID in the parameters. But I still don't get any instagram image on my website. The access token has been created today, in the instagram BE I see the access for this website. The page is in an subdirectory, might this be the problem or is the URI wildcard for all other pages?
When you open https://www.fab-design.com/genf-autosalon-2017/index_de.html you will see the error in the console.

Thanks,
Florian

Instagram API update

Apparently this plugin stopped working since Instagram changed their data names.

You now get the error results.data is undefined. Has there been an update/fix for this script yet?

Not work with new api...

i get this

http://prntscr.com/iac8l4

Uncaught TypeError: Cannot read property 'length' of undefined

Hello,

I receive the below error message:
Uncaught TypeError: Cannot read property 'length' of undefined

Help please :)

http://codepen.io/anon/pen/eWjbxw

spectragram-photos-with-description (1).zip

Location endpoint

Great plugin! I've tried a couple jQuery/Instagram plugins and definitely had the most success with this one. I do have a suggestion for a future enhancement: creating a new method for the /locations/search endpoint. The query would look something like this: query: 'lat=48.858844&lng=2.294351'.

I attempted to do this on my own but my knowledge of js is limited and kept returning an Uncaught TypeError... would be great to see this in a future release.

Your website has naked boobs being shown

If you weren't aware, your website has a woman exposing her breasts right in the header of the jquery-spectragram website.

Uncaught TypeError: Cannot read property 'accessToken' of undefined

I get this error in the console:

Uncaught TypeError: Cannot read property 'accessToken' of undefined
i.getUserFeed
(anonymous function)
x.extend.each
x.fn.x.each
jQuery.fn.spectragram
(anonymous function)
c
p.fireWith
x.extend.ready
q

Here is the site:
http://charity-walk.co.uk

Error: the username augeautogestion does not exist.

Expected behavior

Show latest post of our Instagram account augeautogestion.

Actual behavior

Does not show nothing on Chrome (Mozzilla and Safari worked good)
https://imgur.com/a/bjDvb

Steps to reproduce this behavior

Load our page on Chrome augeac.org

getUserFeed doesn't work with the minified file

getUserFeed doesn't work with the minified file.
self.accessData.accessToken
should say
t.accessData.accessToken

Multiple Methods

Hi,

I am trying to use multiple methods to display Instagram images from a user with a specific tag, is this possible using Spectragram?

Many thanks in advance,
Lewis.

How to show more than 20 pics ?

Hello,
Is it possible to show more than 20 pics ? I just set the max to 40 but it only shows 20.
Thanks.

Display other users media is not supported because of new API?

Hello,

The media of other users is no more working. Is there any workaround for this?

Instagram doesn't allow to access the public_content scope for this usecase.

Slideshow

Hi, thank you for the plugin. It's possible with CSS make a slideshow with autoplay with spectragram? If yes, can you help with this?

Paginacion

Hola adrian, excelente el plug con instagram, lo unico q le faltaria es agregarle un "cargar mas fotos" y seria perfecto, como seria la modificacion para llamar al results.pagination.next_url que devolveria en la linea 83/84. ya que te devuelve directamente el proximo url.

Gracias.

Cant get my instagram feed to load

Hi
I am currently employing a theme on GHOST that already has Spectagram pre loaded. I just have to change my Client Id and Access token for my feed to show. Its supposed to be that simple.
I followed the steps mentioned on the instagram API portal, received the details, copied it into the code where client id and access_token have to be copied into, but the feed just doesnt show.

When i revert to the default settings, the theme developers instagram feed is visible. But just not mine.

Any help on this will be appreciated. My blog has been delayed by a week only coz i cant configure the damned instagram widget.

Error: the username does not exist

Expected behavior

Expect to show photos from tibet_water profile.

Actual behavior

Got an error: Error: the username tibet_water does not exist

Steps to reproduce this behavior

Successfully got accessToken and clientID from a new registered Instagram application using redirect URI on my localhost, written this:

$('#instagram').spectragram('getUserFeed', {
    query: 'tibet_water',
    max: 6
})

The issue is that I can show my own photos from grawl profile if I set query: 'grawl', but not other users. Nor 'facebook', nor any other. Just only one profile that I used to register Instagram application.

Uncaught TypeError: Cannot read property 'length' of undefined

When the dom is ready, this error message occurs.
"Uncaught TypeError: Cannot read property 'length' of undefined " spectagram.js:48

    getRecentTagged: function () {
        var self = this,
            getData = '/tags/' + self.options.query + '/media/recent?client_id=' + self.accessData.clientID + '&access_token=' + self.accessData.accessToken + '';
        self.fetch(getData).done(function (results) {
            if (results.data.length) {
                self.display(results)
            } else {
                $.error('Spectagram.js - Error: the tag ' + self.options.query + ' does not have results.')
            }
        })
    },

i am not able to get my feed

i have tried many times but still no success and have no idea it's not showing here is the link for code https://jsfiddle.net/u5waey15/

How to get the title of the photo?

Is there a way to fetch the title of the photo from instagram? That way we can add the 'Description' below/above the photo.

Can you provide that feature?

Update on more than 20 images?

Hi,

I am using your plugin (which is awesome btw) for a site I am building. I have seen that people have been asking you about loading more than 20 images at a time but this was about a year a go.

I was wondering if you have an update on this at all?

Thanks.

Errors in documentation

jQuery.fn.spectragram.accessData = {
    accessToken: '[your-instagram-access-token]',
    clientID: '[your-instagram-application-clientID]'        
};

$('div').spectragram({
    query: 'converse',
    max: 14,
    size: 'big',
    wrapEachWith: '<p></p>'}
});

-- you have to remove one bracket

---

Also - <script type="text/javascript" src="js/spectragram.js"></script> - you have to include before </head>, not </body>

TypeError: undefined is not an object (evaluating 'n.data.length')

The plugin has been working brilliantly for a couple of months now. However, all of a sudden today, we're getting the following error:

TypeError: undefined is not an object (evaluating 'n.data.length')
j (jquery.min.js, line 2)
fireWith (jquery.min.js, line 2)
x (jquery.min.js, line 4)
onreadystatechange (jquery.min.js, line 4)

The site that is experiencing the issue is Pretty Little Clippies. I've verified that it is occurring on multiple browsers (Chrome / Safari), and across multiple continents, eliminating any CDN / connectivity issues.

Any idea why this might be happening all of a sudden? Something at Instagram's end blocking API access?

Thank you.