Så här displayed du senaste tweets i WordPress (steg för steg)

Efter att ha drivit WPBeginner i över ett decennium har vi lärt oss att bygga en stark gemenskap är nyckeln till framgångsrikt bloggande. Vi har våra lojala läsare att tacka för vår framgång, och vi letar alltid efter nya sätt att få kontakt med dem.

Ett bra sätt att bygga upp en gemenskap är att visa dina senaste tweets på din WordPress-webbplats. Detta håller din webbplats fräsch och låter besökarna se vad du gör på sociala medier.

Vi har testat många sätt att visa tweets på WordPress-webbplatser, och vi kommer att dela med oss av våra tre bästa metoder för att göra just det. Alla dessa metoder är nybörjarvänliga, så du kommer enkelt att kunna lägga till ditt Twitter-flöde på din webbplats.

Varför ska du displayed senaste tweets på din site i WordPress?

X/Twitter är en av de mest populära plattformarna för social media på marknaden. Genom att displayed senaste tweets på din WordPress website kan du förbättra din närvaro och ditt engagement på nätet på flera sätt.

Till att börja med, när användare besöker din website och ser ditt feed i social media, kan de bli tillräckligt nyfikna för att clicka sig vidare till ditt Twitter account och följa dig, vilket ökar din räckvidd.

Dessutom kan tweets fungera som en realtids update om vad som händer på din website eller på ditt företag. Detta kan uppmuntra engagemang bland din publik, eftersom de kan interagera med dina tweets direkt.

Senaste tweets kan också fungera som sociala bevis på din WordPress site. Du kan retweeta positiva reviews eller personer som rekommenderar dina produkter, vilket hjälper till att bygga förtroende hos prenumeranter eller customers.

Med detta i åtanke, låt oss titta på de olika metoderna för att displayed senaste tweets på din WordPress website. Du kan använda snabblänkarna under för att hoppa till en specifik metod:

Metod 1: Embed Tweets manuellt i Gutenberg Block Editor (inget plugin)

Den första metoden för att visa dina senaste inlägg i WordPress är genom att manuellt embeda din Twitter-profil eller timeline på din WordPress page, post eller widget (för användare av klassiska themes).

Precis som att lägga till en YouTube-video gör WordPress det enkelt att embedda Twitter content som en enda tweet eller en timeline. Dess oEmbed-funktion kan automatiskt förvandla en URL till content till en inbäddningskod när den klistras in i block editor.

Först måste du hitta och kopiera URL: en för den Twitter-profil eller tweet som du vill embedda.

URL:en till WPBeginners Twitter-profil är till exempel https://twitter.com/wpbeginner

Under tiden gillar URL för en enda tweet detta: https: //twitter.com/wpbeginner/status/1604852592827326464

Följ sedan bara en av metoderna under:

Displaying Recent Tweets in a WordPress Post or Page (Visa senaste inlägg eller pages i WordPress)

Först loggar du in på din WordPress dashboard och öppnar block editor för ett WordPress post eller page.

Om du vill skapa ett nytt inlägg eller en ny page kan du göra det genom att gå till Posts/Pages ” Add New.

Sedan klistrar du bara in URL: en för Twitter-profilen som du kopierade tidigare i området ”Skriv / för att välja ett block”.

Du kan se detta markerat under.

När du har gjort det kommer blocket omedelbart att förvandlas till ett Twitter timeline-block som visar de senaste Tweets från det vissa kontot.

I blockinställningarnas sidebar kan du välja att resize blocket för mindre enheter för att göra det mer responsivt för mobil view.

Dessutom är du välkommen att add to fler block till sidan eller posten för att uppmuntra användare att följa ditt Twitter account.

När du är klar klickar du bara på ”Update” eller ”Publicera” för att göra ändringarna live.

Den här metoden addar dina senaste tweets i en box med en vertikal slider. Boxen innehåller de 20 senaste tweetsen och knappen ”View more on Twitter” i slutet.

Så här gillar vi vår timeline på Twitter:

Om du använder ett WordPress block theme kan du också använda samma metod för att embeda ett Twitter feed i Full Site Editor och visa de senaste tweetsen i en pattern eller template-del.

Du kan lära dig mer om detta i vår kompletta guide till WordPress Full Site Editing.

Displaying Recent Tweets in a WordPress Widgetar Area

Om du använder ett klassiskt WordPress theme och vill visa dina senaste tweets i ett widget area (gillar en sidebar), följ då bara dessa steg.

Gå först till Appearance ” Widgetar. Sedan klickar du på knappen ”+ Add New” i ditt valda widgetområde och selectar Twitter-widgeten.

Härifrån klistrar du bara in URL:en till Twitter-kontot eller posten i lämpligt fält.

Sedan klickar du på ”Embed”.

You can then update your widgets and preview the Tweets widget live on your site.

Så här ser timelinen ut i vår sidebar i WordPress:

Metod 2: Visa senaste tweets med hjälp av ett Twitter Feed-tillägg (rekommenderas)

Den andra metoden för att add to senaste tweets till din WordPress site är med ett Twitter plugin. Anledningen till att vi rekommenderar den här metoden är att den erbjuder mycket fler alternativ för customize än den tidigare metoden, vilket gör att du kan anpassa feeden till din pages design.

För detta kommer vi att använda Smash Balloon Custom Twitter Feeds. Detta plugin hjälper till att skapa beautiful sociala feeds av olika typer. Du kan visa tweets baserat på hashtags, search termer, omnämnanden, timelines, och mer.

Du måste först installera och aktivera WordPress plugin. När det är aktivt, gå till ditt WordPress admin area, navigera till Twitter Feed ” Settings, och klistra in din license key i lämpligt fält.

Efter det måste du aktivera licensen och clicka på ”Save Changes”.

Nu går du bara till Twitter Feed ” All Feeds.

Klicka sedan på knappen ”+ Add New”.

Om detta är första gången du lägger till ett Twitter feed med Smash Balloon, kommer du att bli ombedd att kontrollera din email address.

Gå bara vidare och klicka på knappen ”Anslut” för att göra det och följ instruktionerna på skärmen.

När du är klar kommer du att återvända till Custom Twitter Feeds plugin page och bli ombedd att välja en feed-typ.

Med Custom Twitter Feeds kan du välja att embeda en användares timeline feed, en hashtag feed eller en search feed. I det här exemplet använder vi det första alternativet. När du har gjort ditt val klickar du bara på ”Next”.

På nästa vy kan du skriva in det Twitter handle som du vill embedda på din WordPress website.

Därefter klickar du på ”Next” igen.

Låt oss nu välja en template för Twitter Feed. Det finns 7 att välja mellan, och du kan alltid ändra den senare om du inte tycker att den passar din pages design.

När du har gjort ditt val, fortsätt och click ”Next”.

I det här skedet bör du komma fram till gränssnittet för redigering av Twitter Feed. Du kommer att se en live preview på höger sida av page och en panel till vänster där du kan konfigurera hur feeden ser ut.

Det finns två tabs: ”Customize” och ”Settings”.

Låt oss börja med Customize. Om du väljer alternativet ”Feed Layout” kan du välja mellan de tillgängliga layouterna för feed (som lista, masonry eller carousel), ställa in antalet tweets som ska visas, tweaka feedhöjden och så vidare.

När du är klar med dessa inställningar klickar du bara på knappen ”Customize” högst upp för att gå tillbaka till main menu.

En annan sak du kan göra är att aktivera knappen Ladda mer, som kommer att visas under dina visade tweets. Det är en praktisk funktion om du har massor av tweets men inte kan visa dem all på samma page.

Klicka bara på alternativet ”Ladda fler knappar”, följt av knappen ”Aktivera”. Efter det kan du customize knappens appearance.

Om du går till fliken ”Inställningar” kan du se alternativ för att lägga till fler flödeskällor, använda tweetfilter och använda avancerade funktioner (som att lägga till anpassad CSS).

Du kan också clicka på knappen ”Clear Feed Cache” för att ta bort den tidigare feed-cachen. Nästa gång pluginet behöver visa ditt Twitter feed, måste det hämta de senaste tweetsen från X/Twitters servrar istället för att använda de gamla cachade data.

Låt oss prova att lägga till filter till dina tweets genom att klicka på alternativet ’Filter’.

Här kan du välja att inkludera svar och retweets, visa tweets baserat på vilka ord som är allow eller blockerade, eller dölja specifika tweets.

När du är nöjd med hur Twitter Feed ser ut kan du clicka på knappen ”Save”.

För att add to the Twitter Feed to your page or widget area, just click on the ”Embed” button at the top-right corner.

Efter det visas en popup som visar hur du kan visa Twitter Feed: med en shortcode, ett block eller ett widget.

Oavsett vilken metod du väljer är det första du behöver göra att kopiera shortcoden eftersom du kommer att behöva den.

Om du sedan vill bädda in Twitter-feeden på en page klickar du på knappen ”+ Add to a Page”.

När du har gjort det kan du välja en befintlig page från din WordPress website och click ”Add”.

You will then be directed to the WordPress block editor of your chosen page.

Klicka på knappen ”+” för att lägga till block var som helst på sidan och select Twitter Feed-blocket.

Nu kanske Twitter Feed som du skapade tidigare inte visas direkt.

Om detta händer you, klistra bara in shortcoden i fältet ”Shortcode Settings” i blockets sidebar för inställningar.

Därefter klickar du på ”Tillämpa Changes”.

När du är klar kan du gå vidare och klicka på ”Update” för att göra ändringarna live.

Så här gillar Twitter Feed på vår demo site:

Om du vill visa din Twitter Feed i ett widget area, clickar du bara på alternativet ”+ Add to a Widget”. You will be redirect to the widget editor next.

Sedan är det bara att leta upp och välja widgeten ”Twitter Feed”.

På samma sätt som den tidigare metoden klistrar du bara in shortcoden i sidebaren för blockinställningar och klickar på ”Tillämpa Changes”.

Du kommer då att se din nyskapade Twitter Feed i live preview.

Slutligen klickar du på ”Update” för att göra ändringarna slutgiltiga.

Du kan sedan besöka din live website för att se hur feeden gillar att se ut:

Metod 3: Visa senaste tweets i WordPress med Twitter Publish (inget plugin + HTML)

Med den sista metoden kan du add to senaste inlägg på Twitter med hjälp av funktionen Twitter Publicera.

Med Twitter Publish kan du enkelt skapa inbäddningskoden för olika typer av Twitter-innehåll, till exempel en tweet, en video, en tidslinje eller en knapp (som en Follow- eller Share-knapp).

Denna metod allow you to customize hur det embedda elementet ser ut innan du lägger till det på din WordPress blogg eller website. Den är eller ej lika kraftfull som den andra metoden, men den är värd att nämna eftersom den är gratis.

I den här tutorialen visar vi you hur du använder Twitter Publicera för att embedda en timeline. Först måste du besöka Twitter Publicera website och sedan klistra in din Twitter profil URL i ”What would you like to embed?” boxen.

När det är gjort klickar du på pilen icon.

Efter det kommer du att bli ombedd att välja ett visningsalternativ: Embed Timeline eller X/Twitter Buttons.

Du bör välja alternativet ”Embedded Timeline”, eftersom du vill visa din Twitter timeline med senaste tweets.

När du väljer alternativet display kommer det omedelbart att skapa embed-koden för dina senaste tweets. Du kan gå vidare och klicka på ”Copy Code” för att embed den anpassade HTML-koden direkt.

Alternativt kan du clicka på ”Set customization options” för att customize hur den embedade timelinen ser ut.

Här kan du customize timelines höjd och bredd, välja ett ljust eller mörkt läge och aktivera en språköversättning för tweets om det behövs.

Du kan se hur det embedade elementet kommer att gilla under inställningarna. När du är klar klickar du bara på ”Update”.

Embed-koden kommer nu att innehålla de customize-inställningar du har valt för timeline.

Klicka bara på ”Copy Code” för att fortsätta.

Gå nu tillbaka till din WordPress dashboard och öppna block editor för en page, post eller widget area.

Efter det klickar du bara på knappen ’+’ add block var som helst i editorn och väljer Custom HTML-widget eller block.

Gå nu vidare och klistra in koden för embed från tidigare i fältet.

När du har gjort det kan du clicka på knappen ”Preview” för att se hur feeden gillar att se ut.

Efter det är du välkommen att lägga till fler element på sidan, posten eller widgetar area. Sedan är det bara att update eller publicera den.

Så här gillar vi vår demo website:

Bonus Tips: Add More Social Media Feeds till WordPress

Runar you other social media platforms for your brand or business? Om så är fallet kanske du vill visa andra sociala feeds än Twitter på din website.

Genom att displayed olika sociala feeds på din WordPress site kan du låta besökarna veta vilka plattformar de kan följa dig på, vilket ökar antalet följare.

Att visa upp dina sociala flöden har också en viktig fördel jämfört med att visa de vanliga knapparna med sociala icons. Det kan visa besökarna vilket content de skulle missa om de ej följde dig på dina Social Networks, vilket skapar en ”fear of missing out”.

Med Smash Balloon kan du displaya och customize all slags social media feeds på din WordPress website. På så sätt ser alla feeds bra ut med det theme du använder.

Kontrollera bara tutorials under hur du kan visa olika sociala feeds i WordPress:

• Så här skapar du ett Custom Facebook Feed i WordPress
• Så här skapar du ett customize Instagram Photo Feed i WordPress
• Så här visar du senaste videoklipp från YouTube-kanalen i WordPress
• Hur man embedar TikTok videoklipp i WordPress (enkla metoder)
• Så här visar du recensioner från Google, Facebook och Yelp i WordPress

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du visar de senaste tweetsen i WordPress. Du kanske också vill se vår guide om hur du automatiskt lägger upp nya Instagram-foton i WordPress eller vårt expertval av de bästa plugins för sociala medier i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.