Instagram feed modul

Az Instagram egy nagyszerű eszköz arra, hogy kapcsolatba lépjünk az ügyfeleinkkel és növeljük a márkaismertségünket. A közösségi oldal egyre négyszerűbb a fiatalok körében, a 18-29 éves korosztály több mint fele már jelen van az Instagramon.

Egyre több webáruház tulajdonos ismeri fel az Instagramban rejlő lehetőségeket, és komoly erőforrásokat fektet egy minőségi profil létrehozásába.

Ezért szerettük volna, ha az az Instagramos kommunikáció könnyen megjeleníthetővé válik a webshopban is.

Az új modul segítségével immár könnyen integrálhatjuk az Instagram képeinket a ShopRenteres áruházunkba.

A képek közvetlenül az Instagram fiókunkhoz kapcsolódnak, így a modul remek lehetőséget ad az új követők szerzésére is.

Az új Instafeed modul a következő sablonjainkban elérhető:

  • Tokyo ( a modul szerkeszthető Sablon Fájl szerkesztővel )
  • Róma 2.0 ( a modul szerkeszthető Sablon Fájl szerkesztővel )
  • Elegant 2.0
  • Modern 2.0
  • Classic 2.0

Beállítás és működés:

A Beállítások> Megjelenés> Modulok beállítása menüben találjuk az Instagram feed modult. A megjelenését is itt szabhatjuk testre.

A modul beállításai között kiválaszthatjuk, hogy hány képet szeretnénk megjeleníteni, illetve azt is, hogy ezek a képek milyen felbontásban és milyen sorrendben jelenjenek meg a webáruházunkban.

A beállításhoz szükség lesz a következő adatokra: Client ID, User ID, Access Token. Ezek létrehozását most bemutatjuk részletesen:


1.) Kliens ID / Client ID létrehozása

Az Instagramon fiókunkba első lépésként jelentkezzünk be, majd a profil menün belül a láblécben találunk egy API menüt. Ez át fog irányítani a fejlesztői felületre.

2018-07-30_16_14_11-Tesztel_s___teszt_felhasznalo____Instagram-f_nyk_pek__s_-vide_k.png

Felül a Manage Clients menüpontra kattintva, a rendszer bekér tőlünk pár adatot (Webhely, Telefonszám, Mire akarjuk használni az API-t?). Ezeket töltsük ki majd kattintsunk a Sign Up gombra.

Ha ezzel megvagyunk, újból kattinsunk a Manage Clients menüpontra, majd kattintsunk a Register a New Client gombra. A details fülön rögtön adjuk is meg a kért adatokat. A Valid redirect URLs résznél azt kell megadnunk, hogy a felhasználó milyen oldalra kerüljön, ha nem fogadja el az app-unk felhasználását. Ez tehát lehet nyugodtan a bolt URL-je is.

2018-07-30_16_25_50-Instagram_Developer_Documentation.png

A regisztráció után megkapjuk a CLIENT ID-t és létrejön az applikációnk.

2.) Acces Token létrehozása:

A következő lépésben kinyerjük az Access Tokent. A létrehozott app-nál a Manage gombra kell kattintsunk, majd a Security fülön ellenőrizzük, hogy kitöltöttük-e a Valid redirect URLs mezőt. Ezen az oldalon találjuk még a Authentication (https://www.instagram.com/developer/authentication/) linket amire a továbbiakban szükség lesz.

FONTOS! Mielőtt a következő lépésre megyünk, a Disable implicit OAuth opció mellett lévő pipát ki kell venünnk majd az oldal alján az Update Client gombra kattintanunk.

Ke_pernyo_foto__2019-04-11_-_10.28.40.png

A megnyíló oldal alján a "Client-Side (Implicit) Authentication > Step One: Direct your user to our authorization URL" alatt találunk egy URL-t, amit némileg át kell szerkesztenünk.
Másoljuk ki nyugodtan egy jegyzettömbe, ott át tudjuk írni a nagybetűs CLIENT-ID és REDIRECT-URL részeket. A CLIENT-ID-t korábban az 1.) pontban kaptuk meg, a REDIRECT-URI-t is megadtuk korábban.

2018-08-10_11_32_11-Instagram_Developer_Documentation.png

!Fontos! A hivatalos dokumentáció nem tér ki a következő problémára!

A fenti képen kimásolt URL-t ki kell egészíteni még egy aprócska paraméterrel. Miután kicseréltük a RedirectURI és ClientID paramétereket a megfelelő mezőre, a link végére be kell illesztenünk egy &hl=en paramétert is. Ennek az az oka, hogy az Instagram csak angol nyelvű böngésző esetén dobja vissza nekünk az Access Token-t és e nélkül hibás URL-t kapunk vissza.

A teljes URL tehát amit módosítanunk kell:

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token&hl=en

Egy példa módosítás után (félkövérrel kiemeltük a beillesztett részeket):
https://api.instagram.com/oauth/authorize/?client_id=123456789&redirect_uri=https://boltnév.shoprenter.hu/&response_type=token&hl=en

A módosított URL-t nyissuk meg a böngészőben. Itt megjelenik egy felület ahol csupán az Authorize gombra kell kattintanunk. Ezzel elfogadjuk a folyamatot.
A böngésző a REDIRECT-URL-ben megadott oldalra irányít. Ha jobban megnézzük a böngészőben a címsort, akkor ott találni fogunk egy kódot. Az egyenlőség jel utáni kód adja az Access tokent.

2018-08-10_11_40_01-ShopRenter_Demo__ruh_z.png

 

3.) A Felhasználó ID / User ID kinyerésének módjai:

 

a.) A már előbb megkapott access token első pontig tartó része egyenlő a User ID-vel.

2018-08-10_11_43_14-ShopRenter_Demo__ruh_z.png

 

b.) A böngészőnkben egy új lapon nyissuk meg a következő URL-t: https://www.instagram.com/teszt_felhasznalo/?__a=1

Fontos! Mielőtt megnyitjuk az URL-t cseréljük ki a felhasználónevet (a linkben a félkövér rész) a sajátunkra. Ez az Instagram profilunkon belül látható a profil képünk mellett.
A megnyíló oldalon az id sort kell keresni. Ez adja az User ID-t.

 

4.) A modul beállítása az áruházban:

A kinyert adatokat a következő mezőkbe kell az adminon felületen beillesztenünk:

Beállítás adminon

 

Ezek után érdemes meghatározni a megjelenésre vonatkozó beállításokat is. A fenti képen használt opciók a következő megjelenést eredményezik

Instagram feed

Van még kérdése? Kérelem beküldése

0 Megjegyzések

Cikk zárolt megjegyzésekkel szemben.