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 1.0.0(2y ago)37951BSD-3-ClausePHP Since Jul 28Pushed 6mo 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 master Synced 1mo ago READMEChangelog (1)Dependencies (2)Versions (3)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. **As of December 2024 is used and not anymore. `instagram_business_basic` scope is in use. A business- or creator-account is needed for API-access. ATM this only works with dev-master.** [![License](https://camo.githubusercontent.com/b3775a2de17853a90995faa104f941eef3ad3c40cc89e34b8b1eaea014614d4e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d425344253230332d2d436c617573652d626c75652e737667)](LICENSE.md) [![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 5.x - dnadesign/silverstripe-elemental - espresso-dev/instagram-php 1.x Configuration ------------- [](#configuration) You'll need to setup a [FB App](https://developers.facebook.com/docs/instagram-basic-display-api/getting-started/) for basic display 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 explicit 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 setting-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-basic-display-api/getting-started/) use `https://DOMAIN.TLD/_instaauth` as redirectUri - create an Instagram app per other services (Sonstiges -> Business) on - add Instagram to the App - add Instagram-Tester (Rolles add -> Instagram-Tester) - Login on Instagram & accept/confirm - Settings - Website-Berechtigungen - Apps und Websites - Accept Tester-Einladungen 3. Add `appId` & `appSecret` in yml-config or `.env` like below & `?flush` - make sure to use those from the "Instagram", not "App-Settings"! 4. Create an Instagram Feed Element & click on the link in the setting-tab to authenticate - ***dev-master** create a token in developers.facebook.com and add it manually to the element under setting, since ATM creating one per link throws: "Ungültige Anfrage: Anfrageparameter sind ungültig: Invalid redirect\_uri". May it just works in live mode?* 5. Reload CMS to see the generated token 6. That's it. Token 'll be updated if older than 30 days on request basis. This means, if a token is older than 30 days and from there on no request is made (element never shown to any visitor), the token invalidates and a warning is thrown. To "fix" this, you'll need to 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 SCSS square-styles with text as hover overlay. [Feather Icons](https://feathericons.com/) are suggested - you need to load those yourself. ``` $lh: 1.41; $white: #fff; .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; @include breakpoint($Lneg) { height: 400px; } @include breakpoint($Sneg) { height: 300px; } figure { height: 100%; margin: 0; img { object-fit: cover; margin-bottom: 0; max-width: none; width: 100%; height: 100%; } figcaption { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity 120ms linear; z-index: 1; color: $white; font-size: .8em; padding: #{math.div($lh,2)}em; display: flex; flex-direction: column; background-color: rgba(0,0,0,.8); span[data-feather="instagram"] { transition: transform 120ms linear; transform: scale(.4); width: 1.4em; height: 1.4em; background-image: svg-load('../images/svg/instagram.svg', stroke=#{$white}); margin: auto auto 0 auto; } } &:hover { figcaption { opacity: 1; span[data-feather="instagram"] { transform: scale(1); } } } } video { height: 100%; width: 100%; } } } ``` Troubleshooting =============== [](#troubleshooting) If things go wrong, you may want to check [Facebook Platform Status](https://metastatus.com/). ### Health Score 33 — LowBetter than 75% of packages Maintenance46 Moderate activity, may be stable Popularity21 Limited adoption so far Community9 Small or concentrated contributor base Maturity45 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 ~825 days Total 2 Last Release 200d ago Major Versions 1.0.0 → 6.x-dev2025-10-30 ### 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 (34 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) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)