Nyheter, Prylar, Android, Mobiler, Appnedladdningar, Android

Hur man lägger till en “Pin It”-knapp till bilder i WordPress

Sociala mediers värld är i kaos i dessa dagar. Twitter-implodering är en stor del av det, och även om plattformar som Mastodon, Bluesky, Cohost och Threads har försökt ta sin marknadsandel, har ingen av dem kommit ut i toppen ännu. Samtidigt tappar Facebook långsamt sin publik helt enkelt genom att vara för stor och oförmögen att tillfredsställa alla.

Ett socialt nätverk som dock inte har imploderat är Pinterest. Även om de har haft många skandaler genom åren, från SEO-bombningar och spam till människor som kräver sätt att ta bort Pinterest från deras sökresultat heltde har fortfarande lyckats hänga på, ett socialt nätverk på andra nivån med massor av publik och räckvidd.

En del av anledningen till att Pinterest hänger med är att de egentligen inte kräver mycket ansträngning att använda som marknadsförare. Du kan relativt enkelt dela ditt eget innehåll på Pinterest, men mer än så kan du få andra att göra det åt dig bara genom att göra det enkelt att “pinna” bilderna i ditt innehåll till Pinterest, och på så sätt spara både bilden och innehållet som är kopplat till det.

Som webbplatsägare, även om du inte är sugen på att använda Pinterest själv, kan du fortfarande uppmuntra dina användare att använda det. Ett av de främsta sätten att göra det är att lägga till en “fäst det” eller “fästa det här innehållet”-knapp på din webbplats och dina bilder. De enda frågorna är varför och hur.

Den här handledningen hjälper dig att lägga till en anpassad knapp på din webbplats och gå igenom vart och ett av stegen i din WordPress-instrumentpanel! Jag ska också visa dig hur du använder en anpassad bild.

Notera: Det vi marknadsförare känner till som “pin it”-knappen kallas officiellt för “spara”-knappen i Pinterests dokumentation. Detta har varit sant sedan 2016, men de flesta kallar det fortfarande en pin-knapp ändå.

30 sekunders sammanfattning

Sociala medieplattformar som Twitter och Facebook står inför utmaningar, men Pinterest frodas. Pinterests framgång som marknadsföringsplattform beror på dess användarvänlighet. Webbplatsägare kan uppmuntra användare att dela innehåll genom att lägga till en “pin it”-knapp. Sätt att implementera detta inkluderar att använda den officiella Pinterest Spara-knappen eller ett WordPress-plugin som Weblizar eller Social Warfare. Att anpassa knappen innebär att man använder CSS. Pinterest kan generera betydande trafik på grund av dess attraktionskraft i olika nischer och dess högt rankade sökresultat.

Alternativ 1: Den officiella Pinterest-sparaknappen

Även om det finns ett gäng sätt från tredje part att lägga till en Pin It-knapp på en WordPress-webbplats, är ibland det bästa alternativet det officiella alternativet. I det här fallet kan du följa Pinterests dokumentation direkt för att lägga till knappen, specificera detaljer om stiften den skapar och se till att upplevelsen av att fästa din webbplats till en Pinterest-tavla är smidig och sömlös.

Tyvärr är den här processen lite komplicerad, så du måste gå igenom den steg för steg.

Steg 1: Lägg till Pinterest Pin It Button-skriptet på din webbplats

Det första du behöver göra är att lägga till Pinterests officiella webbplatsomfattande kod till din webbplats. Tyvärr gör WordPress det inte särskilt lätt att göra detta. Det finns några alternativ för att göra detta, från att redigera ditt temas filer direkt eller använda ett plugin:

För att redigera ditt tema direkt kan du skapa ett barntema genom att kopiera ditt befintliga tema. Detta säkerställer att om något du gör bryter mot temat kan du återgå till det överordnade temat utan att förlora något. Därifrån hittar du den relevanta filen för en sidfot eller brödtext för din mall och lägg till koden som jag ska klistra in senare. Jag rekommenderar i allmänhet inte det här alternativet, både för att det är mer felbenäget och för att dina ändringar kommer att gå förlorade varje gång ditt tema uppdateras.

Eller så kan du använda ett gratis plugin som Infoga sidhuvuden och sidföttervilket gör det mycket enkelt att hantera JavaScript som du vill lägga till på din webbplats. Det finns också WPCod, vilket är väldigt likt; detta lägger till möjligheten att lägga till anpassad kod till vilken del av din webbplats som helst, och eftersom den är kopplad till ett plugin snarare än ditt tema kommer temauppdateringar inte att bryta den.

Pin It-skriptet är Pinterests generiska spårningsskript som innehåller alla funktioner som behövs för att få deras olika knappar och widgets att fungera. Koden du klistrar in är denna:


Det är det! Utan denna koddina knappar fungerar inte; med det gör de det.

Pinterest rekommenderar att du håller den här koden till slutet av avsnittet på din webbplats, och de varnar för att de inte ska placeras i en sidfot som omfattar hela webbplatsen, eftersom den då gäller för sidor som du kanske inte vill ha den på. Jag säger, gå direkt; du kan ta bort det manuellt från specifika sidor, ställa in attribut på bilder som du inte vill ska delas, och annars kan du neka dina systemsidor enklare än att använda det manuellt på alla tillåtna sidor.

Den största försiktigheten här är att undvik att lägga till det här skriptet mer än en gång på en viss sida. Ibland kan det orsaka dubbletter om du lägger till det på flera platser eller flyttar det men inte tar bort det från en äldre plats. Det kommer att orsaka problem när folk försöker använda dina knappar senare.

Steg 2: Lägg till PIN-koden

Det andra steget är att lägga till koden som faktiskt anropar Pinterest Save Button-koden och aktiverar den.

Den koden är också ganska enkel:

"https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"> 

Du kan lägga till den här koden kring vilken bild som helst som du infogar i ett inlägg i WordPress. Jag rekommenderar att antingen skapa en anpassad kortkod eller skapa ett unikt block som innehåller både den koden och bilden; hur du än föredrar att hantera det.

Nyckeln här är att se till att du ställer in rätt attribut.

  • Data-pin-do. Detta är attributet som låter dig bestämma om din knapp bara finns på den specifika bilden eller alla bilder på sidan.
  • Data-pin-ID. Detta är ett ID-nummer för pin-URL:n. Detta skapas antingen första gången bilden fästs eller refererar till ID:t från den tiden, så att du inte får en massa olika pins av samma bild och inlägg.

Det finns en massa andra ID:n du kan ställa in också. Det hela är lite komplicerat, och det låter dig specificera vilken typ av stiftknapp du vill använda. Här är dokumentationen.

Nu, normalt sett, är jag den typen av kille som älskar att pilla med kod för att få allt att fungera precis som jag vill att det ska fungera. Men jag ska erkänna, Pinterest spelar verkligen inte bra med WordPress som du vill att det ska fungera. Uppriktigt sagt är det bättre att använda ett plugin för att hoppa igenom alla dessa ringar åt dig.

Alternativ 2: Använd en plugin för att hantera Pinterest-knappar

Lyckligtvis finns det ett gäng olika alternativ tillgängliga för dig för att hantera Pinterest-integration på din webbplats.

Weblizar Pin It-knappen På Bild Hover Och Post

Trots det klumpiga namnet är detta ett av de mer fokuserade och användbara alternativen för att integrera Pinterest på din WordPress-webbplats. Det är ett gratis plugin med över 20 000 användare och uppdateras ofta, så det förblir säkert och användbart. Det här är mitt favoritalternativ.

När du har installerat insticksprogrammet har du åtkomst till och kontroll över hur du vill att Pinterest-knappar ska visas på din webbplats, inklusive att tillåta svävningsknappar för bilder. Du kan också anpassa hur knappen visas, vilket kan vara trevligt för att få den att bättre följa riktlinjerna för ditt varumärkes utseende.

Detta plugin har också en proversion som kostar $18 och ger dig tillgång till de olika Pinterest-widgetarna också. Om du vill bädda in en pin-feed på ditt kontos boards är detta ett enkelt sätt att göra det. Du kan också lägga till element till kortkoder eller anpassade block för att hantera dem i sammanhanget för en enskild sida också.

Att konfigurera plugin är ganska enkelt. Välj först alternativen på översta nivån, som om du vill ha en nålknapp på din webbplats eller inte och om du vill ha knappar för att hålla bilden. Sedan kan du gå till sektionerna Exkludera bilder och Exkludera sidor och välja specifika bilder eller sidor att ta bort från listan. Eftersom det vanligtvis är lättare att lägga till några systemsidaundantag än att manuellt inkludera varje vanligt blogginlägg, är detta ganska enkelt.

Social krigföring

Social Warfare har länge varit min favorit bland megaplugins för sociala medier. Den täcker i stort sett alla baser med de viktigaste sociala nätverken. Specifikt för Pinterest ger den dig alternativen för svävningsknapparna, med en extra funktion: du kan få den att förkonfigurera stiftet som genererar istället för att överlåta det till användaren. Det är mycket som en “klicka för att tweeta” typ av plugin som låter människor dela ditt meddelande snarare än bara din länk med deras meddelande.

Jag håller också fast vid plugins som fungerar bra och som inte saktar ner min sida. Ett av de största problemen med plugins för delning av sociala medier är att sakta ner laddningstiderna på grund av att alla olika skript laddas. Social Warfare fokuserar på webbplatsens hastighet över nästan allt annat, så du kommer inte att se en betydande hastighetsminskning jämfört med att inte ha knapparna alls.

Det bästa är, medan Social Warfare inte är gratis, det är ganska billigt; det kostar $29 för en licens för en enda plats, och om du är en byrå eller på annat sätt arbetar med många webbplatser, har de licenser för flera webbplatser och till och med en obegränsad licens tillgänglig. Jag rekommenderar att kolla upp det.

Andra plugins

Om ingen av dessa plugins gör det åt dig, finns det många andra alternativ tillgängliga. De gör alla i princip samma sak med Pinterest-integration eftersom de alla bara är alternativa sätt att implementera Pinterests kod på din webbplats. Alternativen inkluderar B Pinterest Feed, AddToAny och BestWebSofts Pinterest-plugin.

I grund och botten, besök gärna WordPress-pluginkatalogen och bläddra. Det kommer säkert att bli något som gör vad du vill att den ska göra. Det finns inte så mycket nyans till Pinterest i första hand, så om du inte planerar att använda flera typer av knappar och widgets vid sidan av Pinterest-annonser, behöver du egentligen inte en särskilt avancerad lösning.

Hur du anpassar din Pinterest-knapp med CSS

Efter att ha installerat dina pinterest-knappar, kanske du inte gillar utseendet på dem. Weblizar-pluginet, till exempel, är inte det mest attraktiva plugin-programmet och det lägger till små små knappar. Det är lite svårt att se de där knapparna, eller hur?

Så vad kan du göra?

Hitta först en “Pin it”-knapp som du gillar. Jag gjorde min egen; du är välkommen att använda den om du vill. Det är snyggt och stort och lättare för användare att se:

Navigera sedan till dina plugin-inställningar. För insticksprogrammet Weblizar går du till:

  1. Inställningar
  2. jQuery Pin It Button For Images Lite
  3. Visuell
  4. Rulla ned till avsnittet “Fäst bild”.

Klicka sedan på “Ladda upp en bild med mediabibliotek”. Här kan du ladda upp din nya bild. Ställ in bildens höjd och bredd och spara sedan inställningarna!

Det är en mycket mer attraktiv knapp nu, eller hur?

Om du vill anpassa dina knappar ytterligare kan du alltid använda CSS. Här är ett enkelt sätt att göra det:

Lägg till ett “Simple CSS”-plugin (det finns många på WordPress.org plugin-förråd), eller besök avsnittet “Ytterligare CSS” i ditt tema. Eller, vissa insticksprogram (som Weblizar-plugin som vi använder för det här exemplet) har den inbyggd direkt i plugin-programmet under fliken “Avancerat”.

Lägg sedan till din anpassade CSS-kod. Du kanske till exempel vill ändra knappens kant eller bakgrundsfärg.

Här är ett grundläggande CSS-utdrag:

a.pinit-button {
border-bottom: 0 !important;
box-shadow: none !important;
margin-bottom: 0 !important;
}
a.pinit-button::after {
display: none;
}

När du har sparat din CSS-kod, spara dina ändringar och förhandsgranska din webbplats för att se den nya knappen i funktion.

Du kan också utforska mer avancerade CSS-anpassningar som hovringseffekter, färger, skuggor och mer. Om du är ny på CSS kan du kolla in den här fantastiska introduktionsguiden av W3 skolor här.

Varför det är en bra idé att lägga till en Pinterest-knapp

Om många människor hatar Pinterest-resultat, de har haft en historia av att skrapa för SEO-ändamål, och sociala medier som helhet blir svårare, varför är Pinterest fortfarande en bra sida att använda?

Enligt min erfarenhet kan Pinterest vara en förvånansvärt bra förare av trafik, särskilt i vissa nischer. Det är bildtungt men inte bildcentrerat på samma sätt som Instagram är, så dessa bilder gör mycket för att dra in människor i din bloggs grafiska stil. Dessutom är det extremt populärt bland vissa målgrupper. DIY, dekoration, matlagning, hantverk och andra typer av nischer får en massa av intresse från Pinterest.

En av de viktigaste faktorerna på Pinterest är estetik. Människor bygger hela anslagstavlor bara för estetiken, stämningarna, vibbarna och den allmänna stämningen i bilderna de fäster. När de hittar en sida med en estetik som de gillar, kommer de att gräva i och hitta så många exempel de kan för att fylla sina anslagstavlor.

Andra människor använder Pinterest som ett mer standardiserat socialt nätverk. Även om det finns mindre person-till-person socialisering på Pinterest jämfört med saker som Facebook eller Instagram, är det fortfarande väldigt populärt och ett bra sätt att haka på folk.

Dessutom står Pinterest inte i vägen för andra sociala delningsalternativ. Till exempel, när du har en ruta på sidan av skärmen eller längst ner i ett inlägg med ett halvdussin sociala delningsknappar, vilken ska användaren klicka på? Du kan aldrig vara säker. Men genom att använda en musknapp över dina bilder, begränsar du dem till ett alternativ: om de vill dela, delar de på Pinterest.

En annan detalj är att “folk vill inte ha Pinterest-resultat i sina sökresultat” är ganska talande. Även om vissa sångmän inte gillar Pinterest-resultat, har de flesta inget emot dem, och själva det faktum att de är så vanliga betyder att de alltid är där uppe i toppresultaten.

Självklart kan Pinterest också vara väldigt passivt för en marknadsförare. Du behöver inte göra så mycket mer än att lägga till knapparna. Du kan, om du vill, gå igenom för att anpassa alla olika stift för dina inlägg, och jag rekommenderar att du gör det, men börja med dina bästa inlägg och arbeta dig ner. 80/20-regeln är i kraft här.

Pinterest kan vara ett väldigt bra sätt att få en massa extra trafik passivt, men för att få den trafiken behöver du innehåll för att avsluta den. Det är där jag kommer in. Jag har hållit på med innehållsmarknadsföring i ett decennium, och även om branschen har förändrats mycket under den tiden, har det bara blivit viktigare och viktigare att göra det rätt. Om du vill ha en toppblogg, kontakta oss och låt oss chatta!