Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här visar du de senaste videoklippen från YouTube-kanalen i WordPress

En av våra läsare frågade nyligen hur man kan visa de senaste YouTube-videorna på sin WordPress-webbplats. Det är en bra fråga, och vi har en enkel lösning.

Här på WPBeginner uppdaterar vi regelbundet vår egen YouTube-kanal med användbara WordPress-tutorials. Vi har själva lärt oss hur tidskrävande det kan vara att manuellt bädda in varje ny video på vår webbplats.

Tack och lov har vi hittat ett enkelt plugin för att automatiskt visa dina senaste YouTube-videor på din WordPress-webbplats. Den här metoden sparar tid och säkerställer att din webbplats alltid visar ditt senaste innehåll.

Låt oss gå igenom processen steg för steg.

How to show latest videos from YouTube channel in WordPress

Varför visa videoklipp från din YouTube-kanal i WordPress?

Om du run en YouTube-kanal utöver en WordPress site, är det vettigt att posta videoklippen till din website också.

Dessa videoklipp kan hjälpa till att genomföra besökarens uppmärksamhet och hålla dem kvar på din website längre. Detta kan öka antalet sidvisningar och minska avvisningsfrekvensen i WordPress.

Embed YouTube videoklipp kan till och med få fler besökare till din website. Faktum är att vår ultimata lista över bloggstatistik visar att blogginlägg med videoklipp får 83% mer trafik än de utan.

Om du bara vill add to ett litet antal videoklipp till din site är det enkelt att embedda YouTube-videor i blogginlägg i WordPress. Du måste dock lägga till varje new videoklipp manuellt, vilket tar tid och ansträngning.

Istället rekommenderar vi att du embedar ett YouTube feed som uppdateras automatiskt varje gång du postar en new video till din kanal. Detta garanterar att besökarna alltid kommer att se de allra senaste videoklippen, utan någon extra ansträngning från dig.

Med detta sagt, låt oss ta en titt på hur du visar de senaste videoklippen från din YouTube-kanal i WordPress. Du kan använda snabblänkarna under för att navigera genom den här artikeln:

Step 1: Installera och konfigurera ett YouTube Video Plugin

Det enklaste sättet att visa de senaste videoklippen från din YouTube-kanal är genom att använda det gratis tillägget Smash Balloon YouTube Feeds for YouTube. Detta plugin erbjuder massor av alternativ för customize för att justera hur din YouTube-kanals feed ser ut på din site.

Showing the latest videos from your YouTube channel in WordPress

För denna handledning kan du använda antingen Pro- eller gratisversionen av plugin-programmet, eftersom båda kommer att fungera. Det kompletta Smash Balloon plugin-kitet har också funktioner för att bädda in videor från TikTok, Facebook och så vidare.

Först installerar och aktiverar du pluginet Feeds for YouTube. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter aktivering, head över till YouTube Feed ” Settings och klicka på ’Add Source’.

Adding a YouTube channel to your WordPress website

På nästa vy, fortsätt och klicka på ”Anslut till YouTube via Google. Smash Balloon kommer nu att visa alla dina Google-konton.

Du kan antingen välja ett account från listan eller clicka på ”Use another account” och lägga till ett new Google account.

How to connect Smash Balloon to a WordPress website

Efter det ser du en varning om att Smash Balloon kommer att kunna komma åt information om din YouTube-kanal.

Förutsatt att du är nöjd med att gå vidare, click på ”Continue”.

Connecting YouTube to WordPress

Vid denna punkt måste du add till ID:n eller användarnamnet för din YouTube-kanal.

För att få denna information, head över till YouTube-webbplatsen och klicka på din profilbild i det övre högra hörnet. Välj sedan ”Your channel”.

Getting your YouTube channel ID or username

Titta nu på adressfältet i din webbläsare. Om you ser någon text efter ”user/” så är det ditt användarnamn för kanalen.

Om du ser ”channel/” följt av en string med siffror och bokstäver är detta kanalens ID:n, som du kan se på följande image.

How to get your YouTube channel username or ID

Kopiera bara värdet och växla tillbaka till din WordPress dashboard. Klistra nu in värdet i fältet som visar ”Enter Channel ID:n or användarnamnet.

När du har gjort det klickar du på knappen ”Nästa”.

Adding the YouTube channel ID or username to Smash Balloon

Step-by-Step 2: Skapa en API Key för YouTube i Google Console

Vid denna punkt kommer du att se följande message: No API Key Entered.

A YouTube error message, in the WordPress dashboard

För att undvika störningar rekommenderar vi att du skapar en YouTube API key och lägger till den på din WordPress blogg eller website.

Är det möjligt att visa mina YouTube-videor utan en API-nyckel?

Svaret är ja, det är det. Smash Balloon rekommenderar dock inte att du hoppar över detta steg eftersom det ger mer stabil och konsekvent tillgång till YouTube-data över tid. Detta minimerar risken för störningar när det gäller att hålla ditt flöde uppdaterat.

Gå till Google Console i en new tab och logga in med ditt Google account.

När du är inloggad i konsolen klickar du på dropdown-menyn i toolbaren. Som standard visar den namnet på ditt senaste Google Console-projekt.

The Google Cloud Console

Om det här är första gången du loggar in i Google Console måste du godkänna villkoren och bestämmelserna.

När du har gjort det klickar du på ”New Project”.

Creating a new project in the Google Console

You kan nu skriva in ett namn för projektet. Detta är bara för din referens så du kan använda vad du vill.

När du har gjort det klickar du på ”Create”.

Creating a new project for YouTube API key

Klicka nu på ikonen ”Sök” och skriv in ”YouTube Data API”.

Under ”Marketplace” hittar du YouTube Data API och klickar på det.

Enabling the YouTube Data API

Detta tar dig till en vy där du kan aktivera nyckeln för att göra YouTube API requests.

För att göra detta klickar du helt enkelt på knappen ”Aktivera”.

How to enable the YouTube Data API

I menyn till vänster klickar du på ”Credentials”.

När du har gjort det väljer du ”Create Credentials”.

How to create a YouTube API in the Google Cloud Console

I dropdown-menyn klickar du på ”API key”.

Efter några ögonblick kommer du att se en popup med ”API key created”. Du måste add to den här informationen till din website, så obs/observera den.

Creating a YouTube API key for your WordPress website

Som standard är YouTube API key obegränsad. För att hindra andra från att använda API key är det smart att begränsa den genom att klicka på länken ”Edit API Key” i popupen.

Detta öppnar en vy som visar alla dina Google API keys. Hitta bara den nyckel som du just har skapat och ge den ett click.

Editing an API key in the Google Cloud Console

Obs/observera: Om du av misstag closeade popupen, så var inte orolig. Du kan nå samma vy genom att välja ”Credentials” från menyn till vänster. På samma sätt, om du inte registrerade API key, klicka bara på ”Show Key” för att se dina credentials.

Under ”Ange en begränsning för ett program” select the ”Websites” alternative.

Restricting the YouTube API access to specific websites

Under ”Website Restrictions” klickar du på ”Add”.

You can now type in the address of your website, and click on ”Done”.

How to add a HTTP referrer in the Google Cloud Console

För att ge Smash Balloon tillgång till API:et måste du också skriva in www.googleapis.com och clicka på ”Done”.

Under ”API restrictions” väljer du knappen bredvid ”Restrict key”.

How to create a YouTube API key with restricted access

När du har gjort det klickar du på dropdown-menyn ”Select APIs” och kontrollerar boxen bredvid ”YouTube Data API”.

Därefter klickar du på ”OK”.

Creating a secure and restricted YouTube API key

När du är nöjd med hur YouTube API key är inställd klickar du på ”Save”.

Du är nu redo att add to API key till din WordPress website. I WordPress dashboard går du till YouTube Feed ” Settings.

Slutligen klistrar du in nyckeln i fältet ”API Key” och klickar sedan på ”Add”.

Fetch YouTube data using an API key

Step-by-Step 3: Skapa och Customize en YouTube Channel Feed

När du har anslutit din WordPress website till YouTube kan du skapa ett galleri med videoklipp för din kanal.

Gå bara till YouTube Feed ” Alla Feeds och klicka sedan på ’Add New’.

How to create a YouTube video feed

Med YouTube Feed Pro kan du bädda in enskilda YouTube-videor, spellistor, livestreams och mycket mer.

Du kan till och med skapa en social vägg genom att kombinera inlägg från flera sociala plattformar. Du kan till exempel bädda in statusinlägg från Facebook, lägga till Instagram-foton och mycket mer.

Eftersom du använder det gratis pluginet klickar du bara på ”Channel” och väljer sedan ”Next”.

Create a feed showing latest YouTube channel videos

Detta öppnar Editorn, som visar en preview av ditt YouTube feed till höger.

På vänster sida ser du alla de olika Settings som du kan använda för att finjustera hur YouTube videoklipp ser ut.

Customizing the latest YouTube video feed in WordPress

Dessa Settings är enkla, så det är bara att clicka på varje alternativ i menyn till vänster och göra de ändringar you vill.

När du ändrar settings uppdateras live preview automatiskt så att du kan prova olika inställningar för att se vad som ser bäst ut på din website.

Till att börja med kan du ändra hur videoklippen visas genom att clicka på ”Feed Layout”. På den här vyn kan du växla mellan layouterna grid, gallery, list och carousel.

Changing the YouTube channel feed layout using Smash Balloon

Beroende på vilken layout du väljer kan du få tillgång till några extra inställningar.

Om du till exempel väljer ”List” kan du ändra hur många videoklipp Smash Balloon visar i listan och skapa mer utrymme mellan YouTube-videorna.

Switching between different layouts for the YouTube channel feed

Studier visar att 90 % av alla konsumenter tittar på videoklipp på sina mobila enheter och 70 % av alla som besöker YouTube gör det med en smartphone eller surfplatta. Med detta i åtanke vill du se till att dina senaste videoklipp ser lika bra ut på mobilen som de gör på datorn.

Du kan previewa hur YouTube Feed kommer att se ut på stationära datorer, surfplattor och smartphones med hjälp av raden med knappar i det övre högra hörnet.

Previewing the YouTube channel feed on smartphone and tablet

Du kanske också vill ändra hur många videor du visar på smartphones och surfplattor. Detta kan hjälpa dina YouTube-videor att passa bekvämt på mindre skärmar på surfplattor och smartphones.

Som standard visar Smash Balloon ett annat antal Column på mobila enheter och datorer. För att ändra dessa standardinställningar skriver du bara in nya siffror i sektionen ”Columns”.

Showing a different number of columns on mobile devices

Du är nu redo att utforska nästa vy för inställningar, som är ”Färgschema”.

Som standard använder Feeds for YouTube samma färgschema som ditt WordPress-tema. Du kan dock också använda ett ”Light” eller ”Dark” färgschema för din video feed.

Du kan till och med skapa ditt eget färgschema genom att välja ”Custom” och sedan använda inställningarna för att ändra länkfärg, textfärg, ändra bakgrundsfärg med mera.

Creating a custom color scheme for your YouTube channel feed in WordPress

Smash Balloon kan också lägga till en header ovanför YouTube video feed. Denna header visar din YouTube-profil och kanalnamn så att besökare kan se exakt var innehållet kommer ifrån.

För att customize denna section, click on ’Header’ i vänster menu.

Adding a header to your YouTube channel feed

Här kan du använda personuppgiftsansvariga för att växla mellan standard- och textheader.

Om du väljer ”Text” kan du ändra textfärg och teckenstorlek. Som standard visas meddelandet ”Vi finns på YouTube” i sidhuvudet. Du kan ersätta detta med ditt eget meddelande genom att skriva in det i rutan ”Text”.

Choosing different header styles for your YouTube channel feed

När du är nöjd med hur headern ser ut, är nästa vy för inställningar ”Videoklipp”.

Detta tar dig till en ny vy där du kan finjustera hur varje YouTube-video ser ut som standard, när en besökare hoverar musen över den och när videon spelas upp.

The Smash Balloon YouTube video editor settings

Om du klickar på ”Edit Individual Elements” kan du välja om du vill visa eller dölja ikonen ”Play”.

I Följer image lägger vi till en ”Play” icon till varje video i YouTube feed.

Adding and hiding the YouTube play icon

När du är nöjd med dina ändringar klickar du på länken ”Videos”.

Detta tar dig tillbaka till föregående vy, där du kan select ”Hover State”.

Customizing a YouTube video's hover state

Här kan du välja om du vill visa videoklippets titel när besökaren hoverar över det.

Rubriken kan ge extra användbar information och uppmuntra visitorerna att spela upp videoklippet. Med detta i åtanke kanske du vill kontrollera boxen bredvid ”Video Rubrik”.

Adding a title to the latest YouTube videos in WordPress

När en visitor klickar på ett videoklipp börjar det spelas upp i en embedad videospelare.

Du kan ändra hur spelaren agerar och ser ut genom att clicka på ”Video Player Experience”.

Customizing the YouTube lightbox experience

Här kan du ändra spelarens bildförhållande och välja om videoklippet ska börja spelas automatiskt eller vänta tills besökaren klickar på knappen Play.

När du är nöjd med hur videospelaren är inställd, klicka på länken ”Customize” för att gå tillbaka till huvudskärmen för Smash Balloon editor.

Smash Balloon's lightbox settings

Här väljer du ”Load More Button” i menyn till vänster.

Besökare kan använda knappen ”Ladda mer” för att se fler av dina YouTube videoklipp. På så sätt kan besökarna stanna kvar längre på din website, samtidigt som de får mer engagement och fler views på din YouTube-kanal.

Med detta i åtanke kanske du vill få knappen ”Ladda mer” att sticka ut genom att ändra bakgrundsfärg, hovering och textfärg.

Customizing the YouTube 'Load More' button in WordPress

Den här knappen visar ”Ladda mer…” som standard, men du kan ersätta detta med en unik call-to-action genom att skriva i fältet ”Text”.

Som standard visar Smash Balloon en knapp ”Prenumerera ” under dina senaste YouTube-videoklipp.

Detta uppmuntrar besökarna att gå med i din YouTube-kanal. För att få fler prenumeranter kanske du vill customize knappen genom att välja ”Subscribe Button” från huvudinställningarna på Smash Balloon.

How to encourage people to subscribe to your YouTube channel

På den här vyn kan du lägga till och ta bort knappen ”Prenumerera” genom att clicka på ”Aktivera”.

Du kan också ändra knappens bakgrundsfärg, hovering och textfärg.

Customizing the subscribe button for your YouTube channel feed

Som standard visar den här knappen en call-to-action med texten ”Prenumerera”.

You can replace this with your own message by typing it into the ”Text” box.

Adding custom messaging to your YouTube channel feed

När du är nöjd med hur video feeden ser ut, glöm inte att clicka på ”Save” för att store dina ändringar. Nu kan du lägga till de senaste videoklippen från YouTube på din website i WordPress.

Step-by-Step 4: Embed de senaste videoklippen från YouTube-kanalen i WordPress

Du kan add your YouTube video feed till WordPress med hjälp av ett block, widget eller shortcode.

Om du har skapat mer än ett feed med pluginet Feeds for YouTube, måste du känna till feedens shortcode om du ska använda ett block eller widget.

För att få koden, gå till YouTube Feed ” All Feeds och kopiera sedan texten under ’Shortcode’.

I Följer exempel måste vi använda youtube-feed feed=2.

Adding the latest videos to your website using a block or widget

Om du vill visa de senaste videoklippen på en page eller post rekommenderar vi att du använder blocket ”Feeds for YouTube”.

Öppna helt enkelt den page eller det post där du vill visa dina YouTube videoklipp. Klicka sedan på ikonen ”+ Add Block” för att lägga till ett nytt block och börja skriva ”Feeds for YouTube”.

När rätt block visas klickar du på det för att add to sidan eller posten.

Adding the latest YouTube videos to a WordPress block

Blocket visar ett av dina YouTube-flöden som standard. Om du vill använda ett annat feed istället hittar du ”Shortcode Settings” i menyn till höger.

Du kan nu add shortcode till denna box. När du har gjort det klickar du på knappen ”Tillämpa ändringar”.

Adding the latest videos from your YouTube channel to WordPress

Blocket kommer nu att visa de senaste videoklippen från din YouTube-kanal. Publicera eller update helt enkelt sidan för att göra din YouTube social media feed live.

Om du använder ett blockaktiverat tema kan du använda hela Site Editor för att add to Feeds for YouTube-blocket var som helst på din site. Stegen är mestadels liknande de som förklaras ovan, du behöver bara veta vilken template eller pattern du ska add to blocket till.

För mer information om detta kan du läsa vår kompletta guide till WordPress Full Site Editing.

You can also add the feed to any widget-ready area, such as the sidebar. This allows you to show the latest YouTube videos across entire your website.

För att göra detta, heada till Appearance ” Widgets i WordPress dashpanelen och klicka sedan på ”+” -knappen.

Adding a Feeds for YouTube block to your WordPress theme

Börja nu skriva ”Feeds for YouTube” i sökfältet för att hitta rätt widget.

Du kan sedan dra widgeten till det area där du vill visa de senaste videoklippen från din YouTube-kanal.

Showing the latest YouTube videos using a block

Som standard visar widgeten en av de feeds som du skapade med Feeds for YouTube.

Om du vill visa ett annat feed istället skriver du in koden för det feedet i boxen ”Shortcode Settings”. Sedan klickar du på ”Tillämpa Changes”.

Showing the latest videos from your YouTube channel using Smash Balloon

Slutligen klickar du på knappen ”Update” för att aktivera widgeten.

För mer information, vänligen se vår detaljerade guide om hur du lägger till och använder widgetar.

Ett annat alternativ är att bädda in de senaste videoklippen på vilken page, post eller widget-ready area som helst med hjälp av en shortcode. För att få rätt shortcode, gå helt enkelt till YouTube Feed ” Alla Feeds och kopiera värdet i kolumnen ”Shortcode”.

Nu är det bara att add to denna kod till din site. För mer information, vänligen se vår detaljerade guide om hur du lägger till en shortcode i WordPress.

Fler tips för att run en YouTube-kanal och en site i WordPress

Vill du lära dig mer om hur du visar YouTube videoklipp på din site i WordPress? Eller behöver du kanske fler tips för att runka en YouTube-kanal?

Kontrollera dessa artiklar för att hitta dina svar:

Vi hoppas att den här artikeln hjälpte dig att lägga till de senaste videorna från din YouTube-kanal på din WordPress-webbplats. Du kanske också vill kolla in vår guide om hur du bäddar in en Facebook-video i WordPress och våra 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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

14 kommentarerLämna ett svar

  1. Dennis Muthomi

    I had a question come up while reading.
    When connecting the Smash Balloon plugin to your YouTube channel, from the screenshots, I noticed it pulls videos to display in the feed automatically.
    I’m wondering if you know whether it includes unlisted videos from your YouTube channel as well? Or does it only display the public videos?

    • WPBeginner Support

      As long as you use the API key when setting up the feed it will not include your unlisted or private videos.

      Administratör

  2. THANKGOD JONATHAN

    I think this method will help both the website and the y
    Youtube channel aswell. But I have not heard you mention, does this Improve my website SEO?

    • WPBeginner Support

      It would normally be an indirect increase to your SEO, your visitors would learn about your YouTube channel through the latest videos feed and your channel would grow then if you mention your site in your videos you can grow your audience that way.

      Administratör

  3. Sona

    How can I give pagination for videos?

  4. gnfb

    Your articles are very helpful thanks you

  5. joan

    brilliant, thanks so much for these clear instructions…i was searching everywhere for an answer.

  6. Robert Thompson

    Nice article. I have a Youtube video player on my website’s homepage. Also my template is touch responsive.

  7. Marika

    Hello! I really like this plugin.. But I am wondering if it is possible to get all my user videos on page? Now there are visible only 9 of them…

  8. Mike Johnson

    How can I remove the video player AND let the videos play within themselves, rather than opening in YouTube?

  9. Emma

    This is awesome! Love your tips!

  10. Ramesh Joshi

    Its fantastic and easy way to learn. Thanks a lot to provide a good method to know more about wordpress.

  11. Nancy Seeger

    This looks great. Any idea is this works with WordPress 3.8? On wordpress.org it shows it is compatible up to 3.5.2 and no one has commented yet if it works with 3.8.

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.