Question

我是shopify的新手，我想在我正在处理的网站上添加Instagram Feed。这个网站使用Retina主题，我认为这不是一个更新的主题。我在shopify商店主页上阅读了一些关于here的关于丢失Instagram Feed的文章，他们说我需要一个访问令牌。现在我有了访问令牌，我不知道如何处理它。我的意思是，我在哪里可以插入此令牌？任何帮助将不胜感激。

Answer 1

 {{ 'instafeed.min.js' | asset_url | script_tag }}
 {{ 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css' | stylesheet_tag }}
 <h2 class="instagram_heading" style="text-align: center;"><span style="color: #000;">Store Name</span><span style="font-weight:normal;"> On Instagram </span><a target="_blank" href="https://www.instagram.com/shopgear101/"> UserName</a></h2>


<section class="twitter-feed footer-bottom-margin">
  <div id="instafeed" class="photo_list list-inline">
  </div>

<script type="text/javascript">
    var userFeed = new Instafeed({
        get: 'user',
        userId: 'userid', //Put The user id here..
        accessToken: 'accesstoken', //Put The access token here..
        limit: '10',
      template: '<div class="twitter_img" style="background-image: url\(\{\{image\}\}\)"><div class="inner_image text-center"></div><a target="_blank" href="\{\{link\}\}"><div class="inner_image"><span class="text_like"><i class="fa fa-heart" aria-hidden="true"></i>&nbsp;\{\{likes\}\}</span></div></a></div>'
    });
    userFeed.run();
</script>

<style>
  .twitter_img{
     float:left;
    position: relative;
    width: 20%;
    padding-bottom : 20%; /* = width for a 1:1 aspect ratio */

    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
  }
  .inner_image {
    position: absolute;
   left: 0;
   top: 0;
   overflow: hidden;
   background: rgba(0, 0 , 0,.5);
    color: #fff;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  .twitter_img:hover .inner_image{
    opacity: 1;
    transition: 0.3s ease;
  }
  .text_like{
    font-size: 22px;
    position: relative;
    top: 47%;
    left: 45%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  @media screen and (max-width: 420px){
    .twitter_img{
      width: 50%;
      height: 190px !important;
    }
  }
</style>
</section>

Answer 2

嗯，这需要一些编码技巧。尝试使用Shopify Apps Marketplace中的免费Instagram应用程序。你不需要做任何事情，除了复制＆amp;粘贴嵌入代码：

https://apps.shopify.com/instagram-feed

https://apps.shopify.com/instagram-photos

shopify中的Instagram Feed访问令牌

2 个答案: