Hogyan lehet hozzáadni Twitter Feed to Shopify weboldal

Ha előfizet egy szolgáltatásra az ezen az oldalon található hivatkozásról, a Reeves and Sons Limited jutalékot kereshet. Lásd a mi etikai nyilatkozat.

A hozzáadásának megtanulása a Twitter táplálja a tiéd Shopify A webhely lehetővé teszi, hogy márkája bemutassa társadalmi jelenlétét olyan oldalakon, mint a kezdőlap, a blog, sőt a termékoldalak is.

A beágyazás nagy része a Twitter a webhelyén található hírfolyam, hogy az automatikusan frissül Twitter tartalmat a webhelyén, ami azt jelenti, hogy nem kell átmásolnia a saját bejegyzéseit Twitter cimre.

Ezenkívül a Twitter a feed kiváló módja annak, hogy jelentős mennyiségű képet illesszen be webhelyére; sok márka használja Twitter galériák vagy hírcsatornák, amelyek kezdőlapjuk képgalériáiként szolgálhatnak.

Kétféleképpen adhat hozzá a Twitter táplálja a tiéd Shopify honlap:

  1. Egy alkalmazással
  2. A kód beágyazásával a Twitter modul

Ebben az útmutatóban mindkét módszert végigvezetjük, így eldöntheti, melyik a legmegfelelőbb az Ön számára. Javasoljuk, hogy próbálja ki mindegyik lehetőséget, mert előfordulhat, hogy az egyik jobban néz ki vagy jobban működik, mint a másik, a webhely elrendezésétől és a munkafolyamattól függően.

Folytassa az olvasást, hogy mindent megtudjon arról, hogyan adhat hozzá a Twitter táplálja a Shopify weboldal!

Hogyan adjunk hozzá Twitter Feed to Shopify weboldal

Kezdésként megvizsgáljuk, hogyan adható hozzá a Twitter táplálja Shopify egy alkalmazással. Több is van Twitter alkalmazások a Shopify App Store, amelyek mindegyike egyedi funkciókat kínál. Vannak, akik közösségi média gombokat adnak, Twitter a követők számlálása, vagy akár az automatikus közzététel. Mi azonban egy olyan alkalmazást keresünk, amely szinkronizálja az aktuális adatokat Twitter feed, amely megjeleníti a fiókod (vagy egy másik nyilvános fiók) legfrissebb bejegyzéseit.

1. módszer: Add Twitter Feed to Shopify egy alkalmazással

Vannak ingyenesek és fizetősek, Twitter feed alkalmazások letölthetők a Shopify Alkalmazásbolt. Ebben az oktatóanyagban a Zestardot fogjuk használni Twitter Feed alkalmazás, mivel biztosítja a szükséges funkciókat, és ingyenes. Ha másik alkalmazás mellett dönt, javasoljuk, hogy először próbálja ki az összes ingyenes alkalmazást, mivel ez nem egy olyan funkció, amelyért fizetnie kell.

A kezdéshez telepítse a Zestard Twitter Hírcsatorna alkalmazás a Shopify bolt. Ha még csak most kezdi Shopify, tanulj hogyan hozza létre itt az üzletét. Az alkalmazásokat úgy találhatja meg, ha bejelentkezik Shopify fiókot, és továbbmegy Alkalmazások hozzáadásavagy közvetlenül az App Store-ba navigálhat.

Kattints Alkalmazás hozzáadása a Shopify Akkor az App Store Applikáció telepítése miután visszaviszi az irányítópult képernyőjére a bemenettelformataz engedélyekről és a magánéletről.

az alkalmazás telepítése - hogyan kell hozzáadni Twitter táplálja Shopify

A telepítés után új lapot fog látni a következőhöz: Twitter takarmány alatt a Apps lap Shopify. Van egy rész is Hogyan használjuk az alkalmazást, amelyet követve megfelelően beállíthatja.

Bármelyik megtekintése előtt bizonyos konfigurációra van szükség Twitter a frontendről táplálkozik. Menj Idővonal beállításai kezdeni.

menni a Twitter Hírcsatorna alkalmazás

Ezen az oldalon számos mező található a hírcsatorna általános megjelenésének és tartalmának testreszabásához.

A legfontosabb kitöltendő mező a Hírcsatorna neve; írja be vagy illessze be a Twitter fogantyú, amelyről húzni szeretne. Bármilyen nyilvános hírfolyam megjeleníthető Twitter profil.

További beállítások a következők:

  • Feed Box Width
  • Etetődoboz magassága
  • Hírcsatorna téma (világos vagy sötét)
  • Feed Limit (csak bizonyos számú legutóbbi tweet megjelenítése)
  • Adatkapcsolat színe
  • Feed háttérszín

Ha végzett a testreszabással, feltétlenül kattintson a változtatások mentése gombot az előnézet megjelenítéséhez.

a hírcsatorna nevébe helyezve

Kattintás után változtatások mentése, az alkalmazás előnézetet készít a Twitter takarmány. Nyugodtan görgessen végig a hírcsatornán, és térjen vissza, hogy módosítsa a kívánt beállításokat.

előnézete a Twitter táplálja be Shopify

Közvetlenül az előnézet felett látni fogja, hogy az alkalmazás rövid kódot is generált a hírfolyamhoz. Ez egy egyedi kódrészlet, amelyet bárhová beilleszthet Shopify weboldal. Kattintson ide másolat a kódot a vágólapra.

a rövid kódot

A Twitter A Feed alkalmazás egy felugró ablakot jelenít meg a kód egyszerű másolásához. Mindössze annyit kell tennie, hogy használja a CTRL + C (Mac esetén Command + C) billentyűkódot, hogy a rövid kódot a számítógép vágólapjára másolja.

a rövid kód másolása a hozzáadáshoz Twitter táplálja Shopify

Érdemes elhelyezni a Twitter táplálkozik a Shopify weboldalon, például a Rólunk, Kapcsolatfelvétel vagy Támogatás oldalon. Ehhez lépjen a következőre: Online áruház > Oldalak in Shopify. Nyissa meg azt az új oldalt, amelyhez hozzá szeretné adni a hírcsatornát. Kattints a <> (HTML megjelenítése) gombbal válthat a Vizuális szerkesztőről a HTML kódszerkesztőre.

a HTML-szerkesztő kiválasztása

Illessze be a korábban másolt rövid kódot a HTML-szerkesztőbe. Ha más tartalom is található az oldalon, egyszerűen válassza ki, hová szeretné eljuttatni a hírcsatornát, és illessze be oda a kódot. Mindenképpen mentse az oldalt.

kód beillesztése Shopify oldal

Navigáljon az oldal kezelőfelületére az előnézet megtekintésével vagy a webcím megnyitásával. Most látni fogja a Twitter A hírcsatorna pontosan ott jelenik meg, ahol beszúrta a rövid kódot.

az eredményeket a frontenden

Sok online áruház tulajdonosa inkább megtanulja, hogyan kell hozzáadni Twitter táplálja a Shopify kezdőlap. Ebben az esetben, Shopify vizuális testreszabást biztosít a kezdőlaphoz, így még könnyebben beilleszthető a Twitter feed rövid kódja.

Ehhez menjen ide Online áruház > Témák > Testreszabás.

Ezután keresse meg azt a területet, ahová el szeretné helyezni Twitter takarmány. Kattints a Szakasz hozzáadása gombot ezen a területen. Keresse meg a Egyedi folyadék téma szakaszt, és illessze be Shopify.

szakasz hozzáadása

A Egyedi folyadék A téma rész számos beállítást mutat be a bal oldalon. Ezek közül a legfontosabb a Egyedi folyadék terület. Illessze be a korábban kimásolt rövid kódot Twitter Hírcsatornák alkalmazás.

Kattintás után Megtakarítás, látni fogja a Twitter takarmány renderelt a Shopify kezdőlap előnézete jobbra.

Még egy kicsit testre is szabhatja a szakaszt a következő opciókkal:

  • Színösszeállítás
  • Szakasz kitöltése
  • Egyéni CSS
hogyan kell hozzáfűzni Twitter táplálja Shopify weboldal az egyéni folyadék rész használatával

A rövid kód beszúrásának utolsó módja a Twitter A hírcsatornák alkalmazást úgy kell elérni, hogy hozzáadjuk a téma tényleges forráskódjához. Ez általában csak akkor ajánlott, ha szeretné Twitter hírfolyam globálisan megjelenjen bizonyos szakaszokon vagy oldalakon.

Ehhez lépjen a következőre: Online áruház > Témák in Shopify. Kattintson a Ellipszis (…) gombot a további lehetőségek megjelenítéséhez. Kattintson Kód szerkesztése a legördülő menüből.

kód szerkesztése

Válassza ki a theme.liquid fájlba, és illessze be a kódot a kívánt helyre a téma kódolásán belül. Alternatív megoldásként választhatja a módosítást sablonok or Szekciók hogy jobban ellenőrizhesse, hol a Twitter feed jelenik meg.

hogyan kell hozzáfűzni Twitter táplálja Shopify webhelyet a témafájlokon keresztül

Egyéb beállításokat a Twitter A feedalkalmazás a következőket tartalmazza:

  • Lehetőségek egyetlen Tweet (vagy Retweet) beágyazására
  • Eszköz létrehozásához a Twitter megosztás gomb
  • A hashtag feedek megjelenítésének lehetőségei

2. módszer: Add Twitter Feed to Shopify egy Embedded Twitter Widget

Twitter lehetőséget kínál bármilyen nyilvános idővonal közzétételére a webhelyén. Ez azt jelenti, hogy meg tudja jeleníteni a márkája hírcsatornáját vagy egy másik fiók bejegyzéseit.

A kezdéshez lépjen a következőre: Adja.Twitter.com.

Illessze be vagy írja be az URL-t Twitter profil, amelyet hírfolyamként szeretne megjeleníteni Shopify bolt. A folytatáshoz kattintson a nyíl gombra.

beillesztés a Twitter URL

Itt két lehetőséged van:

  1. Beágyazott idővonal
  2. Twitter gombok

A Twitter gombok hasznosak egy Követés vagy Megemlítés gomb hozzáadásához a webhelyén. De ennél a cikknél inkább arra koncentrálunk, hogy a Twitter hírfolyam megjelenéséhez. Tehát válassza ki a Beágyazott idővonal opciót.

beágyazott idővonal kiválasztása Twitter

Twitter automatikusan generálja a Twitter feed widget kódja. Javasoljuk azonban, hogy kattintson a Állítsa be a Testreszabási beállításokat link ehhez format a hírcsatornát, mielőtt közzéteszi a webhelyen.

testreszabási lehetőségek beállítása

Ez feltár néhány beállítást a hírcsatorna-modul megjelenésének megváltoztatásához:

  • Magasság
  • Szélesség
  • Nézd (sötét vagy világos)
  • Nyelv (általában csak az Automatikus beállítást választhatja)

Kattintson az Frissítés gomb a módosítások megtekintéséhez az alábbi előnézetben. Amint látja, az egyszerű változásunk fény nak nek sötét már megjelenítve az előnézetben.

testreszabva a Twitter modul

Ha egyszer elégedett vagy azzal, ahogy a sajátod Twitter hírcsatorna néz ki, kattintson a Kód másolása gombbal másolja a widget kódját a számítógép vágólapjára.

másolása a Twitter kód

Most itt az ideje megtanulni, hogyan kell hozzáadni a Twitter táplálja a tiéd Shopify weboldal. A legegyszerűbb megoldás az, ha a takarmányt a sajátjára helyezi Shopify honlapon keresztül a Shopify szakasz.

Ugrás Online áruház > Témák > Testreszabás megnyitni Shopify vizuális testreszabó. Keresse meg a kezdőlap azon területét, amelybe be szeretné illeszteni Twitter takarmány. Kattintson az egyikre Szakasz hozzáadása gombok felfedéséhez Shopifyszakaszok gyűjteménye. Görgessen végig a listán, vagy keresse meg a Egyedi folyadék szakasz. Kattintson ide, hogy hozzáadja az oldalhoz.

szakasz hozzáadása

Használja a Egyedi folyadék mezőbe a korábban másolt kód beillesztéséhez (a Twitter weboldal). Nyugodtan módosíthat más szakaszbeállításokat, például a Színösszeállítás, Szakasz kitöltésevagy Egyéni CSS.

Észre fogja venni, hogy kezdetben csak az Ön tweetjeire mutató hivatkozás jelenik meg Twitter fiók.

a kód beillesztése

Egyszerűen rá kell kattintania a Megtakarítás gombot Shopify hogy a Twitter feed a testreszabó előnézetében.

hogyan kell hozzáfűzni Twitter táplálja Shopify webhely a testreszabóban

Egy további módja annak, hogy a Twitter A beágyazási kódon keresztüli hírcsatorna egy adott oldalra helyezve Shopify. Menj Online áruház > Oldalak ennek megvalósításához. Nyissa meg azt az oldalt, amelyet szerkeszteni szeretne.

Az oldalszerkesztőben kattintson a gombra HTML megjelenítése (<>) gomb. Ez átvált a vizuális szerkesztőről az egyéni HTML szerkesztőre, amely a kód hozzáadásához szükséges.

oldalra megy

Illessze be azt a kódot, amelyről eredetileg másolt Twitter. Kattintson a Megtakarítás or Közzétesz gombot, hogy a változtatások életbe lépjenek.

kód beillesztése egy oldalra

Vagy tekintse meg az oldal előnézetét, vagy lépjen a kezelőfelület nézetére. Itt látni fogod a Twitter hírcsatorna az oldalon esetlegesen megtalálható egyéb tartalmak mellett.

twitter táplálja a frontendet

A beágyazás utolsó módja a Twitter A kóddal rendelkező widget a Shopify témafájlokat. Menj Online áruház > Témák kezdeni. Válaszd a Ellipszis (…) gombot, majd válassza a lehetőséget Kód szerkesztése.

kód szerkesztése be Shopify

A theme.liquid fájl teljes irányítást biztosít a jelenleg telepített téma felett Shopify. Illessze be a Twitter feed kódot, ahol szeretné, hogy a hírcsatorna megjelenjen a témában. Egyébwise, használható Sablon és a Rész fájlokat, ha inkább a Twitter hírcsatornák csak a webhely bizonyos részein jelennek meg, például az oldalsávon.

hogyan kell hozzáfűzni Twitter táplálja Shopify webhely a témafájlok használatával

Így kell hozzáadni a Twitter Adja meg a Shopify Weboldal!

Talán észrevette, hogy a Shopify app továbbra is létrehoz egy rövid kódot, amelyet bárhol elhelyezhet a webhelyén. Ez arra késztetheti, hogy megkérdezze: „mi értelme van egy alkalmazás használatának?” Ennek három oka van:

  1. Egy alkalmazás használata azt jelenti, hogy az összes munkája egyetlen irányítópulton található: Shopify.
  2. Sokkal több testreszabási beállítás érhető el Twitter Hírcsatorna-alkalmazások összehasonlítva azzal, amit a Twitter beágyazható widget.
  3. A rövid kód legalább egy kicsit kevésbé félelmetes, mint az általa biztosított kód Twitter.

És ez minden! Reméljük, hogy mi a teljes útmutatónk a hozzáadáshoz Twitter táplálja Shopify segített kideríteni, hogy a plugin vagy kód widget megfelelő az Ön e-kereskedelmi üzletéhez. Javasoljuk, hogy keressen más alkalmazásokat alternatív közösségimédia-hírcsatornák, például Instagram-hírcsatornák beágyazására, vagy akár közösségi bizonyítékok vagy TikTok-videók megjelenítésére. Ha kérdése van, tudassa velünk a megjegyzésekben!

Joe Warnimont

Joe Warnimont chicagói író, aki az e-kereskedelmi eszközökre, a WordPressre és a közösségi médiára összpontosít. Amikor nem horgászik vagy jógázik, bélyegeket gyűjt a nemzeti parkokban (bár ez főleg gyerekeknek szól). Tekintse meg Joe portfólióját felvenni vele a kapcsolatot és megnézni a múltbeli munkáit.

Hozzászólások 0 válaszok

Hagy egy Válaszol

E-mail címed nem kerül nyilvánosságra. Kötelező kitölteni *

Értékelés *

Ez az oldal Akismet-et használ a levélszemét csökkentése érdekében. Ismerje meg, hogyan dolgozik a megjegyzésed.

Megpróbál Shopify 3 hónapig 1$/hó áron!