# X-hírfolyam widget (Twitter)

> Egy X-fiók vagy hashtag tweetjeinek megjelenítése: a Consumer-kulcsok beszerzése, a fiók, az elrendezés, a tartalom és a stílus beállításai.

Az **X-hírfolyam** widget egy X-fiók (korábban Twitter) vagy egy hashtag tweetjeit jeleníti meg az Elementorral készített oldalakon és bejegyzésekben. A widget az X-szel kommunikálva kéri le az adatokat, ezért előbb API-kulcsokat kell beszerezned és megadnod a UAE beállításai között.

## Az X API-kulcsok beszerzése

A widgethez egy X fejlesztői fiók, az abban létrehozott projekt és alkalmazás, valamint a **Consumer Key** és a **Consumer Secret** kell. A fejlesztői fiókhoz ellenőrzött telefonszám és e-mail-cím szükséges.

A widget az X API 2-es változatát használja. Az ingyenes hozzáférés nem engedi a tweetek lekérését, ezért az alkalmazáshoz az X **Basic** hozzáférési csomagját kell igényelned.

1. Jelentkezz be az X fejlesztői fiókodba, és kattints a jobb felső sarokban a **Developer Portal** gombra.
2. Kattints a **Create Project** gombra, és kövesd az utasításokat.
3. Add meg a projekt nevét, a felhasználási célt (tweetek beágyazása weboldalba), a leírást és az alkalmazás nevét. A projekt és az alkalmazás neve tetszőleges.
4. A projekt létrehozása után igényeld a **Basic** hozzáférést.
5. Az utolsó lépésben megjelenik az **API Key** és az **API Secret**. Mentsd el őket biztonságos helyre, mert a következő lépésben a UAE beállításai közé kell másolnod.

Ha elveszítetted a kulcsokat, újakat is generálhatsz: a **Developer Portal → Project → App** oldalon nyisd meg a **Keys and Tokens** lapot, és a **Consumer Keys** alatt kattints a **Regenerate** gombra. Ez új Consumer Key (API Key) és Consumer Secret (API Secret) párt hoz létre.

### A kulcsok megadása a UAE-ben

1. A WordPress-vezérlőpulton nyisd meg a **UAE → Widgetek** oldalt, és ellenőrizd, hogy az **X Feed** (**X-hírfolyam**) widget be van kapcsolva (lásd [Widgetek ki- és bekapcsolása](https://hub.hellowp.io/hu/plugins/ultimate-elementor/altalanos-widgetek-ki-be/)).
2. Nyisd meg a **UAE → Beállítások → Integrations** oldalt, és görgess az **X Feed** szakaszhoz.
3. Illeszd be a **Consumer Key** és a **Consumer Secret** értékét.
4. Kattints a **Save** gombra.

![Az Integrations oldal X Feed és Instagram Feed szakasza](./kepek/kozlemenyek-x-instagram-integracio.webp)

*Az Integrations oldal X Feed és Instagram Feed szakasza* (https://minta-bolt.hu/wp-admin/admin.php?page=uaepro)

A képen az **X Feed** szakasz **Consumer Key** és **Consumer Secret** mezője látszik, alatta az Instagram-hírfolyam mezőivel.

Ugyanazt a Consumer Key és Consumer Secret párt több weboldalon is használhatod.

## A widget hozzáadása oldalhoz

1. Szerkeszd az oldalt vagy bejegyzést az Elementorral.
2. Keresd meg a widgetlistában az **X-hírfolyam** widgetet, és húzd az oldalra.
3. Kattints a widgetre a szerkesztéséhez. A **Tartalom** lapon a **Fiók**, az **Elrendezés** és a **Tartalom** szakaszt találod, a **Stílus** lapon a megjelenést állíthatod.

Ha a kulcsokat még nem adtad meg, a **Fiók** szakaszban figyelmeztetés látszik, hogy a hírfolyam megjelenítéséhez be kell állítanod az X Consumer-kulcsokat.

### Fiók

![A Fiók szakasz az X-hírfolyam widgetben](./kepek/kozlemenyek-twitter-fiok.webp)

*A Fiók szakasz az X-hírfolyam widgetben* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

A képen a **Keresés alapja** lista, a hozzá igazodó beviteli mező és a **Gyorsítótár ideje (óra)** mező látszik.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Keresés alapja** | Megadja, hogy a tweeteket felhasználónév (**X-felhasználónév**) vagy hashtag alapján kéri le. A választástól függően a beviteli mező is megváltozik. | X-felhasználónév |
| **X-felhasználónév** | A fiók neve a @ jel nélkül. Hashtagnél a hashtag. | üres |
| **Gyorsítótár ideje (óra)** | Hány óránként frissüljenek a tweetek. A lekért tartalom ennyi időre a gyorsítótárba kerül. | 1 |

### Elrendezés

![Az Elrendezés szakasz az X-hírfolyam widgetben](./kepek/kozlemenyek-twitter-elrendezes.webp)

*Az Elrendezés szakasz az X-hírfolyam widgetben* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

A képen a **Tartalom elrendezése**, a **Rendezés szerint**, az **Oszlopok**, a **Bejegyzések száma**, a **Média megjelenítése**, a **Média mérete**, a **Tartalom hossza** és az **Azonos magasság** beállítás látszik.

| Beállítás | Mit csinál |
|---|---|
| **Tartalom elrendezése** | A tweetek megjelenése: rács, lista, idővonal vagy körhinta. Alapértéke **Rács**. |
| **Rendezés szerint** | A sorrend: a legújabb elöl (alapérték), a régebbiek elöl, kedvelés vagy megosztás szerint. |
| **Oszlopok** | Az oszlopok száma rács elrendezésnél. |
| **Bejegyzések száma** | Összesen hány tweet jelenjen meg. |
| **Média megjelenítése** | A tweetekhez tartozó képek megjelenítése. |
| **Média mérete** | A kép mérete, ha a média megjelenik. |
| **Tartalom hossza** | A tweet szövegéből látható rész hossza. |
| **Azonos magasság** | A tweetkártyák azonos magasságra igazítása rács elrendezésnél. |

Ha a **Tartalom elrendezése** értéke idővonal vagy körhinta, a **Tartalom** lapon új szakasz jelenik meg, **Idővonal** vagy **Körhinta** néven, az adott elrendezés külön beállításaival.

### Tartalom

![A Tartalom szakasz az X-hírfolyam widgetben](./kepek/kozlemenyek-twitter-tartalom.webp)

*A Tartalom szakasz az X-hírfolyam widgetben* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

A képen a megjeleníthető elemek kapcsolói látszanak: **Profil**, **X-név**, **X-felhasználónév**, **X-logó**, **Bővebben**, **Hírfolyam tartalma**, **Dátum** és **Tweet adatai**.

A **Tartalom** szakaszban elemenként kapcsolhatod ki a nem kívánt részeket:

- **Profil**: a profilkép; a **Profil stílusa** lista a kép alakját adja meg (alapérték: **Circle**, vagyis kör).
- **X-név** és **X-felhasználónév**: a fiók neve és a @felhasználónév.
- **X-logó**: az X emblémája a kártyán.
- **Bővebben**: a tweet melletti hivatkozás. A **Tovább olvasom szövege** a hivatkozás felirata, a **Hivatkozás célpontja** pedig megadja, hogy új ablakban nyíljon-e meg (alapérték: **Megnyitás új ablakban**).
- **Hírfolyam tartalma**: maga a tweet szövege.
- **Dátum**: a tweet időpontja.
- **Tweet adatai**: a tweethez tartozó adatok sora.

## Stílus

![A Térközök szakasz a Stílus lapon](./kepek/kozlemenyek-twitter-stilus.webp)

*A Térközök szakasz a Stílus lapon* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

A képen a **Térközök** szakasz csúszkái látszanak: a kártyák, az oszlopok és a sorok közötti térköz, valamint a profilkép, a név, a tartalom, a média és a dátum térközei.

A **Stílus** lap szakaszai:

- **Térközök**: a kártyák közötti, az oszlopok és a sorok közötti térköz, valamint a kártyán belüli elemek (profilkép, név és felhasználónév, tartalom, média, dátum és információk) közötti távolságok. Néhány beállítás az elrendezéstől függ: lista elrendezésnél a **Sorok közötti rés** látszik, rácsnál az **Oszlopok közötti térköz** is.
- **Idővonal** és **Körhinta**: csak az adott elrendezésnél jelenik meg, az elrendezés külön stílusbeállításaival.
- **Tartalom**: minden szövegelemhez (név, felhasználónév, a tweet szövege és a többi) külön szín és betűtípus állítható.
- **Kártya**: a tweetkártyák belső térköze, háttere, szegélye, színe, árnyéka és igazítása.
- **Kép**: a profilkép és az X-logó stílusa.