InstagramBasicDisplayApi

[nbcommunication]

The API issue with account_type has been resolved, so I've reinstated this in the module, version 1.3.2.

[jonatan]

18 hours ago, nbcommunication said:

Hi @jonatan,

I'm not sure what more I'd be able to do to directly help here. At this point your best bet is to add a bunch of logging to try and determine where the problem is occurring.

For example:

// Attach listener
console.log("Should only log once on init");
$(window).scroll(this.debounce(function() {
  console.log("Probably not needed, this will log during scrolling");
  if(!this$1.busy && $(window).scrollTop() == $(document).height() - $(window).height()) {
    console.log("User has reached the bottom.");
    // When this is logged I should really only see one at the time due to the debounce function and the 'busy' switch.
    this$1.get();
    // Similar logging to be added to get()
  }
}, 256));

<?php

$instagram = $modules->get("InstagramBasicDisplayApi");

// The next url is stored in session. The code below will log it.
$instagram->log($session->getFor($instagram, "next$page->id"));

if($config->ajax) {
    $instagram->log("You may want to log here to test how often AJAX requests are made");
    header("Content-Type: application/json");
    echo $instagram->getMedia(); // ["json" => true] is inferred by $config->ajax
    die();
}

By using logging to trace the process, you will hopefully be able to figure out what is causing the issue. I suspect it is still the listener.

Cheers,

Chris

HEUREKA!!!  ? ? ✨

No idea what the difference is... but I updated the code and without even looking at the log it just worked perfectly now!! ????

Tadaaaa:

I am so so so glad for all of the massive help that you've given me Criss @nbcommunication!!! ?

Really could never have gotten even close to getting it working without you and the nice module! I am so glad! 

Can I please buy you a beer or a coffee?? ?☕I'd love to thank you somehow! ? 

All the best,
Jonatan.

[jonatan]

Oooonly thing now though, is that the loading element still keeps showing up, when there's no more content to load ?

[jonatan]

21 minutes ago, jonatan said:

Oooonly thing now though, is that the loading element still keeps showing up, when there's no more content to load ?

Nevermind,

Fixed it:

var postnum = <?php echo $postsnum; ?>;
// Show spinner
if (this$1.total < postnum){
this$1.$loading.show();
}

?

[nbcommunication]

Hi @jonatan,

Nice one! No thanks required - you've highlighted issues which has made the module significantly better!

Cheers,

Chris

[nbcommunication]

Hi,

Update to 1.3.3 - tweak to how the cache name/key is generated, shouldn't effect anything...

Cheers,

Chris

[jonatan]

@Criss Nice! Updated!

Works perfectly fine ?

[jonatan]

Hi @nbcommunication / Criss !

I've gotten myself out into some barba.js fading page transitions. Which means.. the DOM isn't fully reloaded.. Which means.. using the fabulous module of yours, when the instagram page is shown, the pagination script runs, but, when I then go to another page, and then back to the instagram page, the pagination is not reset, so instagram.init() starts out again, but, not all fresh, it loads the second batch of media and not the first batch again – as it would have done on a proper page refresh and new HTTP request. 

So, can you think of some smart way to reset the pagination? ...a.k.a this: (ehh.. I think?.. maybe? right? maybe?) 

$this->wire("session")->remove($this, $this->getNextKey());

– using a javascript function? 

 

My idea is that then I would run that function every time the Instagram page is faux-DOM-loaded (js-barba-magic-replaced-without-proper-DOM-reload-and-hence-no-HTTP-requests), right before the instagram.init() function ? 

 

Does it make any sense at all..? ?

 

All the best,
Jonatan  

[nbcommunication]

Hi @jonatan,

You would probably need to do something like:

var resetPagination = new Promise(function (resolve, reject) {

	var xhr = new XMLHttpRequest();
	xhr.open("GET", window.location.href);

	oReq.addEventListener(xhr, "load", function() {
		if (xhr.status === 0 || xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
			resolve(xhr);
		} else {
			reject();
		}
	});

	oReq.addEventListener(xhr, "error", function() {
		reject();
	});

	oReq.addEventListener(xhr, "timeout", function() {
		reject()
	});

	xhr.send();
});

resetPagination.then(function() {
	instagram.init();
}, function() {
	// Error
});

If I remember correctly, this kind of plain Javascript request doesn't actually register as an ajax request, so $config->ajax returns false, and the pagination will be reset.

I'm not sure this is the best way to go though - I'd probably be trying to store the requested data in an array/object and then just pull it from there when the page changes e.g.

var requests = {},
var items = [];

// On page change
var page = "page" + pageNum; // whereever you get this info from
if(page in requests) {
  items = requests[page];
} else {
  items = "an AJAX request to get the next page of items";
  requests[page] = items;
}

It will probably require a bit of reworking of your code, but it's a far better way to go. You shouldn't have to request the data more than once - store it!

Hope that helps,

Chris

[jonatan]

@nbcommunication Thanks a million Chris! ? And thank you for the tip. You're the best :)

 

I'll try and see if I can get it working. 

 

All the best, 

Jonatan 

[jonatan]

So.. after trial and error, and trial, and error, and more trial, and.. fails and fails and fails... stupidly tumbling around in the dark.. because my js skills / understanding are about as good as my russian skills (limited to "da" that is). But... yay! I discovered something brilliant.

So.. just in case anyone's intereste in barba.js and the Instagram Basic Display API combo cocktail ?, (and perhaps isn't any properly js sufficient...), here goes how:

I found out after confusingly and hopingly staring  at the barba.js docs for any miracles, I finally discovered this https://barba.js.org/docs/advanced/strategies/#Cache :

 

barba.init({
    cacheIgnore: ['/instagram'],
});

And that does the trick! 

But again, thank you @nbcommunication once again, for being such an awesome and so helpfu Processwirian !  ❤️

Have a great weekend!  ?
Jonatan 

[kkalgidim]

I am getting error when i try to install it from admin panel module install section.

Compile Error: Arrays are not allowed in class constants (line 58 of /home/alanyaduyuru/domains/alanyaduyuru.com/public_html/site/modules/InstagramBasicDisplayApi/InstagramBasicDisplayApi.module)

line 58 refers to

    const mediaTypes = [
        'carouselAlbum' => 'CAROUSEL_ALBUM',
        'image' => 'IMAGE',
        'video' => 'VIDEO',
    ];
 

Is it related with instagram update or just related with me?

I am using fresh installed multilanguage profile if its matter.

@nbcommunication

 

[nbcommunication]

Hi @kkalgidim,

What PHP version are you running?

Cheers,

Chris

[nbcommunication]

@kkalgidim - looks like PHP < 5.6. Arrays in class constants are allowed from 5.6 onwards. You really should be on 7.2 or above!

Given that ProcessWire supports 5.4 and above, I'll look into tweaking this so you can install.

Cheers,

Chris

[kkalgidim]

Apache 2.4.41	Running
DirectAdmin 1.60.1	Running
Exim 4.93.0.4	Running
MySQL 5.5.31	Running
Named 9.8.2rc1	Running
ProFTPd 1.3.5b	Running
sshd	Running
dovecot 2.3.9.2 (cf2918cac)	Running
Php 5.5.38	Installed

[nbcommunication]

That didn't take long - @kkalgidim, if you re-download (should now be version 1.4.1) then hopefully that'll work for you.

[kkalgidim]

It works now.

Thanx for fast solution!

[DV-JF]

@nbcommunication

Hey Chris,

just wanted to say thanx for this module!!!

With ProcessWire 3.0.164 it worked out of the box... great readme.md! Is there a way to get you a cup of coffee ☕ ??

Only one short question? After two months, do I have to renew any tokens or so?

 

Many greets, Jens alias DV-JF

[nbcommunication]

Thanks @DV-JF,

The auto-renewal of tokens has been working for me so far, I have 10+ production installs I think.

Where it may not work is if there isn't an API request the week prior to the renewal date. I did limit cache time to 1 week, so I'm hoping this won't happen on production sites. This did happen on my sandbox install which I used for testing the module - came back several months later to a token unable to renew, so just removed then re-added the account.

Therefore, it is a remote possibility that renewal won't happen, but very unlikely on a site that is getting traffic.

No need for coffee, just delighted to get feedback!

Cheers,

Chris

[alexm]

getImages is pulling in videos as well as images.

To check this, I've output the item type in loop and the videos items are showing as images.

I'm running latest version of PW and InstagramBasicDisplayAPI v 1.4.2

[nbcommunication]

Hi @alexmercenary,

getImages() returns images, the main carousel album image, and the poster image of videos. To filter these so it is only IMAGEs you could do something like:

<?php

$images = $modules->get('InstagramBasicDisplayApi')->getImages();
foreach($images as $image) {
  if($image->type !== 'IMAGE') continue;
  echo "<img src=$image->src alt=$image->alt>";
}

I think that getMedia() is maybe the call you are looking for? 

https://github.com/nbcommunication/InstagramBasicDisplayApi#getmediastring-username-int-limit

Cheers,

Chris

[Crowdland Technology]

@nbcommunication Great module congrats! Thank you for your efforts! ?

Some feedback.

We managed to install and set-up the module with minimal hustle, great README! 

We set up the cache policy to one day, So the question is, when the user uploads a new media, will it take up to 24 hours to show on the site? We are still uncertain of that so any input greatly appreciated. 

Also what stroke a bit odd from the naming convention of the functions is that this

// Get 8 images from a specified user
$images = $instagram->getImages('username', 8);

 retrieves not only images information but also videos and albums. Nothing extreme here, just surprised for a moment when we didn't get ONLY images as with 

$videos = $instagram->getVideos('username', 3);

So we switched to 

$instagram->getMedia('username', 12)

And did a switch before outputting the image, which seems to work just fine, as the user has already videos and images online in a public account.

<?php foreach ($insta_media as $media):
    switch($media->type) {
        case 'VIDEO':
            $media_src = $media->poster;
            break;
        default:
            $media_src = $media->src;
            break;
    }
 ?>

Our tester user does not have albums so the question here is how we do set the image src case 'CAROUSEL_ALBUM'? is there an image assigned to the album? we need to get the image of the first child if not? (we are outputting in a custom Carousel if your wondering and we need an image per record)

Thank you so much,

Cheers,

Elissavet from CrowdLand

[nbcommunication]

Hi @Crowdland Technology,

Thanks for the feedback!

2 hours ago, Crowdland Technology said:

We set up the cache policy to one day, So the question is, when the user uploads a new media, will it take up to 24 hours to show on the site? We are still uncertain of that so any input greatly appreciated. 

Yes, this would be the case. I'd advise a cache of 1 hour (3600). The request to the API itself isn't heavy, but there is rate limiting on IGs end which a cache time of an hour helps to manage.

2 hours ago, Crowdland Technology said:

Also what stroke a bit odd from the naming convention of the functions

Yes this is odd, but this is what the Instagram Basic Display API provides. If you request media of the type IMAGE, you also get the poster of media of the type VIDEO and the first image from media of the type CAROUSEL_ALBUM so this is what the module returns. If you only want single image posts, then using getMedia() and then only using items of the type 'IMAGE' is the way to go.

3 hours ago, Crowdland Technology said:

Our tester user does not have albums so the question here is how we do set the image src case 'CAROUSEL_ALBUM'? is there an image assigned to the album? we need to get the image of the first child if not? (we are outputting in a custom Carousel if your wondering and we need an image per record)

getMedia() returns all media, of the three types. IMAGE is accessed through the src property, VIDEO through src (the video) and poster (the thumbnail image) and CAROUSEL_ALBUM through children (all the images in the collection).

I think what you're asking here is that if the tester user did have a CAROUSEL_ALBUM, how do you get just the first image from this?

<?php foreach ($insta_media as $media):
    switch($media->type) {
        case 'VIDEO':
            $media_src = $media->poster;
            break;
     	case 'CAROUSEL_ALBUM':
        	// Just get the first item
        	$media_src = $media->children->first->src;
       		break;
        default:
            $media_src = $media->src;
            break;
    }
 ?>

I haven't tested it, but I'm pretty sure that would get the first image from the album. Worth looking closer at the README as there's a lot there that isn't explicitly explained, but makes sense one you review the code examples ? 

Hope that helps!

Cheers,

Chris

[FuF]

Hi Chris,
just want to thank you for the module - saved me some time - works very well. Thumbs up! ?
cheers Simon

 

[Tyssen]

On 4/8/2020 at 1:43 AM, houseofdeadleg said:

I've installed this module, gone through the directions, generated my token, etc, but when I come to try and add the account I get an error message – "InstagramBasicDisplayApi: Could not add user account".

I'm getting the same error but mine says: "Could not add user account account_name".