Leren hoe een toe te voegen Twitter voer aan je Shopify website stelt uw merk in staat om zijn sociale aanwezigheid te laten zien op pagina's zoals uw startpagina, blog en zelfs productpagina's.
Het geweldige deel over het insluiten van een Twitter feed op uw website is dat deze automatisch wordt bijgewerkt Twitter inhoud op uw website, wat betekent dat u geen berichten van uw website hoeft te kopiรซren Twitter pagina.
Bovendien, een Twitter feed is een uitstekende manier om een โโaanzienlijke hoeveelheid afbeeldingen op uw website te injecteren; veel merken gebruiken Twitter galerijen of feeds om te dienen als afbeeldingengalerijen op hun startpagina.
Er zijn twee manieren om een โโtoe te voegen Twitter voer aan je Shopify website:
- Met een app
- Door code in te sluiten voor een Twitter widget
In deze gids zullen we u door beide methoden leiden, zodat u kunt beslissen welke het beste voor u werkt. We raden aan om elke optie te proberen, aangezien u misschien merkt dat de ene er beter uitziet of beter functioneert dan de andere, afhankelijk van de lay-out en workflow van uw site.
Blijf lezen om alles te weten te komen over het toevoegen van een Twitter voeren aan een Shopify website!
Hoe toe te voegen Twitter Voer naar Shopify Website
Om te beginnen zullen we onderzoeken hoe u een Twitter voeden aan Shopify met een app. Er zijn meerdere Twitter apps in de Shopify App Store, die allemaal unieke functionaliteit bieden. Sommigen geven je social media-knoppen, Twitter aantal volgers, of zelfs automatisch posten. Waar we echter naar op zoek zijn, is een app om je stroom te synchroniseren Twitter feed, die een bepaald aantal van de meest recente berichten van uw account (of een ander openbaar account) weergeeft.
Methode 1: toevoegen Twitter Voer naar Shopify met een App
Er zijn sommige gratis en sommige betaalde, Twitter feed-apps beschikbaar om te downloaden via de Shopify App Winkel. In deze zelfstudie gebruiken we de Zestard Twitter Feed-app, omdat deze de vereiste functionaliteit biedt en gratis is. Als u een andere app kiest, raden we u aan eerst alle gratis apps uit te proberen, aangezien dit niet bepaald een functie is waarvoor u zou moeten betalen.
Installeer om te beginnen de Zestard Twitter Feed-app op je Shopify winkel. Als je nog aan de slag gaat met Shopify, leren hoe u hier uw winkel kunt maken. U kunt apps vinden door in te loggen op uw Shopify account, en gaan naar Apps toevoegenof direct naar de App Store navigeren.
Klik App toevoegen in de Shopify App Store dan maar Installeer app zodra het je terugbrengt naar het dashboardscherm met informatover rechten en privacy.
Na installatie ziet u een nieuw tabblad voor Twitter onder de Apps tab in Shopify. Er is ook een rubriek over Hoe te gebruiken de app, die je kunt volgen om het goed in te stellen.
Er is enige configuratie vereist voordat u er een kunt bekijken Twitter feeds op de frontend. Ga naar Tijdlijn instellingen beginnen.
Deze pagina biedt verschillende velden voor het aanpassen van het algemene uiterlijk en de inhoud van de feed.
Het belangrijkste veld om in te vullen is de Feednaam; typ of plak in het Twitter handgreep waaraan u wilt trekken. Het is mogelijk om de feed van elk publiek weer te geven Twitter profiel.
Andere instellingen zijn:
- Breedte voerbak
- Hoogte voerbak
- Feedthema (licht of donker)
- Feedlimiet (toont alleen een bepaald aantal recente tweets)
- Kleur datalink
- Voer achtergrondkleur in
Als u klaar bent met aanpassen, klikt u op de Wijzigingen opslaan knop om een โโvoorbeeld weer te geven.
na het klikken op Wijzigingen opslaan, genereert de app een voorbeeld van het Twitter voer. Blader gerust door de feed en ga terug om de instellingen aan te passen op basis van wat u wilt bereiken.
Direct boven het voorbeeld zie je dat de app ook een shortcode voor de feed heeft gegenereerd. Dit is een uniek stukje code dat u overal op uw Shopify website. Klik naar Kopiรซren de code naar uw klembord.
De Twitter Feed-app onthult een pop-up waarmee u de code eenvoudig kunt kopiรซren. Het enige dat u hoeft te doen, is de sneltoets CTRL + C (Command + C voor Mac) gebruiken om de shortcode naar het klembord van uw computer te kopiรซren.
Misschien wilt u de Twitter voeden met een Shopify webpagina, zoals op uw Over ons-, Contact- of Ondersteuningspagina's. Ga hiervoor naar Online winkel > Pagina's in Shopify. Open de nieuwe pagina waarvoor u de feed wilt toevoegen. Klik op de <> (HTML weergeven) knop om over te schakelen van de visuele editor naar de HTML-code-editor.
Plak de eerder gekopieerde shortcode in de HTML-editor. Als er andere inhoud op de pagina staat, kiest u gewoon waar u de feed wilt plaatsen en voegt u de code daar in. Zorg ervoor dat u de pagina opslaat.
Navigeer naar de voorkant van die pagina door een voorbeeld te bekijken of door naar het webadres te gaan. Je ziet nu de Twitter feed precies weergegeven waar u de shortcode hebt ingevoegd.
Veel eigenaren van online winkels leren liever hoe ze moeten toevoegen Twitter voeren aan een Shopify Startpagina. In dat geval, Shopify biedt een visuele customizer voor de startpagina, waardoor het nog eenvoudiger wordt om de Twitter voer de shortcode in.
Ga daarvoor naar Online winkel > Thema's > Aanpassen.
Zoek vervolgens het gebied waarin u het wilt plaatsen Twitter voer. Klik op de Sectie toevoegen knop in dit gebied. Zoek naar de Aangepaste vloeistof themasectie en plaats deze in Shopify.
De Aangepaste vloeistof Thema-sectie presenteert verschillende instellingen aan de linkerkant. De belangrijkste daarvan is de Aangepaste vloeistof veld. Plak de shortcode die eerder is gekopieerd uit het Twitter Feeds-app.
na het klikken op Bespaar, je ziet de Twitter voer weergegeven in de Shopify startpaginavoorbeeld aan de rechterkant.
U kunt de sectie zelfs een beetje aanpassen met opties voor:
- Kleurenschema
- Sectie opvulling
- Aangepaste CSS
De laatste manier om een โโshortcode in te voegen vanuit het Twitter Feeds-app is door deze toe te voegen aan de eigenlijke thema-broncode. Dit wordt over het algemeen alleen aanbevolen als u de Twitter feed om globaal in bepaalde secties of pagina's te verschijnen.
Ga hiervoor naar Online winkel > Thema's in Shopify. Klik op de Ellips (โฆ) knop om meer opties weer te geven. Klik op Code bewerken In de vervolgkeuzelijst.
Kies het theme.liquid bestand en plak de code waar je maar wilt binnen de themacodering. Als alternatief kunt u ervoor kiezen om te wijzigen Sjablonen or Secties voor meer controle over waar de Twitter voer verschijnt.
Andere instellingen vindt u in de Twitter Feed-app omvat:
- Opties om een โโenkele Tweet (of Retweet) in te sluiten
- Een tool om een Twitter knop delen
- Opties om hashtag-feeds te tonen
Methode 2: toevoegen Twitter Voer naar Shopify met een ingesloten Twitter widget
Twitter biedt een manier om elke openbare tijdlijn op uw website te publiceren. Dit betekent dat je de mogelijkheid hebt om de feed van je merk of de berichten van een ander account weer te geven.
Ga naar om te beginnen Publiceren.Twitter.com.
Plak of typ de URL van het Twitter profiel dat u wilt weergeven als een feed op uw Shopify winkel. Klik op de pijlknop om verder te gaan.
Hier heb je twee opties:
- Ingesloten tijdlijn
- Twitter Knopen
De Twitter Knopen zijn handig om ergens op uw website een knop Volgen of Vermelden toe te voegen. Maar voor dit artikel zijn we meer gericht op het verkrijgen van een Twitter voer verschijnen. Selecteer dus de Ingesloten tijdlijn optie.
Twitter genereert automatisch de Twitter voer widgetcode in. We raden u echter aan om op de Stel aanpassingsopties in link naar format de feed volledig voordat u deze op uw website publiceert.
Dit onthult verschillende instellingen om het uiterlijk van uw feedwidget te wijzigen:
- Lengte
- Breedte
- Kijk (donker of licht)
- Taal (u kunt meestal gewoon kiezen voor Automatisch)
Klik op de Update-knop om uw wijzigingen in het voorbeeld hieronder te zien. Zoals u kunt zien, is onze eenvoudige verandering van Licht naar Donker al weergegeven in het voorbeeld.
Als je eenmaal tevreden bent met de manier waarop je Twitter feed eruitziet, klik op de Kopieer code knop om de widgetcode naar het klembord van uw computer te kopiรซren.
Nu is het tijd om te leren hoe u de Twitter voer aan je Shopify website. De makkelijkste optie is om de feed op je te plaatsen Shopify startpagina, via een Shopify pagina.
Ga naar Online winkel > Thema's > Aanpassen om de te openen Shopify visuele aanpasser. Zoek het gedeelte van de startpagina waar u het wilt invoegen Twitter voer. Klik op een van de Sectie toevoegen knoppen om te onthullen Shopify's verzameling secties. Blader door de lijst of zoek naar de Aangepaste vloeistof sectie. Klik om dat aan de pagina toe te voegen.
Gebruik de Aangepaste vloeistof veld om de eerder gekopieerde code (uit het Twitter website). Voel je vrij om andere sectie-instellingen aan te passen, zoals de Kleurenschema, Sectie opvullingof Aangepaste CSS.
U zult merken dat in eerste instantie alleen een link naar de Tweets van uw wordt getoond Twitter account.
Je hoeft alleen maar op de te klikken Bespaar knop voor Shopify de weergeven Twitter voer in het customizer-voorbeeld.
Een extra manier om een Twitter feed via insluitcode is door deze op een specifieke pagina te plaatsen Shopify. Ga naar Online winkel > Pagina's om dit te bereiken. Open de pagina waarin u wilt bewerken.
Klik in de pagina-editor op de Toon HTML (<>) knop. Hiermee schakelt u over van de visuele editor naar de aangepaste HTML-editor, die nodig is voor het toevoegen van code.
Plak de code waaruit u oorspronkelijk hebt gekopieerd Twitter. Klik op de Bespaar or Publiceer knop om de wijzigingen door te voeren.
Bekijk een voorbeeld van de pagina of ga naar de frontend-weergave. Hier zie je de Twitter feed weergegeven naast andere inhoud die u mogelijk op die pagina had.
De laatste manier om een Twitter widget met code is door gebruik te maken van de Shopify thema bestanden. Ga naar Online winkel > Thema's beginnen. Kies de Ellips (โฆ) knop en selecteer vervolgens Code bewerken.
De theme.liquid bestand geeft je volledige controle over het thema waarop je momenteel hebt geรฏnstalleerd Shopifyโ Plak het Twitter feed code waar u de feed wilt laten verschijnen in het thema. Anderwise, het is mogelijk om te gebruiken Sjabloon en sectie bestanden voor het geval u liever de Twitter feed verschijnen alleen in bepaalde delen van uw website, zoals in de zijbalk.
Zo voegt u een Twitter Voeden naar een Shopify Website!
Het is je misschien opgevallen dat het gebruik van een Shopify gebruiken creรซert nog steeds een shortcode die u overal op uw website kunt plaatsen. Dat kan ertoe leiden dat u zich afvraagt: "Wat heeft het voor zin om een โโapp te gebruiken?" Er zijn drie redenen:
- Het gebruik van een app betekent dat al uw werk op รฉรฉn dashboard staat: Shopify.
- Er zijn veel meer aanpassingsinstellingen beschikbaar in Twitter Voer apps in vergelijking met wat wordt aangeboden via de Twitter insluitbare widget.
- Een shortcode is in ieder geval iets minder intimiderend dan de code die door Twitter.
En dat is alles! We hopen dat onze volledige gids over hoe toe te voegen Twitter voeden aan Shopify heeft je geholpen erachter te komen of a plugin of code-widget is geschikt voor uw e-commerce winkel. We raden je aan om naar andere apps te kijken voor het insluiten van alternatieve social media-feeds, zoals een Instagram-feed, of zelfs voor het tonen van zoiets als social proof of TikTok-video's. Laat het ons weten in de comments als je nog vragen hebt!
Heb je vragen? Stel ze hier. 0 Reacties