Difference between revisions of "Melbourne ecommerce theme - Displaying an Instagram feed on your home page"

From Spiffy Stores Knowledge Base
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<span style="color: white; background-color: red; padding: 20px; font-size: 1.5em">Instagram are blocking most feeds, so this feature is in the process of being removed from our themes.  If you cannot see your feed, you should disable it in your theme editor.</span>
+
<br><span style="color: red; font-size: 1em; display: block;">Note: Instagram are now blocking site from displaying images from Instagram, so the Instagram Feed function has been replaced.  If you cannot see your feed, you should disable it in your theme editor, or [[Updating your theme|update to the latest version of your theme]] and use the new HTML Section that is included in the latest version of the theme.</span><br>
  
−
From the ''Theme Settings > Home Page - Instagram widget'' section, you can enable the Instagram Widget to display Instagram images on your shop's home page.
+
=Using the "HTML Section" to display an Instagram feed on your home page=
 +
In versions 12.1 of the theme and up, we have introduced HTML Sections.  If Instagram are blocking you from displaying your Instagram feed, you'll need to use a third party widget.  One of the following should work well...<br>
 +
* https://taggbox.com/instagram-widget/ <br>Price: Free for up to 2,000 views a month.  Displays Taggbox branding.  $19 USD a month to remove branding.  <br>Requires that your Facebook Business Page be linked to your Instagram Business Account.<br><br>
 +
* https://woxo.tech/ <br>Price: Free with Woxo branding.  $6.99 a month  to remove branding and enable more customisation.<br><br>
 +
* https://snapwidget.com/ <br>Price: Free for the grid style, but images link to a SnapWidget preview.  The Pro option has a monthly fee.<br><br>
 +
* https://lightwidget.com/ <br>Price: $10 USD one-off fee to remove branding and support SSL<br><br>
 +
* https://elfsight.com/instagram-feed-instashow/  <br>Price: Free... but you will likely go over your limit of 200 views and will need to pay the $5 USD a month to remove branding and support up to 5000 page views.<br><br>
 +
* https://embedsocial.com/create/instagram-feed/. <br>Price: Free, or $19 USD a month to remove branding and get more customisation features.<br><br>
  
−
== Enabling the Instagram feed in your store ==
+
If you sign up for the widget, you can customise it on their site.  You can then paste the widget code into the "Home Page - HTML Section" fields in your theme editor.  Once you have done this, Save your settings.
−
# Go to the ''Design & Assets -> Theme editor'' section, and scroll down to the ''Home Page - Instagram widget'' section
+
[[File:Html-block-theme-editor.png|border]]
−
# ''Instagram Widget Title'' is the title that appears above your Instagram feed on your home page
 
−
# Enter your Instagram username.  It's important to only enter your Instagram username without any special characters. Please do not include the @ symbol with your username or the URL to your Instagram profile.
 
−
# ''Number of Images'' sets the number of images to show.  By default it's 12.  It should be 2 or 3 times whatever number you set in the ''Number of Images to display per row'' field.
 
−
# ''Number of Images to display per row'' is how you can make your Instagram images bigger or smaller.  The higher the number, the smaller the images are, and the more that are displayed in the row.
 
−
 
 
−
<br>
 
−
 
 
−
=Does your theme editor show Client ID and token fields?=
 
−
 
 
−
The theme has been updated so that these are no longer required.  You should update your theme to the latest version if your Instagram feed isn't working.
 
−
 
 
−
<br><br>
 
−
 
 
−
 
 
−
===Pictures out of alignment?===
 
−
 
 
−
The Instagram feed in this theme supports only square images.  To modify your feed so that only square images are used, follow the instructions below.
 
−
 
 
−
# Go back to https://www.instagram.com/developer/clients/manage/ <br>
 
−
# Click on the ''Manage'' button<br>
 
−
# Click the ''Migrations'' tab<br>
 
−
# Un-tick the ''Non square media'' option<br>
 
−
# Click the ''Update Client'' button<br>
 
−
 
 
−
<br><br>
 
−
 
 
−
 
 
−
<html>
 
−
<script>
 
−
  var itoken = window.location.hash.substr(1);
 
−
  if(itoken.length > 1) {
 
−
    itoken = itoken.replace('access_token=', '');
 
−
    document.getElementById('access_token').innerHTML = itoken;
 
−
    document.getElementById('instagram').style.display = "block";
 
−
    //alert(itoken);
 
−
  };
 
−
 
 
−
</script>
 
−
 
 
−
<style type="text/css">
 
−
 
 
−
#client_id {
 
−
  border: 1px solid #666;
 
−
  color: #222;
 
−
  cursor: text;
 
−
  font-size: 16px;
 
−
  font-weight: 600;
 
−
  line-height: 1em;
 
−
  min-width: 400px;
 
−
  padding: .75em 1em;
 
−
  text-align: left;
 
−
  display: inline-block;
 
−
  margin-top: 10px;
 
−
}
 
−
 
 
−
#access_token {
 
−
  border: 1px solid #d1d0c9;
 
−
  color: #222;
 
−
  cursor: text;
 
−
  font-size: 16px;
 
−
  font-weight: 600;
 
−
  line-height: 1em;
 
−
  min-width: 2em;
 
−
  padding: .75em 1em;
 
−
  text-align: center;
 
−
  border-radius: 3px;
 
−
  display: inline-block;
 
−
  margin-top: 10px;
 
−
}
 
−
 
 
−
.button {
 
−
  padding: 14px 23px 13px 23px !important;
 
−
  background-color: #d14524 !important;
 
−
  font-size: 15px !important;
 
−
  cursor: pointer !important;
 
−
  color: #FFF !important;
 
−
  margin-top: 10px !important;
 
−
  margin-bottom: 10px !important;
 
−
  display: inline-block !important;
 
−
  border: none;
 
−
}
 
−
 
 
−
</style>
 
−
</html>
 
  
  

Latest revision as of 13:24, 29 September 2021


Note: Instagram are now blocking site from displaying images from Instagram, so the Instagram Feed function has been replaced. If you cannot see your feed, you should disable it in your theme editor, or update to the latest version of your theme and use the new HTML Section that is included in the latest version of the theme.

Using the "HTML Section" to display an Instagram feed on your home page

In versions 12.1 of the theme and up, we have introduced HTML Sections. If Instagram are blocking you from displaying your Instagram feed, you'll need to use a third party widget. One of the following should work well...

If you sign up for the widget, you can customise it on their site. You can then paste the widget code into the "Home Page - HTML Section" fields in your theme editor. Once you have done this, Save your settings. Html-block-theme-editor.png





« The Melbourne theme guide




Retrieved from "http://www.spiffystores.com.au/kb/index.php?title=Melbourne_ecommerce_theme_-_Displaying_an_Instagram_feed_on_your_home_page&oldid=9310"