Kirby3 Instagram feed
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)
Options
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',
],
];
Usage
-
find a place to add the
instagramLinkblueprint -
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)
Examples
Add linkInstagram to blueprint
title: Site
preset: pages
unlisted: true
fields:
linkInstagram: linkInstagram
After the first fetch you can start parsing the feed
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...
limit(5) as $media): ?>
">
$page->title() ?>h1>
if(count(instagramFeed())): ?>
foreach(instagramFeed() as $media): ?>
<a href=" $media['permalink']; ?>" target="_blank">
<img src="assets/instagram/media/ $media['id']; ?>.jpg" width="100" height="100" />
a>
endforeach; ?>
foreach(instagramFeed()->limit(5) as $media): ?>
<a href=" $media['permalink']; ?>" target="_blank">
<img src="assets/instagram/media/ $media['id']; ?>.jpg" width="100" height="100" />
a>
endforeach; ?>
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']
Setup cron
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)
Plugin installation
Download
Download and copy this repository to /site/plugins/kirby3-instagram.
Git submodule
git submodule add https://github.com/genxbe/kirby3-instagram.git site/plugins/kirby3-instagram
Composer
composer require genxbe/kirby3-instagram
Facebook app configuration
Detailed instructions on: https://elfsight.com/blog/2016/05/how-to-get-instagram-access-token/ (step 1-2)
- Create a Facebook app
- Setup Instagram Basic display
- Important, your website OAuth url must be added as a valid OAuth redirect URI!
- All other url's (deauthorize & data deletion) don't really matter, you can enter your own website there.
- Don't request an app review
Adding test users
Detailed instructions on: https://elfsight.com/blog/2016/05/how-to-get-instagram-access-token/ (step 3)
- Add the feed you want to show as instagram test user
- Make sure your test users accepts the test invitation
Authenticate the instagram user and request User token
Follow instructions on https://www.notion.so/genxbe/Link-instagram-with-your-website-9aa72c4961074cb4b4f9b5d1e6322e36
Usage on multiple websites
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.
License
MIT
2.3k Jan 1, 2023
16 Dec 9, 2022
1.8k Apr 14, 2022
0 Jul 24, 2021
326 Nov 3, 2022
58 Nov 30, 2022
7 Dec 30, 2022
5 Dec 20, 2022
4 Feb 20, 2020
1 Nov 2, 2021
1 Dec 3, 2021
5 Sep 17, 2022
141 Dec 31, 2022
6 Dec 20, 2022
4 Dec 29, 2022
4 Nov 21, 2022
0 Jun 29, 2022
310 Jan 2, 2023
18 Aug 17, 2021
6.2k Jan 5, 2023