
The Instagram element is designed to integrate the social network into your page to increase your conversion rate.
Instafeed js tutorial how to#
In this article, you will learn about the Instagram element and how to use it. Shopify elements – Customer Form Button.Shopify elements – Product View Details.Shopify elements – Collection Description.Shopify elements – Collection View Details.Wiser Personalized Recommendations elements.Pixel Union – Ultimate Special Offers element.Revy – Unlimited Bundles & Discount element.Fast Simon – AI Product Recommendation element.Product Options and Customizer by Product Customizer element.Form Builder with File Upload by Hulk Form Builder.Ryviu – Product Reviews App & QA element.VS Ali Reviews – Product Reviews element.Seal Subscriptions – Subscription element.Omnisend – Landing page Signup Form element.Marsello – Email, SMS & Loyalty Rewards.Affiliate Signup Form by Social Snowball.Back in Stock – Customer Alerts element.Yotpo – Product, Site and Visual Reviews element and Review Badge element.Stamped.io – Reviews & UGC element and Site Badges element.Vitals Integrations – Product Reviews Trust Seals and Badges Product Bundles Volume Discounts Stock Scarcity elements.Email Marketing by CM Commerce elements.Flair Product Badges + Labels by Burst Commerce.ParcelPanel – Order Tracking Form element.You can write your own HTML markup and it will be used for every image that Instafeed.js fetches. The easiest way to control the way Instafeed.js looks on your website is to use the template option. See Options in the wiki for the complete reference. The function will be given the image data as an argument, and expects the function to return a boolean.Ī custom function to sort the media, rather than the default 'most recent' sortingĮither the ID or the DOM element itself where you want to add the images.Ī mustache template used to produce HTML for the document.Ī function used to transform the image data before it is rendered. Set to true to display debugging informationĪ function used to exclude images from your results. The Instagram access token, either as a string, or a function which returns a string Here are some of the most commonly used options: Key A service to keep your access token fresh.


Note: Instafeed.js is also compatible with require.js and commonJS exports Basic Usage
Instafeed js tutorial free#
It's a paid service, but it has a free tier that will work for smaller projects. If you're looking for a turnkey solution that manages tokens for you, or you need more advanced features like hashtag feeds, I recommend looking at Behold. The largest problem is that managing API tokens now requires a server-side component, which I can’t provide through Instafeed.js alone. Unfortunately, Facebook has made this process a lot more complex than it used to be. I like to think I was able to do that, in large part thanks to the public API Instagram had at the time.

When I originally wrote Instafeed.js in 2012, I wanted to create an easy way to quickly add your Instagram photos to your website. Version 2 of Instafeed.js is now available, powered by the new Instagram Basic Display API.įor help upgrading from v1, see the v2 migration guide. Instafeed.js is a simple way to display your Instagram photos on your website.
