potomak / jquery-instagram Goto Github PK
View Code? Open in Web Editor NEWInstagram jQuery plugin
Home Page: http://potomak.github.io/jquery-instagram/
License: MIT License
Instagram jQuery plugin
Home Page: http://potomak.github.io/jquery-instagram/
License: MIT License
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 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?
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.
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.
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'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!
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).
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 !
I have this installed, but I can't get anything when I call for userId.
Here is my call to the function:
<script> $(document).ready(function() { $(".instagram.cid").instagram({ userId: 'my_user_id', show: 5, clientId: clientId }); }); </script>And my div:
It doesn't populate.
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
if you put in bower minified version developer in development mode can debug.
there are tool as bindep making all after.
How would you display the photographer's username alongside the photo?
Thanks so much for this plug in.
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.
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!
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?
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.
Response:
next_max_id and min_id are deprecated for this endpoint; use min_tag_id and max_tag_id instead
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
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
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!
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 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
Refused to execute script from 'https://github.com/potomak/jquery-instagram/raw/master/jquery.instagram.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
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!
Client ID etc are all correct. Nothing changed. Simply stopped working one day? :(
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!
I'm getting a no method 'instagram' from following the sample provided in the Readme. Any suggestions?
$(".instagram").instagram({
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
Is there a way to control the size of the thumbnail?
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.
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
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
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 )
}
})
}
})
});
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 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?
i want to display 5 items only. how can i do that?
Add Grunt to run tests, to compile the script, etc.
See also #3.
See http://miniboilerplate.com/
/cc @matthieua
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
What i am doing wrong ?
Request to pull the: Added setting to specify image size on DamianMullins / jquery-instagram
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'
});
});
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);
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.