Hvordan legge til Twitter Mate til Shopify Nettsted

Hvis du abonnerer på en tjeneste fra en lenke på denne siden, kan Reeves and Sons Limited tjene en provisjon. Se vår etisk uttalelse.

Lær hvordan du legger til en Twitter mate til din Shopify nettstedet lar merkevaren din vise frem sin sosiale tilstedeværelse på sider som hjemmesiden din, bloggen og til og med produktsider.

Den store delen med å bygge inn en Twitter feed på nettstedet ditt er at det oppdateres automatisk Twitter innhold på nettstedet ditt, noe som betyr at du ikke trenger å kopiere innlegg fra din Twitter side.

I tillegg a Twitter feed er en utmerket måte å injisere en betydelig mengde bilder på nettstedet ditt; mange merker bruker Twitter gallerier eller feeder for å fungere som deres hjemmeside-bildegallerier.

Det er to måter å legge til en Twitter mate til din Shopify nettside:

  1. Med en app
  2. Ved å bygge inn kode for en Twitter widget

I denne guiden vil vi lede deg gjennom begge metodene, slik at du kan bestemme hvilken som fungerer best for deg. Vi anbefaler å prøve hvert alternativ, siden du kan finne ut at det ene ser ut eller fungerer bedre enn det andre, avhengig av nettstedets layout og arbeidsflyt.

Fortsett å lese for å lære alt om hvordan du legger til en Twitter mate til en Shopify hjemmeside!

Hvordan legge til Twitter Mate til Shopify Nettsted

Til å begynne med skal vi utforske hvordan du legger til en Twitter mate til Shopify med en app. Det er flere Twitter apps i Shopify App Store, som alle gir unik funksjonalitet. Noen gir deg knapper på sosiale medier, Twitter antall følgere, eller til og med automatisk posting. Det vi derimot ser etter er en app for å synkronisere din nåværende Twitter feed, som viser et visst antall av de siste innleggene fra kontoen din (eller en annen offentlig konto).

Metode 1: Legg til Twitter Mate til Shopify med en app

Det er noen gratis og noen betalte, Twitter feed-apper tilgjengelig for nedlasting via Shopify App Store. I denne opplæringen bruker vi Zestard Twitter Feed-appen, siden den gir funksjonaliteten som kreves, og den er gratis. Hvis du bestemmer deg for en annen app, foreslår vi at du prøver ut alle gratisappene først, siden dette ikke akkurat er en funksjon du bør betale for.

For å begynne, installer Zestard Twitter Feed-app på din Shopify butikk. Hvis du fortsatt kommer i gang med Shopify, lære hvordan du lager din butikk her. Du kan finne apper ved å logge på din Shopify konto, og går til Legg til appereller navigere direkte til App Store.

Klikk Legg til app i Shopify App Store, altså Installer app når den bringer deg tilbake til dashbordskjermen med informasjon om tillatelser og personvern.

installere appen - hvordan legge til Twitter mate til Shopify nettsted

Når den er installert, vil du se en ny fane for Twitter under Apps fanen i Shopify. Det er også en del om Hvordan bruke appen, som du kan følge for å sette den opp riktig.

Noe konfigurasjon er nødvendig før du kan se noen Twitter feeds på frontend. Gå til Tidslinjeinnstillinger å starte.

drar til Twitter Feed-app

Denne siden inneholder flere felt for å tilpasse det generelle utseendet og innholdet i feeden.

Det viktigste feltet å fylle ut er Feednavn; skriv eller lim inn Twitter håndtaket du vil trekke fra. Det er mulig å vise feeden fra alle offentlige Twitter profil.

Andre innstillinger inkluderer:

  • Fôrboksbredde
  • Høyde på mateboks
  • Feed-tema (lys eller mørk)
  • Feed Limit (viser bare et visst antall nylige tweets)
  • Datalink farge
  • Bakgrunnsfarge for feed

Når du er ferdig med å tilpasse, sørg for at du klikker på Lagre endringer knappen for å gjengi en forhåndsvisning.

plassering i feednavnet

Etter å ha klikket Lagre endringer, genererer appen en forhåndsvisning av Twitter mate. Rull gjerne gjennom feeden og gå tilbake for å justere innstillingene basert på hva du ønsker å oppnå.

en forhåndsvisning av Twitter mate inn Shopify

Rett over forhåndsvisningen ser du at appen også genererte en kortkode for feeden. Dette er en unik kodebit du kan lime inn hvor som helst på din Shopify nettsted. Klikk for å Kopier koden til utklippstavlen.

kortkoden

De Twitter Feed-appen viser en popup der du enkelt kan kopiere koden. Alt du trenger å gjøre er å bruke kortkoden CTRL + C (Command + C for Mac) for å kopiere kortkoden til datamaskinens utklippstavle.

kopierer kortkoden for hvordan du legger til Twitter mate til Shopify nettsted

Det kan være lurt å plassere Twitter lever av en Shopify nettsiden, for eksempel på Om oss-, Kontakt- eller Support-sidene dine. For å gjøre det, gå til Nettbutikk > Sider in Shopify. Åpne den nye siden du vil legge til feeden for. Klikk på <> (Vis HTML) for å bytte fra Visual Editor til HTML Code Editor.

ved å velge HTML-editor

Lim inn den tidligere kopierte kortkoden i HTML-editoren. Hvis det er annet innhold på siden, velger du bare hvor du vil at feeden skal gå, og setter inn koden der. Husk å lagre siden.

lime inn kode i Shopify side

Naviger til frontenden av siden ved å forhåndsvise eller gå til nettadressen. Du vil nå se Twitter feed vises nøyaktig der du satte inn kortkoden.

resultatene på frontend

Mange nettbutikkeiere vil heller lære å legge til Twitter mate til en Shopify hjemmeside. I så fall, Shopify gir en visuell tilpasning for hjemmesiden, noe som gjør det enda enklere å sette inn Twitter feed kortkode.

For det, gå til Nettbutikk > Temaer > Tilpass.

Deretter finner du området der du vil plassere Twitter mate. Klikk på Legg til seksjon knappen i dette området. Søk etter Tilpasset væske temadelen og sett den inn i Shopify.

legge til en seksjon

De Tilpasset væske temaseksjonen presenterer flere innstillinger på venstre side. Den viktigste av dem er Tilpasset væske felt. Lim inn kortkoden som tidligere ble kopiert fra Twitter Feed-app.

Etter å ha klikket Spar, vil du se Twitter feed gjengitt i Shopify forhåndsvisning av hjemmesiden til høyre.

Du kan til og med tilpasse delen litt med alternativer for:

  • Fargevalg
  • Seksjon Polstring
  • Custom CSS
hvordan du legger til Twitter mate til Shopify nettsted som bruker den tilpassede væskedelen

Den siste måten å sette inn en kortkode fra Twitter Feeds-appen er ved å legge den til den faktiske temakildekoden. Dette anbefales vanligvis bare hvis du ønsker det Twitter feed for å vises globalt i visse seksjoner eller sider.

For å gjøre det, gå til Nettbutikk > Temaer in Shopify. Klikk på Ellipsis (…) for å vise flere alternativer. Klikk på Rediger kode fra rullegardinmenyen.

redigeringskode

Velg theme.liquid fil og lim inn koden hvor du vil innenfor temakodingen. Som et alternativ kan du velge å endre maler or Seksjoner for mer kontroll over hvor Twitter feed vises.

hvordan du legger til Twitter mate til Shopify nettsiden gjennom temafilene

Andre innstillinger finner du i Twitter Feed-appen inkluderer:

  • Alternativer for å bygge inn en enkelt tweet (eller retweet)
  • Et verktøy for å generere en Twitter deleknapp
  • Alternativer for å vise hashtag-feeder

Metode 2: Legg til Twitter Mate til Shopify med en Embedded Twitter Widget

Twitter tilbyr en måte å publisere enhver offentlig tidslinje på nettstedet ditt. Dette betyr at du har muligheten til å vise merkevarens feed, eller innleggene fra en annen konto.

For å komme i gang, gå til Publisere.Twitter. Med.

Lim inn eller skriv inn URL-en til Twitter profilen du vil vise som en feed på din Shopify butikk. Klikk på pilknappen for å fortsette.

lime inn en Twitter URL

Her har du to alternativer:

  1. Innebygd tidslinje
  2. Twitter knapper

De Twitter knapper er nyttige for å legge til en følg eller nevne-knapp et sted på nettstedet ditt. Men for denne artikkelen er vi mer fokusert på å få en Twitter feed skal vises. Så velg Innebygd tidslinje alternativet.

velge en innebygd tidslinje på Twitter

Twitter genererer automatisk Twitter feed-widget-kode. Vi foreslår imidlertid at du klikker på Angi tilpasningsalternativer lenke for å formatere feeden fullstendig før den publiseres på nettstedet ditt.

angi tilpasningsalternativer

Dette avslører flere innstillinger for å endre utseendet til feed-widgeten din:

  • Høyde
  • Bredde
  • Se (mørkt eller lys)
  • Språk (Du kan vanligvis bare gå med Automatisk)

Klikk på Oppdater-knapp for å se endringene dine i forhåndsvisningen nedenfor. Som du kan se, vår enkle endring fra Lett til mørk allerede gjengitt i forhåndsvisningen.

tilpasse Twitter widget

Når du er fornøyd med måten du Twitter feed ser ut, klikk på Kopier kode for å kopiere widgetkoden til datamaskinens utklippstavle.

kopiering av Twitter kode

Nå er det på tide å lære hvordan du legger til Twitter mate til din Shopify nettsted. Det enkleste alternativet er å plassere feeden på din Shopify hjemmeside, via en Shopify seksjon.

Gå til Nettbutikk > Temaer > Tilpass å åpne Shopify visuell tilpasning. Finn området på hjemmesiden du vil sette inn Twitter mate. Klikk på en av Legg til seksjon knapper for å avsløre Shopifysin samling av seksjoner. Bla gjennom listen eller søk etter Tilpasset væske seksjon. Klikk for å legge det til på siden.

legge til en seksjon

Bruke Tilpasset væske feltet for å lime inn den tidligere kopierte koden (fra Twitter nettsted). Juster gjerne andre seksjonsinnstillinger som Fargevalg, Seksjon Polstringeller Custom CSS.

Du vil legge merke til at til å begynne med er alt som vises en lenke til dine tweets Twitter konto.

lime inn koden

Du må bare klikke på Spar knapp for Shopify å gjengi Twitter feed i tilpasset forhåndsvisning.

hvordan du legger til Twitter mate til Shopify nettstedet i tilpasseren

En ekstra måte å legge til en Twitter feed via innebygd kode er ved å plassere den på en bestemt side i Shopify. Gå til Nettbutikk > Sider for å oppnå dette. Åpne siden du vil redigere.

Når du er i sideredigeringsprogrammet, klikker du på Vis HTML (<>) knapp. Dette bytter fra Visual Editor til Custom HTML Editor, som kreves for å legge til kode.

går til en side

Lim inn koden du opprinnelig kopierte fra Twitter. Klikk på Spar or Publiser knappen for at endringene skal tre i kraft.

lime inn kode på en side

Enten forhåndsvis siden eller gå til frontend-visningen. Her vil du se Twitter feed som vises sammen med annet innhold du kan ha hatt på den siden.

twitter feed på frontend

Den siste måten å bygge inn en Twitter widget med kode er ved å bruke Shopify temafiler. Gå til Nettbutikk > Temaer å begynne. Velg Ellipsis (…) knappen, velg deretter Rediger kode.

rediger kode i Shopify

De theme.liquid fil gir deg full kontroll over temaet du for øyeblikket har installert på Shopify. Lim inn Twitter feedkode der du vil at feeden skal vises i temaet. Ellers er det mulig å bruke Mal og Seksjon filer i tilfelle du heller vil Twitter feed vises bare i visse deler av nettstedet ditt, for eksempel i sidefeltet.

hvordan du legger til Twitter mate til Shopify nettsted som bruker temafilene

Slik legger du til en Twitter Mate til en Shopify Nettside!

Du har kanskje lagt merke til at du bruker en Shopify app oppretter fortsatt en kortkode som du kan plassere hvor som helst på nettstedet ditt. Det kan få deg til å spørre: "hva er vitsen med å bruke en app?" Det er tre grunner:

  1. Å bruke en app betyr at alt arbeidet ditt er samlet i ett dashbord: Shopify.
  2. Det er langt flere tilpasningsinnstillinger tilgjengelig i Twitter Feed-apper sammenlignet med det som tilbys gjennom Twitter innebygd widget.
  3. En kortkode er i det minste litt mindre skremmende enn koden levert av Twitter.

Og det er alt som skal til! Vi håper vår komplette guide om hvordan du legger til Twitter mate til Shopify har hjulpet deg med å finne ut om en plugin eller kodewidgeten er riktig for nettbutikken din. Vi oppfordrer deg til å se på andre apper for å bygge inn alternative sosiale medier-feeder, som en Instagram-feed, eller til og med for å vise noe som sosiale bevis eller TikTok-videoer. Gi oss beskjed i kommentarfeltet hvis du har spørsmål!

Joe Warnimont

Joe Warnimont er en Chicago-basert forfatter som fokuserer på e-handelsverktøy, WordPress og sosiale medier. Når han ikke fisker eller praktiserer yoga, samler han frimerker i nasjonalparker (selv om det hovedsakelig er for barn). Ta en titt på Joe's portefølje å kontakte ham og se tidligere arbeider.

Kommentar 0 Responses

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket *

Vurdering *

Dette nettstedet bruker Akismet for å redusere spam. Lær hvordan kommentaren din behandles.

Prøve Shopify i 3 måneder med $1/måned!
shopify-first-one-dollar-promo-3-months