genxbe / kirby3-instagram

Fetch instagram photos without the need for app aproval
MIT License
50 stars 1 forks source link
instagram instagram-feed kirby3 kirby3-cms kirby3-plugin php

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

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...

<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.

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)

Adding test users

Detailed instructions on: https://elfsight.com/blog/2016/05/how-to-get-instagram-access-token/ (step 3)

Authenticate the instagram user and request User token

Follow instructions on https://xdocs.notion.site/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

Credits