window.addEventListener('error', function(e) { var msg = e.message || ''; if (msg.indexOf('Failed to fetch dynamically imported module') > -1 || msg.indexOf('Importing a module script failed') > -1) { console.warn('New deployment detected, reloading page...'); window.location.reload(); } }, true); - /* Montserrat Variable Font (Weights 100-900) */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype'); } /* Open Sans Variable Font (Weights 300-800) */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype'); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-display: swap; src: url('/fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype'); } Adobe Commerce Instagram Widget /* If Javascript is enabled but the js_disabled cookie or ?js=0 query parameter is active, restore SPA mode */ var hasJsCookie = document.cookie.indexOf('js_disabled=1') !== -1; var hasJsParam = window.location.search.indexOf('js=0') !== -1; if (hasJsCookie || hasJsParam) { if (hasJsCookie) { const host = window.location.hostname; const wildDomain = '.' + host.replace(/^www\./, ''); document.cookie = 'js_disabled=; expires=Thu, 01 Jan 1970 00:00:00 UTC; Max-Age=0; path=/;'; document.cookie = 'js_disabled=; expires=Thu, 01 Jan 1970 00:00:00 UTC; Max-Age=0; path=/; domain=' + host + ';'; document.cookie = 'js_disabled=; expires=Thu, 01 Jan 1970 00:00:00 UTC; Max-Age=0; path=/; domain=' + wildDomain + ';'; } if (hasJsParam) { var cleanUrl = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search.replace(/[?&]js=0&?/g, '').replace(/\?$/, ''); window.location.replace(cleanUrl); } else { window.location.reload(); } } /* Prevent FOUC for navigation submenus before CSS is loaded */ .navigation ul.submenu { display: none; } /* Prevent FOUC for header and footer before main CSS is loaded */ .page-header, .page-footer { opacity: 0; } /* Prevent FOUC for hidden elements before CSS is loaded */ .is-hidden { display: none !important; } /* Noscript notice banner */ .noscript-warning-banner { background: linear-gradient(135deg, #1e1e24 0%, #121216 100%); color: #ffffff; padding: 16px 24px; border-bottom: 3px solid #ff9800; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-size: 14px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); position: relative; z-index: 99999; display: flex; justify-content: center; align-items: center; } .noscript-content { display: flex; align-items: center; gap: 16px; max-width: 1200px; width: 100%; } .noscript-icon { font-size: 24px; line-height: 1; } .noscript-text { flex: 1; } .noscript-text strong { display: block; font-size: 16px; margin-bottom: 4px; color: #ff9800; font-weight: 600; letter-spacing: 0.5px; } .noscript-text p { margin: 0; color: #d1d1e0; line-height: 1.4; } { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://www.sashas.org/#organization", "name": "Extensions Website", "url": "https://www.sashas.org/", "logo": { "@type": "ImageObject", "url": "https://www.sashas.org/logo.png", "width": 600, "height": 60 }, "address": { "@type": "PostalAddress", "addressLocality": "New York", "addressRegion": "NY", "addressCountry": "US" } }, { "@type": "WebSite", "@id": "https://www.sashas.org/#website", "url": "https://www.sashas.org/", "name": "Extensions Website", "publisher": { "@id": "https://www.sashas.org/#organization" }, "potentialAction": { "@type": "SearchAction", "target": "https://www.sashas.org/search?q={search_term_string}", "query-input": "required name=search_term_string" } }, { "@type": "WebPage", "@id": "https://www.sashas.org/blog/magento-instagram-widget.html/#webpage", "url": "https://www.sashas.org/blog/magento-instagram-widget.html", "name": "Adobe Commerce Instagram Widget", "isPartOf": { "@id": "https://www.sashas.org/#website" }, "about": { "@id": "https://www.sashas.org/#organization" } }, { "@type": "BreadcrumbList", "@id": "https://www.sashas.org/blog/magento-instagram-widget.html/#breadcrumb", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.sashas.org/" } ] }, { "@type": [ "BlogPosting", "FAQPage" ], "@id": "https://www.sashas.org/blog/magento-instagram-widget.html/#article", "headline": "Adobe Commerce Instagram Widget", "description": "Learn how to resolve issues and optimize your Adobe Commerce Instagram Widget setup with our step-by-step technical guide.", "datePublished": "2015-01-29T17:28:33.000Z", "dateModified": "2015-01-29T17:28:33.000Z", "author": { "@type": "Person", "name": "Sasha Shkolnik", "url": "https://www.sashas.org/about-us" }, "publisher": { "@id": "https://www.sashas.org/#organization" }, "mainEntity": [ { "@type": "Question", "name": "What is the key takeaway of Adobe Commerce Instagram Widget?", "acceptedAnswer": { "@type": "Answer", "text": "This article explains the best practices, optimizations, and technical details regarding Adobe Commerce Instagram Widget." } } ] } ] } ⚠️ JavaScript Required To view this page correctly and access all features of S Group, please enable JavaScript in your browser settings. Toggle Nav [![The S Group Ecommerce Development](https://www.sashas.org/images/logo-gray.svg)](https://www.sashas.org/) [Experience](https://www.sashas.org/customer-experience.html) [Catalog Enhancements](https://www.sashas.org/customer-experience/catalog-enhancements.html) - [Cart / Checkout](https://www.sashas.org/customer-experience/cart-checkout.html) - [Customers](https://www.sashas.org/customer-experience/customers.html) - [Shipping](https://www.sashas.org/customer-experience/shipping.html) - [Payments](https://www.sashas.org/customer-experience/payments.html) - [Management](https://www.sashas.org/site-management.html) [Sales / Fulfillment](https://www.sashas.org/site-management/sales-fulfillment.html) - [Catalog](https://www.sashas.org/site-management/catalog.html) - [Customer Support](https://www.sashas.org/site-management/customer-support.html) - [Marketing / Promotions](https://www.sashas.org/site-management/marketing-promotions.html) - [Content](https://www.sashas.org/site-management/content-management.html) - [Reporting & Analytics](https://www.sashas.org/site-management/reporting-analytics.html) - [Optimization](https://www.sashas.org/optimization.html) [Performance](https://www.sashas.org/optimization/performance.html) - [Monitoring](https://www.sashas.org/optimization/monitoring.html) - [Troubleshooting / Debugging](https://www.sashas.org/optimization/troubleshooting-debugging.html) - [Blog](https://www.sashas.org/blog) - [About Us](https://www.sashas.org/about-us.html) - [My Account](https://www.sashas.org/customer/account/) - [Sign Out](https://www.sashas.org/#) - [Sign In](https://www.sashas.org/customer/login/) 0 You have no items in your shopping cart. - [Home](https://www.sashas.org/) - / - [Blog](https://www.sashas.org/blog/) - / - [Adobe Commerce](https://www.sashas.org/blog/?category=adobe%20commerce) - / - Adobe Commerce Instagram Widget # Adobe Commerce Instagram Widget ![Adobe Commerce Instagram Widget - Adobe Commerce Technical Guide Guide](https://www.sashas.org/images/blog/img-magento-instagram-widget.html-i.0.png) At the our time social networks become more and more popular.  Media content keeps increasing  internet value and there are a lot of promotions comes from the social networks. When it comes to Adobe Commerce there are a lot of different integrations to social networks from magento. What we are going to review today its Adobe Commerce Instagram Widget  . # Adobe Commerce Instagram Widget The magento instagram widget extension will allow you add sidebar of instagram  photos to your store. With magento instagram widget you can add sidebar to the categories pages, cms pages (as widget), homepage (if you have 2 or 3 columns layouts) or any other place which can have widget. You can select will be widget shown at the right or left sidebar. Also there is option to show instagram images at the product page as additional product tab, if you theme support tabs. ![Adobe Commerce Instagram Widget - Adobe Commerce Technical Guide Guide](https://www.sashas.org/images/blog/img-magento-instagram-widget.html-i.1.png) # Configuration of Instagram API ![Adobe Commerce Instagram Widget - Adobe Commerce Technical Guide Guide](https://www.sashas.org/images/blog/img-magento-instagram-widget.html-i.2.png)The installation of magento instagram widget extension start at the instagram developer panel. You will need to register your magento instagram application and get keys for it. At the [Developer Panel](https://instagram.com/developer/clients/manage/#) you click Register a New Client. For using magento instagram widget you need to create new client id. Instagram may ask you to verify your account with phone number and then for your website url. After new client will be created you will see there Client ID and Client Secret - this values we will need to use for magento instagram widget. # ![Adobe Commerce Instagram Widget - Adobe Commerce Technical Guide Guide](https://www.sashas.org/images/blog/img-magento-instagram-widget.html-i.3.png)Adobe Commerce Instagram Widget Usage Once you generated and entered keys for magento instagram widget at the admin panel you can start use it.  The  magento instagram widget have settings at the System->Configuration for Anchor/Not Anchor Category page, Homepage or CMS pages. Also it has settings for product page magento instagram widget sidebar.  You can select position of widget and image size. ![Adobe Commerce Instagram Widget - Adobe Commerce Technical Guide Guide](https://www.sashas.org/images/blog/img-magento-instagram-widget.html-i.4.png)Also you can use widget as additional product page tab. the settings for it can be set for each product in instagram attributes as it shown on the image below.  You can use different tag for different product. This way each product may have unique images which related to specific product. ![Adobe Commerce Instagram Widget - Adobe Commerce Technical Guide Guide](https://www.sashas.org/images/blog/img-magento-instagram-widget.html-i.5.png)Once product settings of magento instagram widget set you will see available images at the product page in additional tab. ![Adobe Commerce Instagram Widget - Adobe Commerce Technical Guide Guide](https://www.sashas.org/images/blog/img-magento-instagram-widget.html-i.6.png)This way you can see the latest photos in additional tab.  If you wish you can implement custom lighbox effects when customer click at the photo. The html of widget can be easily edited at the template/instagramwidget folder. If you don't see any images you may want to check log file of the extension. When magento logging enabled at the System->Configuration -> Developer -> Log settings .  The extension will log connection settings to instagram to the var/logs/instagram.log file. There you can check if connection was successful or there are any issues. The extension is open source and easy to modify and change if you need to add customization. # Adobe Commerce Instagram Widget Video Demo ID 5eQU40aHhYo - [Contac Us](https://www.sashas.org/contact/) - [Privacy Policy](https://www.sashas.org/privacy-and-refund-policy.html) - [Refund Policy](https://www.sashas.org/refund-policy.html) © The S Group. All Rights Reserved.