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

From Spiffy Stores Knowledge Base

Line 18: Line 18:
 
=Instagram feed not showing?=
 
=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.
+
Instagram occasionally block you from bing able to see your feed. This is usally temporary, and should last only a few hours.
 
 
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="basic" 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>
 
<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>
 
 
 
===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>
Line 77: Line 24:
 
===Pictures out of alignment?===
 
===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.
+
The Instagram feed in this theme supports only square images.  
 
 
# 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>
 
<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>

Revision as of 09:28, 27 April 2021

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.

Enabling the Instagram feed in your store

Once you have registered your client ID, you'll need update your theme settings.

  1. Go to the Design & Assets -> Theme editor section, and scroll down to the Home Page - Sections > Instagram widget section
  2. Enter your Instagram username into the Instagram Username field. 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.

on

  1. Instagram Widget Title is the title that appears above your Instagram feed on your home page
  2. 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.
  3. 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.


Instagram feed not showing?

Instagram occasionally block you from bing able to see your feed. This is usally temporary, and should last only a few hours.


Pictures out of alignment?

The Instagram feed in this theme supports only square images.






« Updating your home page

« The Bendigo theme guide