These two functions are available independently, any possible way to combine them?

I don't think the Instagram API readily supports this, but perhaps it's possible to fetch all images from a specific user and then filter those images by hashtag?

Is it possible to set a distance as outlined here when using locationId? This way you can more or less retrieve photos within a certain distance of a given location. This is already a part of the Instagram API.

Hello, This is Ryo, web director from Japan.

I have a question about Instagram plugin.
The website we built have not shown Instagram from yesterday.
could be cause of ：https://www.instagram.com/developer/

could you clear this problem??

thank you.

I am referring to the following part of the code:

if (options.accessToken == null && options.clientId == null) {
  throw 'You must provide an access token or a client id';
}

The error message suggests that you must provide an access token or a client id, however in reality the code itself has the and (&&) logical operator. So, either the error message should read 'You must provide an access token and a client id', or the code should be updated to use the or (||) logical operator.

Which one is correct? I am happy to open a pull request and update this accordingly (obviously following the contribution guidelines).

I am having trouble understanding how to adapt your code to the new instagram requirement for an access token.

I have logged into my client’s account and created a client ID. I don’t know what to do next, in order to get the required access token. Instagram says in the docs* to "Direct the user to our authorization url” but does not provide the URL! Can you help with this?

Thanks in advance for any help you can provide. I am not an experienced developer but have some javascript and jquery experience. The three pages that use your code are:

http://corduroyshop.com//instagram-feeds/instagram-left.html
http://corduroyshop.com//instagram-feeds/instagram-middle.html
http://corduroyshop.com//instagram-feeds/instagram-right.html

Thanks again.

Antony Gravett

• https://www.instagram.com/developer/authentication/

I'm no programmer at all, solely a graphic designer, but with a little bit of luck and magic I finally pulled off your code to create this site

http://www.halilife.com

I found as soon as my site started to pick up some decent traffic though, the feed only displayed every now and then. I'm using your hashtag version.... does it have to do with how the site is caching elements? again I really have no idea what I'm coin, and I'm learning every step I take. Thanks in Advance, Josh

Hey guys!

Thanks for the plugin... its awesome!

I'm trying to do use next_url parameter just like the alternative method presented in main page. The call will return only one sole image, even if more than that is claimed by show parameter.

I think it's partially an API issue, as data parameter in ajax callback seems to be populated by Instagram servers directly. Even though, I think this plugin could partially rewrite these parameter, as user considers more variables on next requests.

Line 75 seems to be the point to do these things. Currently, it returns the next_object just as it was provided... skipping all other parameters involved. Indeed, this issue has actually a broader scope, as more parameters are considered. show was just the one I've used.

At the end... show 1 is just too little :) After testing my code over and over, I've noticed it was freezing sometimes... as ajax callback delays its arrival (it even stops sometimes). Maybe due to too much requests in an one to one pagination usage.

Well, what about it?

i already saw this post: #4
but the solution does not apply in my case.

$(".instagram").instagram({
hash: 'something',
clientId: myClientId
});

I've imported the script and followed all instructions, but still nothing. please help!

Client ID etc are all correct. Nothing changed. Simply stopped working one day? :(

Update link at https://github.com/potomak/jquery-instagram/blob/master/README.md#authentication to http://instagram.com/developer/clients/register/

Hello. I have created a gem (library) to allow Rails developers easily include Instagram.js to their projects. It can be installed by calling gem install "instagramjs-rails". More detailed information can be found here https://github.com/bodrovis/instagramjs-rails. So you can mention this gem in the Readme file.

Hello! I am having problems with the alternative method.

Here is a working example on Fiddle.

http://jsfiddle.net/harisn/2DuGb/2/

The problem is when i run it on my server it doesn't work :s

http://demo.harisninios.com/

What i am doing wrong ?

Request to pull the: Added setting to specify image size on DamianMullins / jquery-instagram

Hello
Thx for your plugin !
I tried your alternative method to show more than 20 photos, but i get this error message :

Uncaught TypeError: Cannot read property 'pagination' of undefined

any idea please ?

thx !

Adding a callback to know when the plugin completes would be useful too.

http://stackoverflow.com/questions/2534436/jquery-plugin-adding-callback-functionality

Thoughts?

According to the API specs:

Default is 1000m (distance=1000), max distance is 5000.

Do we have control over it in this script? Would love to reduce it for greater accuracy. I see in line 87:

settings.search.distance != null && (params.distance = settings.search.distance);

How would you display the photographer's username alongside the photo?

Thanks so much for this plug in.

I'm getting a no method 'instagram' from following the sample provided in the Readme. Any suggestions?

$(".instagram").instagram({

See https://github.com/jquery/plugins.jquery.com/blob/master/docs/manifest.md

Is there a way to control the size of the thumbnail?

I'm trying to add the ability to change the hash in a text input (selectedHash) and then have new images with this new tag load when the "more" button is pressed as in your example code. I can see in the console that the hash changes but not the url. Obviously I'm missing something as to getting the tag in the next_url to change. Any help would be appreciated!
Here is my code.

     var selectedHash = $( "input:text[name=hash]" ).val(); 
  var
    insta_container = $(".instagram")
  , insta_next_url

  insta_container.instagram({
       next_url : insta_next_url,
      hash: selectedHash
    , clientId : '4cc3fc9df774483cb575b405f3c1cc21'
    , show : 5
    , onComplete : function (photos, data) {
      insta_next_url = data.pagination.next_url
    }
  })

  $('button').on('click', function(){
      var selectedHash = $( "input:text[name=hash]" ).val();
    var 
      button = $(this)
    , text = button.text()

    if (button.text() != 'Loading…'){
      button.text('Loading…')
      insta_container.instagram({
          next_url : insta_next_url,
          hash: selectedHash
        , show : 5
        , onComplete : function(photos, data) {
          insta_next_url = data.pagination.next_url

          button.text(text);
            console.log( selectedHash )
            console.log( insta_next_url )
        }
      })
    }       
  }) 
});

Hi, This is probably just a dumb mistake I'm making but I'm having a problem with the

$('.instagram').on('didLoadInstagram', function(event, response)

running twice so my images get appended twice. I know its running twice because I checked it with a print statement. Here is the full function in my code:

$('button').click(function(){
    jQuery(function($) {
      $("#pictures").html("");
      $('.instagram').on('willLoadInstagram', function(event, options) {
        console.log(options);
      });
      $('.instagram').on('didLoadInstagram', function(event, response) {
        console.log(response)
        console.log("go")
        for (i = 0; i < response.data.length; i++) {
            var DOM_img = document.createElement("img");
            var link = document.createElement('a'); 
            DOM_img.setAttribute('src', response.data[i].images.thumbnail.url);
            link.setAttribute('href', response.data[i].link);
            link.appendChild(DOM_img)
            pictures.appendChild(link);
        }

      });
      $('.instagram').instagram({
        search: {
        lat: lat,
        lng: lng,
        distance: document.getElementById('Distance').value
      },
        count : 33,
        clientId: 'removed'
      });
    });
});

Thanks for any help on this

See example: https://github.com/yvesvanbroekhoven/get-your-instagram-user-id

Hello,

So I have got the point of changing the jquery instagram plugin to publish the photos into a UL list instead of divs. That was fairly straight forward.

Next I installed the "Animated Responsive Image Grid" from this source: http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/

In their plugin they take that UL list of images, strip the image from the li and add it as an image background to the a:link that is created. Again this works fine if there is a list of static images... but not when that list is generated by the instagram plugin.

But why? - it is still a list with an image and a src that can be stripped by the responsive image plugin and added to the a:link as a background-image...

My query is this:

How would you guys/gals merge these two plugins so you get al the functions/animations of the responsive grid with a list of images that are being automatically generated by the instagram plugin?

I'm receiving a 400 error about about 40% of the time with my app. Mind taking a look? I'm not really sure what the problem is...

http://www.visuallybs.com/maps/happenings/

https://github.com/rsudekum/Happenings

Thanks!

Hi, I'm not an advanced JS coder, but trying to muddle through...

I'm looking for a way to "approve" the photos that appear in my gallery using this plugin. I thought perhaps I could do this by liking any hashtagged photos as a method of approval.

Is there a way to utilize this plug-in to return photos with both a hashtag AND a true "user_has_liked" key? I am using an oauth access token for the appropriate account, so I believe I have the user_has_liked key at my disposal (according to the Instagram API documentation). I just don't know how to write it into this javascript as a condition.

Thanks!

i want to display 5 items only. how can i do that?

The plugin should trigger events for:

• load
• complete

See also #21

if you put in bower minified version developer in development mode can debug.
there are tool as bindep making all after.

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?

Hello,

does anyone know why I get a correct likes count for a photo, let's say 11 for example, and then in the following array containing the likes I only have 3 or 4 cells, and not all the 11 likes?

It happens with all the photos I try to retrieve.

Thanks for your help.

Matt

I have this installed, but I can't get anything when I call for userId.

Here is my call to the function:

And my div:

It doesn't populate.

Add Grunt to run tests, to compile the script, etc.

See also #3.

See http://miniboilerplate.com/

/cc @matthieua

http://bloggemdano.blogspot.com/2012/01/testing-jquery-plugin-with-expectthat.html

Hello

It seems that there is a limit where I cannot load more images. I read another issue here where it said that since some instagram-photos are private, it won't always output as many images as specified. But even if I put something like 1000, there seems to be a limit besides that.

Is it possible to make another requst to load more images and this way create infinite scroll type behaviour?

Thank you!

No matter what tag I use, nothing works?

Here's the .js file:

http://yyy.comuf.com/jquery.instagram.js

And the script:

$(function() {
$(".instagram").instagram({
hash: 'op'
, clientId: '17329093'
});
});

Hello.

By default photos returned by Instagram use http, like "http://distilleryimage5.s3.amazonaws.com/some_photo.jpg". Is there any way to instruct Instagram API to return photos using https, not http?

Do you have a suggestion for hiding the accesstoken and userID from being output onto the page when using this? I don't think users would really like that info to be naked in their site code. Do you have examples of this being used publicly. I noticed the demo only uses the clientID which is fine because you can limit your Client by domain, but not so when pulling info from a personal account.

Any suggestions or examples would be appreciated. Thanks for putting this together, great work overall!

When I implement this plugin using a hash tag to pull a feed with a "more" button it works beautifully. However, when I try to get a feed of images based on latitude and longitude coordinates (again, with a more button) I get this error in the console:

Uncaught TypeError: Cannot read property 'next_url' of undefined

And of course, the more button doesn't work (just throws this error over and over again as you click it, and it's permanently stuck on "Loading...").

Any ideas what might cause this behavior? In both cases I implemented the plugin in exactly the same way, just swapped the hash option for the search: {lat/lng} options. I'm working locally at the moment so I can't provide a link.

Thanks!

Hey.

Thanks for your great work. I have tried to show the likes and comments under the images without any good results. I have looked at this site. http://www.transparentspeaker.com/ and really liked there solution but haven get it to work by my own.

Do you have any tips how i can get this to work?

---- i solved it---

Best regards Henrik

Response:

next_max_id and min_id are deprecated for this endpoint; use min_tag_id and max_tag_id instead

I think there should be the ability to build your own anchor if you'd like and be able to overwrite the settings. So instead of using

settings = {
  // ...
  , photoLink: true
};

You allow for the ability to override or not. Current it just says,

if (settings.photoLink) {
  innerHtml = $('<a>')
    .attr('target', '_blank')
    .attr('href', photo.link)
    .append(innerHtml);
}

which only allows for bool.

And now that I have this script on CDNjs (http://cdnjs.com), vanilla copies may be preferred, rather than custom hacks to source code.

I have set the show to 20 and it only shows 14. Set it to show 2 and it only shows 1.

my version of your plugin. http://pastebin.com/iX4vjheA

I am not sure why, but it does not work at all =(
Example code is not working, i see the request to instagram api but nothing is loaded
Also installed bower component, does not helped much. I am not a pro developer, but using the example and legal instagram auth token, client id does not make it happen

Is this possible?

The first method that comes to mind is:

userId: ['foo', 'bar'],
hash: 'hipster'

Would that be supported? If not, any suggestions as how to go about it?

Looks like this

https://api.instagram.com/v1/tags/?callback=jQuery1830384592188289389_1362287165365&_=1362287165377

It says the server didn't find anything there, not sure if they recently updated their url structure or something but I'm not getting anything back. I made sure my userId and secret are there.