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 lägger du till en Flickr-widget i WordPress (det enkla sättet)

På senare tid har några av våra läsare frågat oss hur de kan förbättra sin verksamhet inom onlinefotografering.

Att lägga till en Flickr-widget på din WordPress-webbplats är ett bra sätt att visa upp dina foton och videor utan större ansträngning.

Inte bara det, utan att visa Flickr-innehåll kan också hålla saker intressanta för dina besökare. Denna funktion kan också hjälpa till att öka din Flickr-följare.

Det är en win-win-situation för både din webbplats och ditt Flickr-konto.

I den här guiden kommer vi att gå igenom de enkla stegen för att lägga till en Flickr-widget på din WordPress-webbplats.

How to add a Flickr widget in WordPress

Så här lägger du till en Flickr-widget i WordPress

Det enklaste sättet att lägga till en Flickr-widget i WordPress är genom att använda Photonic. Med detta plugin kan du visa innehåll från många olika webbplatser och plattformar, inklusive Google Foto, SmugMug och Flickr.

För att visa innehåll från Flickr behöver du ett SSL-certifikat. Om du behöver hjälp kan du läsa vår guide om hur du skaffar ett gratis SSL-certifikat för din WordPress-webbplats.

När du har gjort det är du redo att installera och aktivera Photonic-pluginet. Du kan se vår guide om hur du installerar ett WordPress-plugin för steg-för-steg-instruktioner.

Vid aktivering vill du gå över till Photonic ” Inställningar. Du kan sedan gå vidare och klicka på fliken ”Flickr”.

Photonic's Flickr settings

Nästa steg är att klicka på länken ”Flickr-inställningar”.

För att komma igång måste du ansluta Photonic till ditt Flickr-konto genom att skapa en API-nyckel och hemlighet. För att få den här informationen måste du skapa en app på Flickr-webbplatsen.

Att skapa en app låter tekniskt, men oroa dig inte. Du behöver inte kunna någon kod, och vi guidar dig genom varje steg.

Nu är det smart att skapa nyckeln och hemligheten i en ny flik så att du enkelt kan växla mellan Flickr-webbplatsen och din WordPress-instrumentpanel.

I den nya webbläsarfliken kan du besöka Flickr API-sidan. På den här sidan klickar du bara på länken ”Ansök om din nyckel online nu”.

Creating a Flickr app

Du kan nu skriva in den e-postadress och det lösenord som du använder för ditt Flickr-konto.

När du är inloggad i ditt account måste du meddela Flickr om du har planer på att använda Flickr widgetar för ett kommersiellt eller icke-kommersiellt projekt.

Om du skapar en personlig blogg i WordPress eller en website för ett litet företag kan du klicka på knappen ”Tillämpa en icke-kommersiell nyckel”.

Creating a commercial or non-commercial Flickr project

På nästa skärm måste du namnge din app genom att skriva in det i fältet ”Vad heter din app”. Observera att dina besökare inte kommer att se namnet; det är endast för din egen referens.

Det finns också ett textfält ”What are you building” där du kan berätta för Flickr hur du kommer att använda appen.

Creating a Flickr widget for WordPress

När du har skrivit in all denna information är det en bra idé att läsa Flickrs villkor noggrant. Om allt är bra kan du klicka på knappen ”Skicka”.

Flickr kommer nu att visa en API key och secret som du kan använda för att ansluta Flickr website till Photonic app.

Kopiera bara nyckeln och hemligheten och växla sedan tillbaka till din WordPress-instrumentpanel. Du kan nu klistra in dessa två värden i fälten ”Flickr API Key” och ”Flickr API Secret”.

Adding the Flickr API key and secret

Efter det vill du bläddra längst ner på skärmen och klicka på knappen ”Spara inställningar för sidan Flickr”.

Vid denna tidpunkt kommer Photonic att ha tillgång till Flickr-webbplatsen. Så nästa steg är att ge plugin tillåtelse att komma åt ditt Flickr-konto.

För att göra detta kan du gå till Photonic ” Autentisering från din WordPress instrumentpanel. Gå sedan vidare och klicka på knappen ”Logga in och hämta Access Token från Flickr”.

Adding an access token to WordPress

Du kommer då till en skärm där du kan skriva in ditt Flickr-användarnamn och lösenord.

När du har gjort det klickar du bara på ”Logga in”.

The Flickr's website sign in page

Flickr kommer nu att visa lite information om de åtgärder som Photonic kan utföra och de data som den kan komma åt.

Om du är nöjd med att ge Photonic dessa behörigheter kan du klicka på knappen ”OK, jag auktoriserar det”.

Giving Photonic access to Flickr

När du har clickat på denna knapp skickas du automatiskt tillbaka till WordPress dashboard.

På följande skärm ser du den nya informationen ”Access Token” och ”Access Token Secret”. För att lägga till dessa tokens i Photonics inställningar klickar du helt enkelt på knappen ”Save Token”.

A Flickr access token

WordPress kommer nu att ta dig till Photonics inställningsområde, där ”Access Token” och ”Access Token Secret” redan har klistrats in i rätt fält.

Därefter måste du konfigurera ytterligare några inställningar.

För att göra detta kanske du vill ange en standardanvändare. Med Photonic kan du visa innehåll från ditt personliga Flickr-konto eller något annat offentligt konto.

I följande avsnitt kommer vi att visa hur du visar olika Flickr-konton när du skapar Flickr-widgeten.

Du kanske dock vill konfigurera ett standardkonto först. Om du till exempel bara planerar att visa innehåll från ditt personliga Flickr-konto kan du spara tid genom att ange det som standard. Du kan alltid åsidosätta den här inställningen om du behöver.

För att ställa in en standardanvändare öppnar du en ny tabs och sedan headar du till det Flickr-konto som du vill använda. You can then copy the URL in your browser’s address bar, which should be something like https://www.flickr.com/photos/username/.

Nu kan du växla tillbaka till din WordPress-instrumentpanel och klistra in Flickr-URL:en i fältet ”Standardanvändare”.

Setting a default Flickr username

När du har gjort det kan du anpassa hur Photonic visar innehållet i din webbplats Flickr-widget.

För att komma igång kan du klicka på rullgardinsmenyn ”Media to show” och välja om du bara vill visa foton, bara video eller både foton och video.

Choosing the Flickr media to show

Efter det kan du välja hur stora thumbnails som ska visas i din Flickr widget.

När en besökare kommer till din webbplats kommer Photonic att visa en förhandsgranskning av alla dina bilder och videor i form av en miniatyrbild, som visas i följande bild:

Flickr thumbnail previews on a WordPress website

Visitors kan se en större version av varje image eller video genom att clicka på dess thumbnail.

Photonic har några olika layouts, men följande image visar ett exempel på hur de större versionerna kan se ut på din website.

An example Flickr slideshow

Om du vill ändra storleken på miniatyrbilderna öppnar du rullgardinsmenyn ”Thumbnail size” och väljer ett värde från listan.

Därefter kan du välja vilken bildstorlek som ska visas när besökaren klickar på en miniatyrbild. För att göra detta öppnar du bara rullgardinsmenyn ”Huvudbildstorlek” och väljer sedan en storlek från listan.

Changing the image size

Planerar du att visa videor i din Flickr-widget? Då måste du öppna rullgardinsmenyn ”Videostorlek” och välja hur stor videoljuslådan ska visas på din webbplats.

En lightbox är helt enkelt ett popup-fönster som visar innehållet i videoklippet, på samma sätt som en videospelare. Medan lightboxen är öppen kan besökarna inte interagera med resten av page.

The video lightbox settings

Det finns några fler inställningar som du kanske vill titta på. Detta bör dock vara en bra start för de flesta WordPress-webbplatser.

När du är nöjd med den information du har lagt till kan du bläddra längst ner på skärmen och sedan klicka på knappen ”Save page Flickr Settings”.

Nu när du har konfigurerat pluginet kan du add a Flickr widget to any post, page, or widget-ready area.

I det här exemplet visar vi hur du lägger till den på en sida eller i ett inlägg, men stegen är liknande för alla widgetklara områden.

För att börja, öppna bara den page eller post där du vill add to Flickr widget. Här klickar du på + ikonen och skriver sedan ”Photonic Gallery” för att hitta rätt block.

The Photonic Gallery block

När du klickar på Photonic Gallery-blocket kommer det att lägga till blocket på din website.

Därefter går du vidare och klickar på ”Add Photonic Gallery”.

The Photonic Flickr block

Detta öppnar en popup där du kan välja var Photonic ska hämta sina bilder och videor från, till exempel Instagram eller Google Foto.

Obs: Vill du skapa ett Instagram-galleri på din webbplats? Vi rekommenderar plugin-programmet Smash Balloon eftersom det är enkelt att använda och kraftfullt.

För mer information, se hur du skapar ett anpassat Instagram-fotoflöde i WordPress.

Eftersom vi vill lägga till en Flickr-widget i WordPress klickar vi på ”Flickr” och knappen ”Nästa”.

Choosing the media source

Du kan nu öppna dropdown-menyn och välja vilken typ av content du vill visa.

Det kan vara en enda bild, flera bilder eller till och med hela Flickr-album, gallerier eller samlingar av bilder.

Configuring the Flickr block

När du har valt ett alternativ måste du ange det Flickr-konto från vilket Photonic ska hämta innehållet.

Det enklaste alternativet är att hämta foton eller videor från det standardanvändarnamn som du lade till i Photonic-inställningarna. För att göra detta klickar du helt enkelt på alternativknappen ”Aktuell användare”.

Using the default username

Vill du visa innehåll från ett annat Flickr-konto? Då bör du välja alternativknappen ”En annan användare” istället.

Detta kommer att lägga till ett nytt fält där du kan klistra in webbadressen till det Flickr-konto som du vill använda.

How to configure the Flickr Photonic block

Ett annat alternativ är att visa images och videoklipp från en Flickr-grupp. För att göra detta klickar du helt enkelt på knappen ”Group”.

Sedan kan du i en ny flik gå över till den grupp som du vill använda. Du kopierar webbadressen, som ska se ut ungefär som https://www.flickr.com/groups/group-name.

När du är klar går du tillbaka till WordPress instrumentpanel och klistrar in webbadressen i fältet ”Gruppnamn”.

The Flickr group name settings

När du har valt ett alternativ går du vidare och klickar på knappen ”Nästa”.

På nästa vy ser du en preview av all de olika images och videoklipp som Photonic kommer att visa i din Flickr widget.

Om du inte vill visa alla dessa bilder och videor kan du filtrera innehållet baserat på hur det är taggat på Flickr.

I fältet ”Taggar” skriver du helt enkelt in de taggar som du vill använda. Om du vill använda flera taggar i ditt filter måste du separera varje tagg med ett kommatecken.

Filtering images and videos using tags

Nu kommer Photonic bara att visa bilder och videor som har dessa taggar.

Om du skriver in mer än en tagg måste du välja om du vill visa alla medier med en av dessa taggar eller bara medier med alla taggar.

För att göra detta öppnar du dropdown-rutan ”Tag mode” och klickar på antingen ”Any tag” eller ”All tags”.

Filtering images and video using tags

Tänk bara på att förhandsvisningarna av miniatyrbilderna på den här sidan inte uppdateras automatiskt. Om du gör några ändringar kanske förhandsgranskningen inte visar de bilder och videor som kommer att ingå i din färdiga Flickr-widget.

När du är nöjd med de ändringar du har gjort klickar du på ”Next”.

På den här skärmen ser du alla de olika layouterna för Flickr-widgeten, till exempel ”Square Grid” och ”Slideshow”.

Klicka bara på den layout som du vill använda och klicka sedan på knappen ”Nästa”.

The different Photonic layouts

Sedan ser du några inställningar som du kan använda för att anpassa hur bilderna och videoklippen visas i din Flickr-widget.

Du kan se olika inställningar beroende på vilken layout du har valt. Om du till exempel använder en layout med ”Circular Icon Grid” eller ”Square Grid” kan du bestämma hur många kolumner som ska ingå i Flickr-widgeten.

The Circular Flickr widget layout

Om du använder en bildspelslayout måste du välja om du vill visa miniatyrbilderna ovanför eller under bildspelet.

När du är klar med layoutinställningarna klickar du på knappen ”Nästa”.

The Flickr slideshow layout

I popup-fönstret visas nu den kod som ska läggas till på din webbplats. När allt ser bra ut för dig kan du klicka på knappen ”Nästa”.

Photonic visar inte Flickr content i editor för post, så du måste clicka på knappen ’Preview’ för att se hur widgeten kommer att se ut för de som besöker din website.

Previewing the Flickr widget

När du är nöjd med hur Flickr-widgeten ser ut kan du gå vidare och updating eller publicera den här page som vanligt.

Och så var det klart! Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en Flickr-widget i WordPress. Därefter kan du också gå igenom vår guide om hur du automatiskt lägger till en vattenstämpel till bilder i WordPress eller sätt att förhindra bildstöld 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

3 kommentarerLämna ett svar

  1. 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!

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.