Fetch instagram photos without the need for app aproval. This plugin will download the photos and/or video thumbnails to local storage. All media will be stored in a json file.
Only the 20 latest photo's will be stored.
This plugin uses the basic user access token which you can generate for all testusers of your instagram app. (https://developers.facebook.com/docs/instagram-basic-display-api/overview#user-token-generator)
Required are the client_id
(Instagram App ID) and client_secret
(Instagram App Secret).
All other options are optional.
# site/config/config.php
return [
'genxbe.instagram' => [
'client_id' => '',
'client_secret' => '',
'assetFolder' => 'instagram',
'mediaFolder' => 'media',
'db' => 'instagram.json',
],
];
find a place to add the instagramLink
blueprint
Add your client_id and client_secret to your config file, all other options are optional.
Don't forget to add your website redirect uri to the Valid OAuth Redirect URIs
You can add multiple website and thus use 1 app for all of your websites
Format of the url you need to add is https://yoursite.com/axi/instagram
Add the instagram account you want to use to the test users and ask them to accept the invite (instructions below)
Ask your user to enable the instagram link on the website, when this process is completed a first time fetch will already be done.
After the user has linked his Instagram you can start fetching via php site/plugins/kirby3-instagram/fetch.php
If you want to have regular updates you need to schedule this command via the cron. I would advise to do this every 30 or 60 minutes so you don't overload your API rate limit. (More info on https://developers.facebook.com/docs/graph-api/overview/rate-limiting/#platform-rate-limits)
title: Site
preset: pages
unlisted: true
fields:
linkInstagram: linkInstagram
You can check for a count of the feed to hide the block when no media is available yet.
Since we work with collections you can also use fieldMethods like limit
, filterBy
, etc...
<h1><?= $page->title() ?></h1>
<?php if(count(instagramFeed())): ?>
<?php foreach(instagramFeed() as $media): ?>
<a href="https://github.com/genxbe/kirby3-instagram/blob/master/<?= $media['permalink']; ?>" target="_blank">
<img src="https://github.com/genxbe/kirby3-instagram/raw/master/assets/instagram/media/<?= $media['id']; ?>.jpg" width="100" height="100" />
</a>
<?php endforeach; ?>
<?php foreach(instagramFeed()->limit(5) as $media): ?>
<a href="https://github.com/genxbe/kirby3-instagram/blob/master/<?= $media['permalink']; ?>" target="_blank">
<img src="https://github.com/genxbe/kirby3-instagram/raw/master/assets/instagram/media/<?= $media['id']; ?>.jpg" width="100" height="100" />
</a>
<?php endforeach; ?>
<?php endif; ?>
Fields that can be used in the $media array based on the example above.
$media['id']
$media['timestamp']
$media['media_type']
$media['media_url']
$media['caption']
$media['permalink']
$media['username']
$media['thumbnail_url']
Every 30 minutes
*/30 * * * * cd /home/website/website.com/ && php site/plugins/kirby3-instagram/fetch.php
Every hour
0 * * * * cd /home/website/website.com/ && php site/plugins/kirby3-instagram/fetch.php
Faster is possible but do keep your rate limits in mind! (More info on https://developers.facebook.com/docs/graph-api/overview/rate-limiting/#platform-rate-limits)
Download and copy this repository to /site/plugins/kirby3-instagram
.
git submodule add https://github.com/genxbe/kirby3-instagram.git site/plugins/kirby3-instagram
composer require genxbe/kirby3-instagram
Detailed instructions on: https://elfsight.com/blog/2016/05/how-to-get-instagram-access-token/ (step 1-2)
Detailed instructions on: https://elfsight.com/blog/2016/05/how-to-get-instagram-access-token/ (step 3)
Follow instructions on https://xdocs.notion.site/Link-instagram-with-your-website-9aa72c4961074cb4b4f9b5d1e6322e36
You can use your 1 app for multiple sites by adding multiple OAuth redirect URI, please do keep your rate limit in mind. You can always create multiple facebook apps do divide the rate limit.
MIT