{"id":27646034,"url":"https://github.com/in2code-de/instagram","last_synced_at":"2025-10-23T19:22:14.316Z","repository":{"id":43453804,"uuid":"259953737","full_name":"in2code-de/instagram","owner":"in2code-de","description":"Show instagram feed without API in a TYPO3 extension","archived":false,"fork":false,"pushed_at":"2023-12-25T21:46:32.000Z","size":5876,"stargazers_count":21,"open_issues_count":27,"forks_count":15,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-24T01:15:54.130Z","etag":null,"topics":["instagram","typo3","typo3-extension"],"latest_commit_sha":null,"homepage":"https://www.in2code.de/agentur/typo3-extensions/instagram/","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/in2code-de.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-04-29T14:46:27.000Z","updated_at":"2025-03-05T17:00:17.000Z","dependencies_parsed_at":"2023-12-25T22:44:01.281Z","dependency_job_id":null,"html_url":"https://github.com/in2code-de/instagram","commit_stats":{"total_commits":71,"total_committers":7,"mean_commits":"10.142857142857142","dds":0.09859154929577463,"last_synced_commit":"51a0cc471c2e67bfd35fdb327ce05a1ccd9c00d3"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/in2code-de%2Finstagram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/in2code-de%2Finstagram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/in2code-de%2Finstagram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/in2code-de%2Finstagram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/in2code-de","download_url":"https://codeload.github.com/in2code-de/instagram/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250540936,"owners_count":21447428,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["instagram","typo3","typo3-extension"],"created_at":"2025-04-24T01:15:58.209Z","updated_at":"2025-10-23T19:22:14.300Z","avatar_url":"https://github.com/in2code-de.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Show a profile Instagram feed in TYPO3\n\n## Introduction\n\nIn the past we did a lot of research to bypass the original Instagram API. Using the official interface is still pain. \nNow version 6 of this extension respects that Instagram updated their website (some days ago) again and cover it \nagainst image grapping. So, we decided now to use the official API in this extension to still deliver images on our\nwebsite.\nNevertheless we want to make the configuration as easy as possible even if there is some hard stuff for non-developers\nnow. Version 6 has some breaking changes because of the switch to the API now (see details below).\n\n\n## Explanation\n\nThis extension is splitted into two parts. A scheduler where you can import an instagram feed into the database on\nthe one hand and on the other hand there is a plugin where you can show the feed on your page. The split gives us the\npossibility to still show images even if the interface is broken and in addition there are no speed limitations with \nthis kind of architecture.\nBecause of the guidelines of Instagram/Facebook the first step to use the API must be done by yourself and by hand. \nYou have to add a facebook developer account and add a new \"app\". After that you have to get the token by yourself in a \nbrowser. Once you have did this, the token can be refreshed automatically. \nSo you do not have to make the whole initialization again. See details\nbelow.\n\n\n## Installation\n\n`composer require in2code/instagram`\n\n\n## Configuration\n\n### The facebook and instagram part\n\n\u003e [!NOTE]  \n\u003e * The Instagram API is only available for Instagram Business accounts. If you have a private account, you have to switch to a business account first.\n\u003e * The Instagram account you want to access needs to be part of a developer Facebook account as well, otherwise it can't be added as tester to an application.\n\n1. You need a individual Facebook account\n2. Once you have a Facebook account, register as a developer at https://developers.facebook.com/\n3. Add a new application.\n4. Configure the integration [\"Instagram API with Instagram Login\"](https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/)\n   * Configure \"Instagram Business Login\". As a OAuth Redirect URL just use the URL of your homepage (e.g. https://www.in2code.de)\n   * Make some notes for your new \"App ID\", \"App secret\" and the \"Redirect URI\" - this will be needed later in the FlexForm\n5. Under \"Roles\" add your Instagram account as a test account. _(see notes above)_\n   * You need to accept this on your Instagram account. Go to your Instagram account settings and then to \"Apps and Websites\" and add the new app as a tester.\n6. Install the extension (if not yet done)\n7. Add a Instagram plugin anywhere on your pages and open the edit view. Add \"username\", \"App ID\", \"App secret\" and \"App return URL\" and press \"save\"\n8. Now you will see a button at the end of the FlexForm. Click on it and a new browser window is opened with the Instagram website. You have to login and accept the request. After that, you will be redirected to your homepage.\n9. If you reload the plugin, you will see a green message that tells you that you now have a valid token and how long the token is valid (no worries, once you have created it, you can use a scheduler task to refresh it automatically)\n10. Now, you have access to the API and you can add a new scheduler task and import images from the given user (You should frequently import the feed - e.g. every 30 minutes)\n11. Once you have imported the images via scheduler, you can see the plugin output in the frontend with the given feed\n12. Don't forget to add an additional scheduler task to frequently refresh the token validation after 30-50 days, because the long-live token in Instagram expires after 60 days.\n\n\n### CLI commands\n\n#### Import images\n\nIf you have access to the instagram API (look at the FlexForm in the plugin and watch for the green message), you can\nimport images via CLI or scheduler.\n\nImport the latest 25 posts from `in2code.de`:\n\n`./vendor/bin/typo3 instagram:importfeed in2code.de`\n\nImport some posts and get notified if error happens via Email:\n\n`./vendor/bin/typo3 instagram:importfeed in2code.de service@in2code.de`:\n\n#### Refresh tokens\n\nBecause long-live-tokens are only valid for 60 days, you can automatically refresh them after some days - with:\n\n`./vendor/bin/typo3 instagram:refreshtoken in2code.de`\n\n#### Remove all tokens\n\nIf you change your instagram password, all generated tokens are not useable any more. You have to add new ones. But\nfirst of all, you can delete them:\n\n`./vendor/bin/typo3 instagram:removetokens`\n\n\n\n### Scheduler\n\n#### Import images\n\nAdd a new scheduler task of type `Execute console commands (scheduler)` and select `instagram:importfeed`. Now you can\nadd a frequency (e.g. `*/30 * * * *` for every 30 minutes), a instagram username and one (or more) email address if\nerror happens (and you want get notified).\n\n![Scheduler task](Documentation/Images/scheduler.png \"Scheduler task\")\n\n| Field         | Description                                                                                                                               |\n| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| username      | Every task can import current posts from one user. If you want to show more feeds, you have to add more tasks.                            |\n| receivers     | Optional: Get notified via email if a CURL error occurs (e.g. if instagram blocks your requests). Commaseparated email list is provided.  |\n\n#### Refresh tokens\n\nThere is a new scheduler task, that can be used to automatically refresh Instagram tokens. We would do this after 30-50\ndays because a long-live token is valid for only 60 days.\n\nAdd a new scheduler task of type `Execute console commands (scheduler)` and select `instagram:refreshtoken`. Now you can\nadd a frequency (e.g. `0 5 */30 * ` for every 30 days at 5 am) and a instagram username.\n\n\n\n### HTML output modification\n\nOverwrite and modify the HTML output:\n\n```\nplugin {\n    tx_instagram_pi1 {\n        view {\n            templateRootPaths {\n                0 = EXT:instagram/Resources/Private/Templates/\n            }\n        }\n    }\n}\n```\n\n\nExample html:\n\n```\n\u003chtml xmlns:f=\"http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers\"\n\t  xmlns:instagram=\"http://typo3.org/ns/In2code/Instagram/ViewHelpers\"\n\t  data-namespace-typo3-fluid=\"true\"\u003e\n\n\u003cdiv class=\"c-socialwall\"\u003e\n\t\u003cdiv class=\"c-socialwall\"\u003e\n\t\t\u003cf:for each=\"{feed.data}\" as=\"image\" iteration=\"iteration\"\u003e\n\t\t\t\u003cf:if condition=\"{iteration.cycle} \u003c= {settings.limit}\"\u003e\n\t\t\t\t\u003cdiv class=\"c-socialwall__item c-socialwall__item--instagram\"\u003e\n\t\t\t\t\t\u003cf:link.external uri=\"{image.permalink}\" title=\"Instagram profile {settings.username}\" target=\"_blank\" rel=\"noopener\"\u003e\n\n\t\t\t\t\t\t\u003cinstagram:isLocalImageExisting id=\"{image.id}\"\u003e\n\t\t\t\t\t\t\t\u003cf:then\u003e\n\t\t\t\t\t\t\t\t\u003cpicture\u003e\n\t\t\t\t\t\t\t\t\t\u003csource srcset=\"{f:uri.image(src:'/typo3temp/assets/tx_instagram/{image.id}.jpg', width:'500c', height:'500c', fileExtension: 'webp')}\" type=\"image/webp\"\u003e\n\t\t\t\t\t\t\t\t\t\u003csource srcset=\"{f:uri.image(src:'/typo3temp/assets/tx_instagram/{image.id}.jpg', width:'500c', height:'500c', fileExtension: 'jpg')}\" type=\"image/jpeg\"\u003e\n\n\t\t\t\t\t\t\t\t\t\u003cimg\n\t\t\t\t\t\t\t\t\t\tsrc=\"{f:uri.image(src:'/typo3temp/assets/tx_instagram/{image.id}.jpg', width:'500c', height:'500c')}\"\n\t\t\t\t\t\t\t\t\t\ttitle=\"{image.caption -\u003e f:format.crop(maxCharacters: 120, append: ' ...')}\"\n\t\t\t\t\t\t\t\t\t\talt=\"{image.caption -\u003e f:format.crop(maxCharacters: 120, append: ' ...')}\"\n\t\t\t\t\t\t\t\t\t\tloading=\"lazy\" /\u003e\n\t\t\t\t\t\t\t\t\u003c/picture\u003e\n\t\t\t\t\t\t\t\u003c/f:then\u003e\n\t\t\t\t\t\t\t\u003cf:else\u003e\n\t\t\t\t\t\t\t\t\u003cf:comment\u003e\n\t\t\t\t\t\t\t\t\tIf image is not available on the local machine (for any reasons), load from instagram directly\n\t\t\t\t\t\t\t\t\u003c/f:comment\u003e\n\t\t\t\t\t\t\t\t\u003cimg\n\t\t\t\t\t\t\t\t\tsrc=\"{image.media_url}\"\n\t\t\t\t\t\t\t\t\ttitle=\"{image.caption -\u003e f:format.crop(maxCharacters: 120, append: ' ...')}\"\n\t\t\t\t\t\t\t\t\talt=\"{image.caption -\u003e f:format.crop(maxCharacters: 120, append: ' ...')}\"\n\t\t\t\t\t\t\t\t\twidth=\"500\"\n\t\t\t\t\t\t\t\t\theight=\"500\" /\u003e\n\t\t\t\t\t\t\t\u003c/f:else\u003e\n\t\t\t\t\t\t\u003c/instagram:isLocalImageExisting\u003e\n\n\t\t\t\t\t\t\u003cp\u003e{image.caption}\u003c/p\u003e\n\t\t\t\t\t\u003c/f:link.external\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/f:if\u003e\n\t\t\u003c/f:for\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n\n\u003c/html\u003e\n```\n\n### Styling\n\nIf you want to have basic styling for the default layout present in the extension, you can include the\nstatic template \"Instagram\" on your page.\n\n## Screenshots\n\n### Example frontend output: \n\n![Images from the instagram feed](Documentation/Images/frontend.png \"Images from the instagram feed\")\n\n### Plugin in backend:\n\n![Plugin Flexform](Documentation/Images/backend.png \"Plugin Flexform\")\n\n### Plugin overview in backend page module:\n\n![Plugin preview](Documentation/Images/backend-preview.png \"Plugin preview\")\n\n\n\n## Technical corner\n\nHow to use the facebook/instagram API in general and how to test it?\nSee documentation: [ApiDocumentation](Documentation/InstagramApi.md)\n\n\n\n## FAQ\n\n### Q: The configuration in Instagram sounds complicated\n\nA: Yes, we did a lot in the past to give you a gdpr proved and quick to install solution to show your instagram images\non your website. Now Instagram updated their websites again, to block \"easy\" image grabbing. At the moment we do not\nsee a simpler way then described above and also respect privacy for your visitors.\n\n### Q: I clicked the button in the FlexForm and accepted but after that an error is shown\n\nA: Instagram redirect you back to the configured url. If this is (e.g.) your startpage a PSR-15 middleware is listening\nfor GET params like `\u0026code=foo`. This param is given from Instagram (not from us).\n\n### Q: There is no (e.g. german) translation of the plugin\n\nA: Yes, at the moment we focussed on english to speed up developing.\n\n### Q: Token is only valid for 60 days. Do I have to refresh it manually?\n\nA: No, if there is a valid token, you can refresh it (e.g.) after 30 days automatically via another scheduler task.\n\n### Q: Error \"OAuthException: Insufficient developer role Code: 400\" comes up after clicking the button?\n\nA: Take care that you are logged in into facebook with your developer account at the same time\n\n### Q: How to add a GDPR-known button in frontend for the visitors?\n\nA: No worries, this extension is absolutely GDPR-friendly. Text and images are stored anonymized on the server. No button needed for this.\n\n### Q: Can I access to any instagram account?\n\nA: No, because Instagram wants you to enable the access to the account, the owner has to accept this.\n\n### Q: Is an approvement needed when building a Facebook app?\n\nA: No, an approvement from Facebook is not needed.\n\n### Q: Instagram password was changed - now I can't update the feed.\n\nA: If you change the instagram password, all tokens are not valid any more. An error comes up like\n\n```\n{\"error\":{\"message\":\"Error validating access token: The session has been invalidated because the user changed their pass (truncated...)\n```\n\nIn this case you have to remove all tokens (see CLI section above) and create new ones from the scratch.\n\n\n## Contribution with ddev\n\nThis repository provides a [DDEV]()-backed development environment. If DDEV is installed, simply run the following\ncommands to quickly set up a local environment with example usages:\n\n* `ddev start`\n* `ddev initialize`\n\n### Requirements\n\n1. Install ddev, see: https://ddev.readthedocs.io/en/stable/#installation\n2. Install git-lfs, see: https://git-lfs.github.com/\n\n### Installation\n\n1. Clone this repository\n2. Run `ddev start`\n3. Run `ddev initialize` to setup configurations and test database\n\n## Branchinfo\n\n* master Branch - Next Major Version\n\n## Early Access Programm for TYPO3 14 support\n\n:information_source: **TYPO3 14 compatibility**\n\u003e See [EAP page (DE)](https://www.in2code.de/agentur/typo3-extensions/early-access-programm/) or\n\u003e [EAP page (EN)](https://www.in2code.de/en/agency/typo3-extensions/early-access-program/) for more information how\n\u003e to get access to a TYPO3 14 version\n\n## Changelog\n\n| Version   | Date       | State   | Description                                                                                                                                                                                                                                   |\n|-----------|------------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| 13.0.1    | 2025-07-26 | Task    | Move extension icon to Configuration folder                                                                                                                                                                                                   |\n| 13.0.0    | 2025-03-19 | Task    | Support TYPO3 12 and 13 now                                                                                                                                                                                                                   |\n| 8.0.0     | 2023-10-24 | Task    | Support TYPO3 11 and 12 now                                                                                                                                                                                                                   |\n| 7.2.0     | 2023-02-16 | Task    | Add PHP 8 support                                                                                                                                                                                                                             |\n| 7.1.0     | 2022-09-22 | Feature | Add optional static file include for styling of default layout                                                                                                                                                                                |\n| 7.0.0     | 2022-02-21 | Task    | Support TYPO3 10 and 11 now                                                                                                                                                                                                                   |\n| 6.2.1     | 2021-10-01 | Bugfix  | Prevent exception if image is a video                                                                                                                                                                                                         |\n| 6.2.0     | 2021-07-09 | Feature | Add comand that allows you to delete all existing tokens                                                                                                                                                                                      |\n| 6.1.3     | 2021-06-09 | Bugfix  | Use thumbnail images when storing local to allow video previews                                                                                                                                                                               |\n| 6.1.2     | 2021-06-09 | Bugfix  | Don't convert UserId to float value                                                                                                                                                                                                           |\n| 6.1.1     | 2021-06-09 | Task    | Harden middleware with code recognization                                                                                                                                                                                                     |\n| 6.1.0     | 2021-04-13 | Task    | Fix problem \"Field id specified more than once. This is only possible before version 2.1\" - because of a change of the instagram interface                                                                                                    |\n| 6.0.2     | 2021-03-17 | Task    | Add extension key to composer.json file, small documentation update                                                                                                                                                                           |\n| 6.0.1     | 2021-03-15 | Bugfix  | Change int to string field type for userId and appId to also handle large numbers                                                                                                                                                             |\n| 6.0.0 !!! | 2021-03-15 | Task    | Another rebuild now with the useage of the original Instagram API to grap images. See installation part in documentation what you have to do now. FlexForm, Scheduler and HTML-Templates have changed (this is a pitty, but have to be done). |\n| 5.1.0     | 2021-01-21 | Feature | Render images in listview in webp format.                                                                                                                                                                                                     |\n| 5.0.2     | 2020-12-23 | Bugfix  | Add a subject for error mails.                                                                                                                                                                                                                |\n| 5.0.1     | 2020-11-27 | Bugfix  | Enable caching for the plugin.                                                                                                                                                                                                                |\n| 5.0.0     | 2020-11-16 | Feature | Pass a sessionid to instagram for blocked requests. Added a notification service for CURL errors.                                                                                                                                             |\n| 4.0.1     | 2020-11-14 | Bugfix  | Fix typo in ext_tables.sql                                                                                                                                                                                                                    |\n| 4.0.0 !!! | 2020-11-13 | Task    | Add a scheduler task to import feeds (without RSS feed now). A plugin allows you to push the images into the frontend                                                                                                                         |\n| 3.0.0 !!! | 2020-06-05 | Task    | Use RSS-feed now for a workarround that server request are blocked by instagram                                                                                                                                                               |\n| 2.0.0     | 2020-05-08 | Task    | Store images locally now to improve privacy of your visitors. Use content element uid for building individual caches now                                                                                                                      |\n| 1.1.0     | 2020-04-29 | Task    | Open links in new tabs, don't cache the view because of own caching framework usage                                                                                                                                                           |\n| 1.0.0     | 2020-04-29 | Task    | Initial release                                                                                                                                                                                                                               |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fin2code-de%2Finstagram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fin2code-de%2Finstagram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fin2code-de%2Finstagram/lists"}