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.
Obs/observera : Det finns ett gratis Custom Twitter Feeds plugin, men den här artikeln kommer att använda Custom Twitter Feeds Pro-versionen. Den kommer med mycket mer avancerade funktioner som att filtrera timelines och kombinera flera Twitter feeds till en.
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.
Note : På grund av API-limiter kan Smash Balloon bara visa 1 till 30 tweets till en början, men fler kommer att ackumuleras med tiden.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dayo Olobayo says
Is there a way to customize the appearance of the recent tweets display on my WordPress site? For example, can I change the font size or colors to match my website’s design?
WPBeginner Comments says
With the Smash Balloon option, you can customize the look of the feed.
Kate says
Hi, I was following the first set of instructions, but when I paste my Twitter URL in the text box nothing happens. I don’t know if it matters that I have Divi Builder enabled on my wordpress site?
WPBeginner Support says
If it’s not embedding properly, you would want to try adding the twitter embed block and placing the url there.
Administratör
Glenn says
This seems to be an older article…I’m wondering how I can show my timeline..not my tweets but the people I follow. The Twitter Widgets page only shows Search, not my timeline or a list.
Thank you.
Glenn
Minhazul Islam says
Is there any plugin to do the same task?
Greg McGee says
I have successfully created a twitter feed on my wordpress site. Yaaay!!! Now the bad news. It disappears after 3 seconds. Booo!!! Where can I change the parameter that sets this limit? It is hiding from me very well. But I’m not all that smart, either.
Gopal sharma says
This is the best tutorial i found ever..
onya icha says
on mobile all my tweets displays and make my website to look funny .pls how can i solve this problem
Simeon Opeyemi says
Thanks. it worked for me!
gertrude says
I added this but apart from a link to my tweeter it doesn’t do anything. I have wordpress 3.8.1 and activated the default theme, then switched back to the one I am using. Still nothing. If there is any way you guys can help it would be great. Thanks
WPBeginner Support says
Trying switching off all plugins and then test, particularly if you are using any Twitter related plugin. If this does not work, then you need to break the widget code into two pieces. Paste the javascript part starting from the <script> in your theme’s header.php, and the link part in a text widget.
Administratör
K.T. Lynch says
For some reason the closing HTML tags are stripped out once I press save. This is appearing on my WP Sidebar:
Tweets de @lynchkt !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);
The ”Tweets de @lynchkt” is a hyperlink but otherwise it’s not working.
WPBeginner Support says
This could happen for many reasons. If you are using WordPress 3.8 then try to update to 3.8.1. Try switching to a default theme temporarily and see if you still get this error.
Administratör
Ines TR says
Hello!
I just see a buncg of words in my blog page after pasting the widget , why?
I saved it and tried several times but can´t fix the problem.
Abdul says
How do I get it on a wp page?
WPBeginner Support says
you can paste the same code in WordPress pages as well as posts.
Administratör
Douglas Vautour says
Thanks a lot! All of the twitter widgets I found wanted way too much information! I feel better getting it from the source.
Ann says
Hi!
Thank you for sharing this. My regular Twitter widgets just weren’t working!
Nancy Closson says
I am looking for a widget that allows you to select tweets from one twitter account rather than show all or recent tweets. Is this customization possible and is that what you describe with the favorites list? thanks you
WPBeginner Support says
yes this customization is possible but with these widgets. The favorites widget will show the tweets you have marked as favorites.
Administratör
gaston says
very useful!!
solved it in a buzz!
thanks!
Shana Manuel says
Wow! This took me 5 minutes to set up and I’m a total novice! Thanks for this article.
Founterior says
It works just fine !!!
patty says
Sweet. Thanks for this!
Bill Hutchison says
Thank you for this. I have used widgets for this in the past but have been generally unsatisfied with the results. The seems to be the best solution for including Twitter in the sidebar.
Thanks again.
Joan says
I have a question:
Is it possible to personalize the twitter widget weight? With the old twitter code was possible.
Thanks
Chris Race says
Thanks for this article! Was looking for a new widget as my old one stopped working – and found this simple solution. Great!
Rickard says
I don’t know, but every single solution I’ve tried to use is messing with the admin panel more often than anyone can find ok.
Is there anyway to fight the ”waiting for platform.twitter.com” which breaks many functions in the WP-admin-panel?
I guess this happens because of a overload on platform.twitter.com(?) and pages in the wp-admin-panel will continue loading forever…
Might there be a way to set a time limit for the call, and if not found ignore it?
Editorial Staff says
This should have no impact on your WordPress admin panel. You are adding this in the widgets which only loads in the front-end of your website.
Administratör
Julien Maury says
I cannot agree more. There is another great thing with widget, they use streams (see streaming APIs) so you can display A LOT of tweets without worrying about rate limits.
And if you want to get a special feature you’ll add data-chrome=”noheader,nofooter,noborders,transparent” in the link. These new parameters allow you to make widgets ”design friendly”.
Gordon Chambers says
Hi,
I’ve been trying the above but when I click save it changes the value added in the ID box to a shortened number. I have tried to add both my twitter accounts and it does the same?
Julien Maury says
That’s weird. Check the quotes – they have to be real quotes not like in this comment section.