2016-07-06 5 views
0

私は新しいものを購入しました。私が取り組んでいるWebサイトにInstagramフィードを追加したいと思っていました。このウェブサイトは網膜のテーマを使用しており、私はこれが更新されたテーマではないと思います。私は店舗のホームページに店舗フィードがないことについてのhereのような記事を読んで、私はアクセストークンが必要だと言いました。私は自分のアクセストークンを持っているので、私はそれをどうするか分からない。つまり、どこにこのトークンを挿入できますか?どんな助けでも大歓迎です。shopifyのInstagramフィードアクセストークン

答えて

1

まあ、それはいくつかのコーディングスキルが必要です。 Shopify Apps Marketplaceの無料Instagramアプリを使用してみてください。潜在的な解決策に

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

+1

リンクは常に歓迎しますが、場合には、将来の訪問者のためのいくつかの詳細を追加してくださいされていますコピー&は、埋め込みコードを貼り付け除いてあなたは何もする必要はありません。リンクが削除されます。 –

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> 
+0

お返事ありがとうございます。私は前にこの質問を削除することを忘れていました。私は自分自身で問題を解決することができました。 – claudios

+1

あなた自身の質問に答え、あなた自身が答えとして受け入れることは良い考えです。 –

+0

ホームそれは他の人を助けるでしょう。 @claudios –