Custom Instagram Feed

Add instagram feed to page from URL

🚧 Edit - As of 13th April 2021 - This code does not work. Solution is being looked into, however due to time constraints from client work, this may be a bit of time until I am able to look at trying to fix this.

Feel free to have a go at fixing it. Make a pull request if you find a solution.

Table of Contents

• Tutorial
• Usage
• Shortcode
  • Attribute Options
  • Examples
• Extra Info
• Troubleshooting
• Support

Tutorial

Watch the demo and tutorial from Jonathan at Permaslug

Usage

Using Wordpress

1. Add index.php to code snippets or functions.php
2. Replace $insta_id with Instagram username
3. Add shortcode to page

For slider integration

1. Add slider CSS to head of website
2. Add slider JS just before closing tag
3. Add the

   You might also like...

   Facebook & Instagram Ads API for Laravel

   Laravel Facebook Ads Get ads infos (campaigns, ads, insights, etc...) from Facebook & Instagram Ads API Supported Facebook API version: = v3.0 Instal

   108 Dec 5, 2022

   Instagram automation represents the use of third-party software to manage your account, carry out tasks and/or interact with users without a human present. Bulit in Laravel Framework

   How to Deploy laravel project to heroku Video Link : https://youtu.be/7Nq_a2QiaHo Home Page Login Page Dashboard Page About Laravel Laravel is a web a

   1 Dec 3, 2021

   Instagram Clone App made with Laravel a PHP Framework

   About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

   0 Jun 29, 2022

   An Instagram clone built with TailwindCSS, React, Apollo Client and Laravel Lighthouse.

   This is an Instagram clone built with TailwindCSS, React, Apollo Client and Laravel Lighthouse. This is a great project to learn and improve your Tailwind and React skills also if you are insterested in backend, the GraphQL API is created using Laravel Lighthouse, this is a great project to add to your portfolio if you are just starting as a web developer or full stack developer.

   13 Dec 12, 2022

   Liberating Web Analytics. Star us on Github? +1. Matomo is the leading open alternative to Google Analytics that gives you full control over your data. Matomo lets you easily collect data from websites & apps and visualise this data and extract insights. Privacy is built-in. We love Pull Requests!

   Matomo (formerly Piwik) - matomo.org Code Status Description Matomo is the leading Free/Libre open analytics platform. Matomo is a full-featured PHP M

   17.2k Jan 3, 2023

   📛 An open source status page system for everyone.

   Cachet is a beautiful and powerful open source status page system. Overview List your service components Report incidents Customise the look of your s

   13k Jan 3, 2023

   Single Page Chat Application

   About A single page chat application developed in PHP OOP, Mysql and AJAX. Users email (password) abrazzaq@gmail.com (abrazzaq) john@gmail.com (john)

   1 Oct 15, 2021

   Laravue - a sensible starting point for single-page apps

   Laravue - a sensible starting point for single-page apps Note: The vast majority of the functionality of this project has essentially been added into

   222 Oct 7, 2021

   Cachet is a beautiful and powerful open source status page system.

   Cachet is a beautiful and powerful open source status page system. Overview List your service components Report incidents Customise the look of your s

   12.5k Dec 5, 2021

   Comments

   • Making the instagram grid responsive

     In order to make Taylors instagram feed responsive, I created the following CSS. Add a class to the shortcode wrapper, in this example I used 'i-instagram'

     

     `/*Instagram grid styling */

     .i-instagram { width: 100%; display: flex; flex-wrap: wrap;
     }

     .i-instagram>* { margin: 10px; flex: 1 1 14%; }

     @media ( max-width: 960px) { .i-instagram >* { flex-basis: 28%; } }

     @media ( max-width: 768px) { .i-instagram >* { flex-basis: 28%;}

     .i-instagram { font-size: 12px;}

     .insta-caption-div { line-height:1.2!important;} }

     @media ( max-width: 320px) { .i-instagram >* { flex-basis: 40%; } }

     .insta-image { width: 100%!important; max-width: 300px; min-width: 140px; }

     `

     opened by amandalucas 0