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

From Spiffy Stores Knowledge Base

(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
From the ''Theme Settings > Home Page - Sections > Instagram widget'' section, you can enable the Instagram Widget to display Instagram images on your shop's home page.
+
<br><span style="color: red; font-size: 1em; display: block;">Note: Instagram are currently blocking most feeds, and we're unable to retrieve images, so this feature is in the process of being removed from our themes until further notice.  If you cannot see your feed, you should disable it in your theme editor, or use the new HTML Section that is included in the latest version of the theme.</span><br>
  
You will require a Client ID from Instagram before this feature can enabled. You can register for one on [http://instagram.com/developer/clients/register/ Instagram's website]
+
==Using the "HTML Section" to display an Instagram feed on your home page==
 +
In versions 1.5 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>
  
== Getting your Client ID from Instagram ==
+
If you sign up for the widget, you can customise it on their site. You can then paste the widget code into the "HTML Section" or "Wide HTML Section" fields in your theme editor.  Once you have done this, Save your settings.
<gallery heights="200px" widths="200px" class="right">
+
[[File:Html-block-theme-editor.png|border]]
Image:Instagram-register.png
 
</gallery>
 
# Go to the [http://instagram.com/ Instagram website] and log in to your account.
 
# Follow [http://instagram.com/developer/clients/register/ this link] to the page where you can register a new Client ID
 
# For ''Application Name'', enter "Social Pics of my Products"
 
# For ''Description'', enter "Instagram photos to display on my website"
 
# For ''Website URL'', enter the address of your store (e.g. http://joesgifts.com.au)
 
# For ''Valid redirect URIs'', enter <pre>https://www.spiffystores.com.au/instagram</pre>
 
# For ''Contact email'', enter your email address
 
# Click on the Security tab, and un-tick ''Disable implicit OAuth''
 
# Click on the Register button and copy the provided Client ID into the Theme Settings.
 
 
 
== Enabling the Instagram feed in your store ==
 
<gallery heights="200px" widths="200px" class="right">
 
Image:Melbourne-Instagram-manage-3.png
 
</gallery>
 
Once you have registered your client ID, you'll need update your theme settings.
 
 
 
# Go to the ''Design & Assets -> Theme editor'' section, and scroll down to the ''Home Page - Sections >  Instagram widget'' section
 
# Paste your Client ID from Instagram into the ''Instagram Client ID'' field in your ''Theme Editor''
 
# Also paste your Client ID from Instagram into the ''Instagram Client ID'' field below on this page, and click the ''Generate Access Token'' button
 
# Approve the permissions, and then copy and paste your Instagram Access Token (that should now be displayed below) into the ''Instagram Access Token'' field in your ''Theme Editor''
 
# ''Instagram Widget Title'' is the title that appears above your Instagram feed on your home page
 
# Enter your Instagram usernameIt'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>
 
 
 
=Instagram feed not showing?=
 
 
 
As of June 1st, 2016, Instagram now requires the use of an <span style="color: red; font-weight: 600;">Instagram Access Token</span>. We have already added support for this new Instagram token to your theme. To display an Instagram feed on your home page, you need to generate an Instagram Access Token below, by entering your Instagram Client ID.
 
 
 
Your Client ID should be stored in your Theme Editor, but you can also [https://www.instagram.com/developer/clients/manage/ log in to Instagram] to find it.
 
 
 
This token allows the theme to securely access your Instagram profile, for the sole purpose of displaying your Instagram photo feed in your store.
 
 
 
<html>
 
<form action="https://www.instagram.com/oauth/authorize/" method="get" target="_blank">
 
<input type="text" id="client_id" name="client_id" placeholder="Instagram Client ID" class="client-id">
 
<input type="hidden" value="token" id="response_type" name="response_type">
 
<input type="hidden" value="public_content" id="scope" name="scope">
 
<input type="hidden" value="https://www.spiffystores.com.au/instagram" id="redirect_uri" name="redirect_uri">
 
<input type="submit" value="Generate Access Token" class="button">
 
 
 
</form>
 
</html>
 
 
<br><br>
 
<br><br>
<div id="instagram" style="display: none;">
 
==Success!==
 
Here is your shiny new Instagram Access Token:
 
 
<span style="access_token" id="access_token">2215754288.d90570a.80ede73023944773940e6cfb217ab77f</span>
 
 
 
==So now what?==
 
 
Simply copy and paste the Access Token number above into the field for the Instagram Access Token in the "Home Page - Instagram widget" section within your Theme Editor. You will then need to enable the Instagram Feed section.
 
 
 
 
</div>
 
 
 
<br>
 
<br>
 
===Errors getting your Access Token?===
 
 
There are only two reasons we are aware of why there should be an error;
 
 
# '''You haven't added us to the list of ''Valid redirect URIs''.'''  <br>
 
## Go back to https://www.instagram.com/developer/clients/manage/ <br>
 
## Click on the ''Manage'' button<br>
 
## Click the ''Security'' button<br>
 
## Add <pre>https://www.spiffystores.com.au/instagram</pre> to the list of ''Valid redirect URIs''.
 
## Click the ''Update Client'' button<br>
 
## Try submitting the form with your Client ID above<br><br><br>
 
# '''''Disable implicit OAuth'' has not been un-ticked.'''  <br>
 
## Go back to https://www.instagram.com/developer/clients/manage/ <br>
 
## Click on the ''Manage'' button<br>
 
## Click the ''Security'' button<br>
 
## Un-tick ''Disable implicit OAuth''<br>
 
## Click the ''Update Client'' button<br>
 
## Try submitting the form with your Client ID above<br><br>
 
 
If that doesn't resolve the issue, we'll need you to [https://www.spiffystores.com.au/support/open.php submit a ticket] providing your Instagram username and password so we can log into your Instagram account and investigate further.
 
 
 
<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>
 
 
 
 
<br>
 
<br>
 
<br>
 
 
<br>
 
 
 
[[Bendigo Ecommerce Theme - updating your home page|&laquo;  Updating your home page]]
 
[[Bendigo Ecommerce Theme - updating your home page|&laquo;  Updating your home page]]
 
 
[[The Bendigo Ecommerce Theme Guide|&laquo; The Bendigo theme guide]]
 
[[The Bendigo Ecommerce Theme Guide|&laquo; The Bendigo theme guide]]
 
 
<br>
 
 
<br>
 

Revision as of 13:36, 24 May 2021


Note: Instagram are currently blocking most feeds, and we're unable to retrieve images, so this feature is in the process of being removed from our themes until further notice. If you cannot see your feed, you should disable it in your theme editor, or 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 1.5 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 "HTML Section" or "Wide HTML Section" fields in your theme editor. Once you have done this, Save your settings. Html-block-theme-editor.png




« Updating your home page « The Bendigo theme guide