Instagram hírfolyam widget

Az Instagram hírfolyam widget egy Instagram-fiók képeit jeleníti meg az Elementorral készített oldalakon és bejegyzésekben. A widget a Meta (Instagram) szolgáltatásával kommunikál, ehhez három adat kell: az App ID, az App Secret és egy Access Token. Ezeket egy Meta-fejlesztői alkalmazásban hozod létre.

Előfeltétel egy Meta (Facebook) fejlesztői fiók, és egy Instagram üzleti fiók, amelynek a képeit meg akarod jeleníteni.

A Meta-alkalmazás létrehozása

1. Jelentkezz be a Meta for Developers fiókodba, és kattints a jobb felső sarokban a My Apps gombra.
2. Kattints a Create App gombra, válaszd a Business vagy a None alkalmazástípust, majd kattints a Next gombra. Adj nevet az alkalmazásnak, és kattints a Create App gombra.
3. Az alkalmazás irányítópultján nyisd meg a Settings → Basic oldalt, görgess az aljára, és kattints az Add Platform gombra. Válaszd a Website lehetőséget, majd kattints a Next gombra.
4. Megjelenik a Site URL mező. Írd be a weboldalad címét, és mentsd a változtatást.

A mentéshez a Privacy Policy URL és a User Data Deletion URL mezőt is ki kell töltened (Settings → Basic, az oldal tetején). Kezdetben megadhatod a weboldalad címét is, de később valódi adatvédelmi és adattörlési oldal címére kell cserélned.

Az Instagram termék beállítása

1. Az alkalmazás irányítópultján kattints az Add Product menüpontra, válaszd a listából az Instagram terméket, és kattints a Set up gombra.
2. Megnyílik az Instagram business login API-beállító oldala.
3. A Generate Access Token alatt kattints az Add Account, majd a Continue gombra. Az Instagram lapon jelentkezz be az Instagram üzleti fiókoddal. A rendszer megkérdezi, milyen engedélyeket adsz az alkalmazásnak; megadhatod az összeset, mert az alkalmazást és a fiókot is te felügyeled.

Instagram-tesztfelhasználó hozzáadása

A hozzáférési token generálása előtt hozzá kell adnod egy Instagram-tesztfelhasználót az alkalmazáshoz.

1. Az alkalmazás irányítópultján nyisd meg a Roles → Roles oldalt, és görgess az Instagram Testers szakaszhoz.
2. Kattints az Add Instagram Testers gombra, írd be az Instagram-fiókod felhasználónevét, és küldd el a meghívást.
3. Egy másik lapon jelentkezz be az Instagramra, nyisd meg a Profile → Edit Profile → Apps and Websites → Tester Invites oldalt, és fogadd el a meghívást.

Az App ID, az App Secret és a token

1. Térj vissza a Meta for Developers irányítópultjára, kattints az alkalmazásodra, és nyisd meg az Instagram oldalt.
2. Az Instagram App ID és az Instagram App Secret szakaszban másold ki a két értéket, és tedd el őket.
3. Görgess lejjebb a User Token Generator szakaszhoz. A lista a tesztfelhasználókat mutatja. Az előbb hozzáadott felhasználónál kattints a Generate Token gombra, majd a felugró ablakban az Allow gombra.
4. Másold ki a létrejött tokent, és mentsd el az App ID és az App Secret mellé.

Az adatok megadása a UAE-ben

1. A WordPress-vezérlőpulton nyisd meg a UAE → Widgetek oldalt, és ellenőrizd, hogy az Instagram Feed (Instagram hírfolyam) widget be van kapcsolva (lásd Widgetek ki- és bekapcsolása).
2. Nyisd meg a UAE → Beállítások → Integrations oldalt, és görgess az Instagram Feed - Instagram Product API Details szakaszhoz.
3. Írd be az App ID, az App Secret és az Access Token értékét.
4. Kattints a Save gombra.

https://minta-bolt.hu/wp-admin/admin.php?page=uaepro

A képen az Instagram Feed szakasz App ID, App Secret és Access Token mezője látszik, a token mellett a Refresh Access Token gombbal.

A widget hozzáadása oldalhoz

1. Szerkeszd az oldalt vagy bejegyzést az Elementorral.
2. Keresd meg a widgetlistában az Instagram hírfolyam widgetet, és húzd az oldalra.
3. Kattints a widgetre a szerkesztéséhez. A Tartalom lapon az Elrendezés beállításai és a További beállítások szakaszt találod, a megjelenést a Stílus lapon állíthatod.

Ha az API-kulcsok még nincsenek megadva, az Elrendezés beállításai szakasz tetején figyelmeztetés látszik.

Elrendezés beállításai

https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor

A képen az Elrendezés típusa, az Oszlopok, a Négyzet alakú képek, a Képek száma és a Képfelbontás beállítás látszik.

Beállítás	Mit csinál	Alapérték
Elrendezés típusa	A képek elrendezése: rács vagy masonry.	Rács
Oszlopok	Az oszlopok száma, eszközönként is állítható.	3
Négyzet alakú képek	Rács elrendezésnél a képeket egyformára vágja.	Nem
Képek száma	Összesen hány kép jelenjen meg.	3
Képfelbontás	A képek minősége.	Alacsony felbontás

További beállítások

https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor

A képen a Gyorsítótár és a Tartalom csoport, valamint az Instagram-profilhivatkozás beállításai látszanak.

• Gyorsítótár időtúllépése: ennyi időnként frissíti a widget a képeket. A lekért tartalom a lejáratig a gyorsítótárból jelenik meg.
• Felirat: a kép feliratának megjelenítése. A Felirat hossza a megjelenő szöveg hosszát korlátozza, a Tartalom megjelenítése pedig megadja, mikor látszik: Mindig, rámutatáskor vagy a kép alatt.
• Lightbox effektus: bekapcsolva a kattintott kép egy felugró, diavetítős ablakban nyílik meg.
• Képhivatkozás: bekapcsolva a képre kattintva a látogató az Instagram-profilodon az adott bejegyzéshez jut.
• Instagram-profilhivatkozás: bekapcsolva egy hivatkozás jelenik meg a profilodra. Beállításai:
  • Pozíció: a hivatkozás a tartalom fölött, alatt (alapérték: Alul) vagy átfedésként jelenik meg;
  • Hivatkozás címe: a hivatkozás szövege;
  • Instagram-profil URL: a profilod címe;
  • Cím ikonja: a hivatkozás melletti ikon;
  • Ikon pozíciója: az ikon a cím előtt vagy után áll.

Stílus

https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor

A képen a Stílus lap szakaszai látszanak: Elrendezés, Képek, Tartalom, Profilhivatkozás és Átfedés; az Elrendezés szakaszban az oszlopok és a sorok közötti térköz állítható.

• Elrendezés: az oszlopok és a sorok közötti térköz.
• Képek: a képek normál és rámutatásos állapota, szürkeárnyalatos megjelenítés, szegély és igazítás.
• Tartalom: ha a feliratot bekapcsoltad, a felirat betűtípusa, színe, igazítása és belső térköze.
• Profilhivatkozás: ha a profilhivatkozást bekapcsoltad, a hivatkozás betűtípusa, színe, igazítása, szegélye, belső térköze és az ikon távolsága.
• Átfedés: a képekre kerülő átfedés színe, típusa, margója és átlátszósága, normál és rámutatásos állapotban is.

Gyakori kérdések

Meddig érvényes a hozzáférési token?

A fent leírt módon létrehozott token hosszú élettartamú, 60 napig érvényes.

Hogyan frissítem a tokent?

1. A WordPress-vezérlőpulton nyisd meg a UAE → Beállítások → Integrations oldalt.
2. Az Instagram Feed szakaszban kattints a Refresh Access Token gombra.

A frissített token újabb 60 napig érvényes. A tokent az érvényességi időn belül kell frissítened. Ha lejár, újat kell generálnod a Meta-alkalmazásban, és a régi tokent az Integrations oldalon az újra kell cserélned.

Van korlátja a lekéréseknek?

Óránként 200 lekérés engedélyezett, az Instagram ezt óránként nullázza. Ha eléri a korlátot, a widget az „Application request limit reached” üzenetet mutatja. Az IGTV-re, a történetekre, a Reelsre, a hozzászólásokra és a hirdetett bejegyzésekre külön korlátok vonatkoznak, de ezeket a widget nem támogatja, ezért itt nem számítanak.