README

This addon will allow you to fetch instagram feed and storied without Oauth.

Difference from the free version available in the marketplace

• You are able to cache the feed
• An ajax request is made and your feed is returned as json. Which prevents render blockage.

Problem : checkpoint_required

If you have this issue, it means they have detected suspicious behaviour with your instagram account you are using to scrape the data. This is easily solved by logging in to your instagram account and paste the security code it will email you.

Attention: This addon is based on the following stable and popular package: Instagram User Feed

If for some reason it should stop working, so might this addon. Please keep that in mind before buying this addon. However, that package has been around for a while and we have used it since 2018 without having any problems.

Quick Start

You could use your real instagram account, but we recommend getting a dummy one and use that.

ENV Settings

Once you have your username and password, add those credentials to your .env file:

INSTAGRAM_USERNAME=
INSTAGRAM_PASSWORD=

Below are the other optional settings you can make to your .env file. INSTAGRAM_EXPIRATION & INSTAGRAM_TAKE can be set using the Antlers tag. It is handy if you want to show different feeds with different settings.

# The url used to get the feeds remember to start and end it with a slash.
INSTAGRAM_URL="/statamic-instagram-user-feed/"

# Control how the date is formatted
INSTAGRAM_DATE_FORMAT="Y-m-d H:i:s"

# Set the expiration time of the cache.
INSTAGRAM_EXPIRATION=3600

# Set how many posts should be fetched.
INSTAGRAM_TAKE=3

# Activate a check to make sure traffic comes from your own website
INSTAGRAM_CHECK_REFERER=true

If you don't specify these, the default values shown will be used.

Add Alpine to your project

Don't worry, you don't have to use Alpine if you don't like. A simple JSON object is returned to you, which means you can use whatever tool you like such as Vanilla Javascript, Vue, React or whatever.

However, we wanted to get up and run quickly, so we added a default view for you which included an Alpine implementation and the Fetch API. Go to their website to see the best practices when it comes to installation.

For now, let us add the following script tag to your layout file: (For some reason the script tag is not correctly rendered over at the Marketplace, but the path is : https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js , or go to the addons github page where it renders correctly.)

 <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>

Finally add our tag wherever you want to display your instagram feed (Important: You must supply the profile of whos feed you want to display):

{{ statamic_instagram_user_feed profile="pixney" }}

You are done and it should work!

Tag Parameters

{{ statamic_instagram_user_feed profile="pixney" expiration="3600" take="3" }}

Available fields

Feed

Publish and Customize the view to your liking

Run the following command to publish a fully customizable view: php artisan vendor:publish --tag=statamic-instagram-user-feed-views --force

Publish the configuration

You should not need to change anything to the configuration file, but it is possible by the following command : php artisan vendor:publish --tag=statamic-instagram-user-feed-config --force

Alpine Helpers

If you love Alpine just like us, maybe you wanna continue using it. If that is the case, make sure you checkout the available helpers. Especially these two:

• Truncate (if you want to show less of the caption)
• Fetch (if you want to change from Fetch API)

Roadmap

• Include instagram stories
• Add front end themes using Tailwind CSS
• Add more functionality and options
• Write tests

License

Before going into productions with Statamic Instagram User Feed, you need to buy a license at the Statamic Marketplace.

Statamic Instagram User Feed is not free software.