Ich bin neu zu shopify und ich wollte den Instagram-Feed auf der Website, an der ich arbeite, hinzufügen. Diese Website verwendet Retina-Thema und ich denke, das ist kein aktualisiertes Thema. Ich lese einige Artikel wie here über fehlende Instagram-Feed in Shopify Store Homepage und sie sagten, ich brauche ein Access-Token. Jetzt, wo ich mein Zugriffs-Token habe, weiß ich nicht, was ich damit machen soll. Ich meine, wo kann ich diesen Token einfügen? Jede Hilfe würde sehr geschätzt werden.Instagram feed access token in shopify
Antwort
Nun, es erfordert einige Programmierkenntnisse. Versuchen Sie, kostenlose Instagram-Apps von Shopify Apps Marketplace zu verwenden. Sie werden nichts außer Kopie tun müssen & den eingebetteten Code einfügen:
{{ '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> \{\{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>
Hey danke für die Antwort. Ich habe vergessen, diese Frage vorher zu löschen. Ich habe es geschafft, das Problem selbst zu beheben. – claudios
So wäre es eine gute Idee, Ihre eigene Frage zu beantworten und als Antwort selbst zu akzeptieren. –
Zuhause wird es anderen Menschen helfen. @claudios –
Links zu möglichen Lösungen sind immer willkommen, aber bitte einige Details für zukünftige Besucher bei hinzufügen Link wird entfernt. –