PHPackages lerni/instagram-basic-display-feed-element - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [API Development](/categories/api) 4. / 5. lerni/instagram-basic-display-feed-element ActiveSilverstripe-vendormodule[API Development](/categories/api) lerni/instagram-basic-display-feed-element ========================================== Instagram Feed for Silverstripe Elemental features Basic Display PHP API (instagram\_business\_basic scope) 6.0.1(1mo ago)38811BSD-3-ClausePHP Since Jul 28Pushed 1mo ago3 watchersCompare [ Source](https://github.com/lerni/instagram-basic-display-feed-element)[ Packagist](https://packagist.org/packages/lerni/instagram-basic-display-feed-element)[ Docs](https://github.com/lerni/instagram-basic-display-feed-element)[ RSS](/packages/lerni-instagram-basic-display-feed-element/feed)WikiDiscussions 6.x Synced yesterday READMEChangelog (3)Dependencies (5)Versions (6)Used By (0) Silverstripe instagram-basic-display-feed-element ================================================= [](#silverstripe-instagram-basic-display-feed-element) Instagram feed in a dnadesign/silverstripe-elemental-element. It utilizes [espresso-dev/instagram-php](https://github.com/espresso-dev/instagram-php) and caches the API-response for performance reasons. Since different scrapers lead to all sorts of problems - mostly cookie/session related, this module came to existence. `appId` & `appSecret` are stored in `yml`-config or `.env`, the rotating token in DB. [![License](https://camo.githubusercontent.com/b3775a2de17853a90995faa104f941eef3ad3c40cc89e34b8b1eaea014614d4e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d425344253230332d2d436c617573652d626c75652e737667)](LICENSE) [![Instagram feed module screenshot](docs/images/lippundleuthold.webp)](docs/images/lippundleuthold.webp)Example in action from [Lipp&Leuthold](https://lippundleuthold.ch/info/#instagram) Installation ============ [](#installation) Composer is the recommended way installing Silverstripe modules. ``` composer require lerni/instagram-basic-display-feed-element ``` - Run a `dev/build` Requirements ------------ [](#requirements) - Silverstripe 6.x - dnadesign/silverstripe-elemental - espresso-dev/instagram-php 1.x Configuration ------------- [](#configuration) You'll need to set up a [FB App](https://developers.facebook.com/docs/instagram-platform) and set `appId` & `appSecret` ([Instagram not FB](https://stackoverflow.com/questions/60258144/invalid-platform-app-error-using-instagram-basic-display-api)). `redirectUri` will be `DYNAMICALLY-SET-HOST.TLD/_instaauth` but you can also set it explicitly with a domain per yml-config. Make sure to configure the correct values (e.g. dev-url) in your FB App! If no token is generated yet, you'll find a link to generate one in the settings tab of the element. The token 'll be renewed automatically (on request basis) if older than 30 days. 1. Install the module 2. Create a [FB App](https://developers.facebook.com/docs/instagram-platform) use `https://DOMAIN.TLD/_instaauth` as redirectUri - create an Instagram app on [https://developers.facebook.com/apps/?locale=en\_US](https://developers.facebook.com/apps/?locale=en_US) - click on "Create App" - Filter all - choose "Manage messaging & content on Instagram" - On Dashboard personalize "Messaging und Content" - Copy "Instagram app ID" add it to KRAFT\_INSTAFEED\_APP\_ID in .env - Copy "Instagram app secret" add it to KRAFT\_INSTAFEED\_APP\_SECRET in .env - Make sure "instagram\_business\_basic" is set - Set "Callback URL" to [https://DOMAIN.TLD/\_instaauth](https://DOMAIN.TLD/_instaauth) - Set "Verify token" to the same as `KRAFT_INSTAFEED_VERIFICATION_TOKEN` in .env (something random) - "Set up Instagram business login" you can use [https://DOMAIN.TLD/\_instaauth](https://DOMAIN.TLD/_instaauth) again Sometimes you just can't - try reloading, different browser or do some other black magic 🤷 - add Instagram-Tester (Roles → Add → Instagram-Tester) - Login on Instagram & accept/confirm - Settings - Website Permissions - Apps and Websites - Accept Tester Invitations 3. Add `appId`, `appSecret` & `verificationToken` in yml-config or `.env` like below & `?flush` - make sure to use the credentials from the Instagram settings, not the general App Settings! 4. Create an Instagram Feed Element & click on the link in the settings tab to authenticate 5. Reload CMS to see the generated token 6. That's it. The token will be updated if older than 30 days on request basis. This means, if a token is older than 30 days and from then on no request is made (element never shown to any visitor), the token invalidates and a warning is thrown. To fix this, delete all tokens and regenerate one with the link provided in CMS. ``` Kraftausdruck\InstagramFeed\Control\InstaAuthController: credentials: appId: '2598599940246020' appSecret: '7e29795bva6d352e3286769ff3a3a836' verificationToken: 'SetThisToSomethingRandom' # redirectUri: 'https://example.tld/_instaauth' ``` ``` KRAFT_INSTAFEED_APP_ID='2598599940246020' KRAFT_INSTAFEED_APP_SECRET='7e29795bva6d352e3286769ff3a3a836' KRAFT_INSTAFEED_VERIFICATION_TOKEN='SetThisToSomethingRandom' ``` Styling ======= [](#styling) Example styling with text as hover overlay. CSS with a bit PostCSS magic``` .instafeed { display: flex; flex-wrap: wrap; margin-left: -1px; margin-right: -1px; width: calc(100% + 2px); a { outline: none; overflow: hidden; position: relative; display: block; width: auto; height: 500px; @media (max-width: 980px) { height: 400px; } @media (max-width: 480px) { height: 300px; } figure { height: 100%; margin: 0; img { object-fit: cover; margin-bottom: 0; max-width: none; width: 100%; height: 100%; } figcaption { position: absolute; inset: 0; opacity: 0; transition: opacity 120ms linear; z-index: 1; color: var(--white); font-size: var(--font-size--small); padding: calc(var(--lh) * 1em); display: flex; flex-direction: column; background-color: rgba(0,0,0,.8); overflow-wrap: break-word; word-wrap: break-word; span[data-icon="instagram"] { transition: transform 120ms linear; transform: scale(.4); width: 1lh; height: 1lh; background-image: svg-load("instagram.svg", stroke=#fff); margin: auto auto 0 auto; } } @media (hover: hover) { &:hover { figcaption { opacity: 1; span[data-icon="instagram"] { transform: scale(1); } } } } } video { height: 100%; width: 100%; } @media (hover: none) { &:focus, &:focus-within, &:active { figure figcaption { pointer-events: none; opacity: 1; span[data-icon="instagram"] { transform: scale(1); } } } } } } ``` Troubleshooting =============== [](#troubleshooting) If things go wrong, you may want to check [Facebook Platform Status](https://metastatus.com/). ### Health Score 45 — FairBetter than 91% of packages Maintenance90 Actively maintained with recent releases Popularity21 Limited adoption so far Community9 Small or concentrated contributor base Maturity48 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~256 days Total 5 Last Release 46d ago Major Versions 1.0.0 → 2.0.02026-05-14 2.0.0 → 6.0.02026-05-14 ### Community Maintainers ![](https://www.gravatar.com/avatar/e68b89567976eada21fddc5e776f4adcbe15ad846150cbcde6eb24bc185a8e5f?d=identicon)[lerni](/maintainers/lerni) --- Top Contributors [![lerni](https://avatars.githubusercontent.com/u/472115?v=4)](https://github.com/lerni "lerni (39 commits)") --- Tags elementalinstagramsilverstripeinstagramsilverstripeelemental ### Embed Badge ![Health badge](/badges/lerni-instagram-basic-display-feed-element/health.svg) ``` [![Health](https://phpackages.com/badges/lerni-instagram-basic-display-feed-element/health.svg)](https://phpackages.com/packages/lerni-instagram-basic-display-feed-element) ``` ### Alternatives [silverstripe/cms The SilverStripe Content Management System 5253.6M1.4k](/packages/silverstripe-cms)[dnadesign/silverstripe-elemental Elemental pagetype and collection of Elements 1101.1M309](/packages/dnadesign-silverstripe-elemental)[silverstripe/admin SilverStripe admin interface 262.8M383](/packages/silverstripe-admin) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)