Search…

X3 Photo Gallery Support Forums

Search…
 
hardliner
Experienced
Posts: 134
Joined: 22 Jul 2011, 10:15

Re: Instagram feed

30 Oct 2018, 08:21

I found a easy way to generate Access Token:

http://instagram.pixelunion.net/

I found under this Post the URL:
https://stackoverflow.com/questions/483 ... is-invalid
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Instagram feed

30 Oct 2018, 08:30

hardliner wrote: I found a easy way to generate Access Token:
http://instagram.pixelunion.net/
That's useful. Still kinda sucks that one needs to create an "app" from Instagram > Developer section and then ALSO use a 3rd party service to create an access_token, which Instagram could decide to terminate. Why can't one create an access token from Instagram. Just don't like this if we are to consider creating a built-in Instagram plugin.
 
hardliner
Experienced
Posts: 134
Joined: 22 Jul 2011, 10:15

Re: Instagram feed

30 Oct 2018, 08:46

I can't figure out why the client ID is not identical to the application I was using via Pixel Union in the Developer menu.

Best Regards
hardliner
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Instagram feed

30 Oct 2018, 09:33

Not quite sure what you mean. clientID and accessToken are two separate credentials. You need BOTH to run the instafeed JS plugin.
 
hardliner
Experienced
Posts: 134
Joined: 22 Jul 2011, 10:15

Re: Instagram feed

30 Oct 2018, 10:00

If I go through PixelUnion I don't need an application I have to create.
I click on the link at PixelUnion, and it generates the token using another client ID. Which Client ID was used there?
I only see the client ID if I drive over the link or I would copy the link into a text file. This would mean you only need the generated token and your username to implement it on your site.
 
hardliner
Experienced
Posts: 134
Joined: 22 Jul 2011, 10:15

Re: Instagram feed

30 Oct 2018, 19:53

I have implemented on my Sandbox Website!!

http://www.hardliner.ist-online.ws/Instagram/

Well Done 

Kat, you integrated Instagram into Imagevuex. How did you manage to open the images on your page as a popup and not jump to the Instagram page?

Best Regards
Danjel Rojka
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Instagram feed

30 Oct 2018, 23:40

Good job. A few things: You have added the javascript twice, once in Settings > Custom > Head, and once in your x3_load_page custom function (which triggers for each page even if the instagram isn't there). I recommend this:

1. Go to Settings > Custom > Custom <head> and replace your code with this. Better and easier to load it absolutely from a fast CDN.
Code
<script src="https://cdn.jsdelivr.net/npm/instafeed.js@1.4.1/instafeed.min.js"></script>
2. REMOVE the x3_load_page() function you added to Settings > Custom > Javascript. Just COPY what you had there for reference. You don't need the code there, because it's only supposed to trigger for one page and therefore it is easier to add it directly on the page.

3. In the page > Content section, BELOW where you have <div id="instafeed" ></div>, add your code like this:
Code
<script>
var feed = new Instafeed({
  target: 'instafeed',
  get: 'user',
  limit:'16',
  userId: '4478435963',
  accessToken: '4478435963.1677ed0.53de36d999d845f3bec54a4de102ad5e',
});
feed.run();
</script>
To get POPUP or change the layout in any way, you need to use the TEMPLATE option. Not too difficult, except then you need to change the resolution setting also, so that it opens larger images. Which means you might need to create a grid layout. This plugin isn't really too flexible, as it doesn't allow you to load a different image for 1) the grid and 2) the popup. They will have to be the same.
Code
<script>
var feed = new Instafeed({
  target: 'instafeed',
  get: 'user',
  limit:'16',
  userId: '4478435963',
  accessToken: '4478435963.1677ed0.53de36d999d845f3bec54a4de102ad5e',
  resolution: 'standard_resolution',
  template: '<a rel="mypopup" target="_blank" href="{{link}}" data-popup data-title="{{caption}}"><img src="{{image}}" alt="{{caption}}" /></a>'
});
feed.run();
</script>
 
hardliner
Experienced
Posts: 134
Joined: 22 Jul 2011, 10:15

Re: Instagram feed

31 Oct 2018, 04:32

Hello and good Morning Karl,

but the popup to display the images doesn't work. Instagram rejected it.
And also the Resoltion parameter distorts the image.

Regards
Danjel
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Instagram feed

31 Oct 2018, 05:16

but the popup to display the images doesn't work. Instagram rejected it.
Sorry, you need to point HREF to the {{image}} not the {{link}} if you want to open in popup
Code
template: '<a rel="mypopup" target="_blank" href="{{image}}" data-popup data-title="{{caption}}"><img src="{{image}}" alt="{{caption}}" /></a>'
And also the Resoltion parameter distorts the image.
If you set standard_resolution, it will load images at original aspect (non-square). Having said that, I see no reason why they would appear distorted, unless you have some custom CSS that sets width and/or height. Personally, I would implement a block grid layout, but you will still get NON-square images if using standard_resolution. The only reason @Kat's images are all square, is because originals are square also. I already mentioned this plugin has some limitations ... you can choose image size, but the image opened in the popup will will be the same as the image in your layout, eg the resolution you have selected.

 
 
hardliner
Experienced
Posts: 134
Joined: 22 Jul 2011, 10:15

Re: Instagram feed

31 Oct 2018, 05:41

Okay, I guess that'll be a limit. Landscape photos will be shrunk to the square format without paying attention to the aspect ratio.
 
hardliner
Experienced
Posts: 134
Joined: 22 Jul 2011, 10:15

Re: Instagram feed

31 Oct 2018, 05:48

If I set the resolution to thumbnail in the script, it shows me the images in the right ratio. Only then it opens the pictures in the popup in the small size and not in the standard resolution as it would be better.
Using Custom CSS I can change the resolution but then the images are compressed in landscape format. If one could open the popup in the standard resolution but the resolution could be set in the overview at thumbnail it would be great.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Instagram feed

31 Oct 2018, 06:11

Yes, that would be great. This is not an X3 plugin. If we create our own Instagram plugin, then we will definitely create better options.
 
Kat
Experienced
Topic Author
Posts: 45
Joined: 26 Sep 2016, 10:46

Re: Instagram feed

31 Oct 2018, 07:27

hardliner wrote: Okay, I guess that'll be a limit. Landscape photos will be shrunk to the square format without paying attention to the aspect ratio.
Hi Danjel,

I struggled also with this problem. My template is on "standard resolution"
My images  opened on the X3 popup at the right ratio but then, the thumbnails img was also on the same ratio,  landscape, vertical or square.

If i remember right i added as a workaround, in the template, as an "img src", a transparent image the size of the thumbnail, and as a background the url of the image.

I saw on your instagram page that you made big steps already !

Kati
 
hardliner
Experienced
Posts: 134
Joined: 22 Jul 2011, 10:15

Re: Instagram feed

31 Oct 2018, 08:57

@Kati how did you make it that you can see the number of Likes and comments when you move the mouse over them?

And how did you integrate your avatar picture into the headline?

Regards
Danjel
 
Kat
Experienced
Topic Author
Posts: 45
Joined: 26 Sep 2016, 10:46

Re: Instagram feed

31 Oct 2018, 10:18

hardliner wrote: @Kati how did you make it that you can see the number of Likes and comments when you move the mouse over them?

And how did you integrate your avatar picture into the headline?

Regards
Danjel
 You can upload an image into your X3 custom/files/images or grab it from your instagram account,  and add it in your instagram page>content with custom html and css. 

For the like and comments i added overlay div on thumbnails. You can find templating options and instructions here   https://github.com/stevenschobert/insta ... templating