# Instagram widget és hozzáférési token

> Az Instagram-hozzáférési token létrehozása a Meta fejlesztői felületén, és az Instagram widget beállításai: saját és hashtagos fényképek, elrendezés.

Az **Instagram** widget egy Instagram-fiók fényképeit vagy egy hashtaghez tartozó fényképeket jeleníti meg az oldalon. A fényképek elrendezését és stílusát kód nélkül módosíthatod.

## Követelmények

- Elementor és JetElements.
- A saját fényképek megjelenítéséhez egy **Instagram Professional** (Business vagy Creator) fiók, egy Meta for Developers fiók és egy hozzáférési token. Személyes fiók nem használható.
- A hashtagos (**Megjelölt fényképek**) módhoz nem kell token.

Az Instagram Basic Display API 2024 decemberében megszűnt, ezért a token az Instagram új API-jával, Professional fiókból készül. Ez az API nem támogatja a hirdetéseket, a statisztikákat és a megjelölést.

## Mire való a hozzáférési token

A token egy, a fiókodhoz tartozó karaktersor, amellyel a weboldalad biztonságosan engedélyt kér az Instagramtól a fiók tartalmának lekérésére. Token nélkül az oldal nem tud kapcsolódni az Instagram szervereihez. A token igazolja, hogy te vagy a fiók tulajdonosa.

## A token létrehozása

### 1. Új alkalmazás a Meta for Developersben

1. Jelentkezz be a Meta for Developers fiókodba.
2. Ha még nincs alkalmazásod, a vezérlőpult közepén megjelenik a **Create App** gomb. Kattints rá.
3. Add meg az alkalmazás nevét (**App name**) és a kapcsolattartó e-mail-címet (**App contact email**), majd kattints a **Next** gombra.
4. Az **Add use cases** résznél nyisd meg az **Others** fület, és válaszd a **Create an app without a use case** lehetőséget. Így üres alkalmazást kapsz, amelyben csak az Instagram-tartalomhoz szükséges funkciókat állítod be. Kattints a **Next** gombra.
5. A **Business** lépésben válaszd az **I don't want to connect a business portfolio yet** lehetőséget: a token létrehozásához nincs szükség üzleti portfólióra, később is hozzákapcsolhatod. Kattints a **Next** gombra.
6. A **Publishing requirements** lépésben nincs teendő, kattints a **Next** gombra.
7. Az **Overview** lépésben nézd át az adatokat, és kattints a **Create app** gombra.
8. Biztonsági okból a Meta kéri a jelszavadat. Írd be, és kattints a **Submit** gombra.

### 2. Az alkalmazás beállítása

1. Az új alkalmazás oldalán kattints az **Add use cases** gombra.
2. A felugró ablakban a szűrőben válaszd a **Content management** lehetőséget, majd jelöld ki a **Manage messaging & content on Instagram** használati esetet, és kattints a **Save** gombra.
3. Ha a Meta jelzi, hogy további lépések kellenek, kattints az **Add to this app** gombra.
4. A vezérlőpulton kattints a **Customize the Manage messaging & content on Instagram use case** lehetőségre. Megnyílik az **API setup with Instagram business login** oldal, ahol az alkalmazás neve, azonosítója (app ID) és titkos kulcsa (app secret) látszik.
5. Az első lépésben kattints az **Add all required permissions** gombra. A Meta magától beállítja az összes szükséges jogosultságot.
6. A második lépésben a leírásban kattints a **Roles** hivatkozásra. Új böngészőlapon megnyílik az alkalmazás szerepköreinek oldala.
7. Kattints az **Add People** gombra. A felugró ablak **Additional roles for this app** részében válaszd az **Instagram Tester** szerepkört, írd be a fiók felhasználónevét, és kattints az **Add** gombra.
8. A felhasználó **Pending** (függőben) állapotban jelenik meg a listában. Nyisd meg az Instagram-fiókodban az **Apps and websites** oldalt, a **Tester invites** fülön keresd meg a meghívót, és kattints az **Accept** gombra. A meghívót itt később bármikor vissza is vonhatod.
9. Térj vissza a szerepkörök oldalára: a **Pending** jelzés eltűnt. Ezután az **API setup with Instagram login** oldalon, a **Generate access tokens** részben kattints az **Add account** gombra.
10. A hozzáadott fiók blokkjában kattints a **Generate token** hivatkozásra.
11. A **Token generated** ablak **Access token** mezőjében megjelenik a token.

A token csak egyszer látszik. Jelöld be az **I Understand** négyzetet, és másold ki a tokent, majd tárold biztonságos helyen. Ha elveszted, nem kérhető le újra, új tokent kell létrehozni.

### 3. A token megadása a bővítményben

1. Nyisd meg a **Crocoblock → JetPlugins Settings** oldalt, a **JetElements** csoportot, azon belül az **Integrations** aloldalt.
2. Illeszd be a tokent a **Business Access Token** mezőbe.

A beállítás maga ment, a mentés után megjelenik a „Settings have been saved” értesítés.

A token több webhelyen is használható, ha ugyanannak az Instagram-fióknak a tartalmát jelenítik meg, és a token érvényes.

## Az Instagram widget az oldalon

1. Nyisd meg az oldalt az Elementorral, kattints a **+** ikonra, és a keresőbe írd be: „Instagram”.
2. Húzd a widgetet a konténerbe.
3. A **Tartalom** fülön nyisd meg az **Instagram-beállítások** blokkot.

### Instagram-beállítások

A **Mit jeleníts meg** lista két lehetőséget kínál: **Megjelölt fényképek** (hashtag szerint) és **Saját fényképek** (a csatlakoztatott fiókból).

![Az Instagram widget beállításai a Saját fényképek módban](./kepek/integraciok-instagram-fotoim.webp)

*Az Instagram widget beállításai a Saját fényképek módban* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

A képen a **Saját fényképek** mód mezői látszanak, a **Hozzáférési token** választóval.

**Megjelölt fényképek** módban:

| Beállítás | Mit csinál |
| --- | --- |
| **Hashtag** | A hashtag a `#` jel nélkül |
| **Sorrend alapja** | A találatok sorrendje: **Recent Media** (legfrissebb) vagy **Top Media** (legnépszerűbb) |

Ehhez a módhoz nem kell hozzáférési token.

**Saját fényképek** módban:

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Hozzáférési token** | A token forrása: **Alapértelmezett** a bővítmény beállításaiban megadott tokent használja, az **Egyéni** (Custom) egy külön, a widgetnek megadott tokent | Alapértelmezett |
| **Gyorsítótár időtúllépése** | Milyen gyakran frissüljenek a fényképek: **Nincs**, **Perc**, **Óra**, **Nap** vagy **Hét** | Óra |
| **Fénykép mérete** | **Bélyegkép (150x150)**, **Alacsony (320x320)**, **Normál (640x640)** vagy **Nagy (eredeti)** | Nagy (eredeti) |
| **Instagram-bejegyzések darabszáma** | Hány fénykép jelenjen meg | 6 |
| **Enable Load More Button** | „Továbbiak betöltése” gomb | Nem |
| **Fotók linkelésének engedélyezése** | A fényképek kattinthatók | Igen |
| **Hivatkozás típusa** | Kattintáskor a fénykép **Lightbox** ablakban nyílik meg, vagy a **Bejegyzés hivatkozása** az Instagram-bejegyzés oldalára visz | Bejegyzés hivatkozása |
| **Felirat engedélyezése** | A fénykép leírásának megjelenítése; bekapcsolva a **Felirat hossza** is állítható | Igen (50) |

A **Megjelölt fényképek** módban a panelen még két kapcsoló van: **Hozzászólások számának engedélyezése** és **Kedvelések számának engedélyezése**. Ezek a hozzászólások és a kedvelések számát mutatják a fényképeknél.

### Elrendezés beállításai

![Az Instagram widget Elrendezés beállításai blokkja](./kepek/integraciok-instagram-elrendezes.webp)

*Az Instagram widget Elrendezés beállításai blokkja* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Elrendezés típusa** | **Masonry**: egyforma szélességű fényképek; **Rács**: egyforma méretű elemek; **Lista**: a fényképek egymás alatt | Masonry |
| **Oszlopok** | Az oszlopok száma 1 és 6 között (Masonry és Rács elrendezésnél) | 3 |
| **Tételek közötti távolság** | A fényképek közti rés csúszkával vagy számmal | 10 px |
| **Megjelenítés rámutatáskor** | További adatok a fényképről, ha ráviszed az egeret | Igen |

Ha minden kész, kattints a **Közzététel** gombra, és nézd meg az oldalt: a fényképeket a nyilvános oldalon látod.

## Gyakori kérdések

**Kell személyes Instagram-fiók a tokenhez?** Nem. A használt API Professional fiókot (Business vagy Creator) kér.

**Használhatom ugyanazt a tokent több oldalon?** Igen, ha mindegyik ugyanannak a fióknak a tartalmát mutatja, és a token érvényes.

**Mit tegyek, ha elvesztettem a tokent?** A Meta csak egyszer mutatja meg. Új tokent kell létrehoznod a Meta for Developers felületén.

**Miért nem látszanak a fényképeim a widgetben?** Ellenőrizd, hogy a fiók sikeresen csatlakozott-e, a token be van-e illesztve a bővítmény beállításaiba, a fiók Professional fiók-e, és a widgetben a **Mit jeleníts meg** értéke **Saját fényképek**-e.

**Kell token a hashtagos módhoz?** Nem, a **Megjelölt fényképek** módhoz nem.

**Milyen gyakran frissül a hírfolyam?** A **Gyorsítótár időtúllépése** beállítás dönti el (**Perc**, **Óra**, **Nap**, **Hét**), ha a **Saját fényképek** mód aktív.

**Mi történik, ha a látogató rákattint egy fényképre?** A **Hivatkozás típusa** szerint a fénykép **Lightbox** ablakban nyílik meg, vagy a bejegyzés oldalára kerül.