Pålitliga WordPress-handledningar, när du behöver dem som mest.
Nybörjarguide till WordPress
WPB Cup
25 miljoner+
Webbplatser som använder våra plugins
16+
År av WordPress-erfarenhet
3000+
WordPress-handledningar
av experter

Hur man lägger till Pinterest "Pin It"-knapp i WordPress (4 sätt)

Att uppmuntra folk att dela ditt innehåll på sociala medier är ett utmärkt sätt att växa din publik och få folk att bli entusiastiska över ditt företag.

Men verkligheten är att folk bara kommer att dela ditt innehåll om du gör det enkelt för dem.

Vi använder sociala delningsknappar på WPBeginner-bloggen så att våra läsare kan dela vårt innehåll med ett enkelt klick, så vi vet vad vi pratar om. 🤓

Enligt vår erfarenhet är Pinterest en fantastisk plattform för att driva trafik till din WordPress-webbplats, särskilt om du publicerar visuellt innehåll som foton, infografik och digital konst.

Att lägga till en 'Pin It'-knapp på din WordPress-webbplats låter dina besökare snabbt dela bilder eller annat visuellt innehåll på sina Pinterest-tavlor. Dessutom kan det ge många fördelar! Tänk: fler besökare, fler kommentarer och mer försäljning. 💥

I den här artikeln visar vi dig hur du lägger till Pinterest 'Pin It'-knapp till WordPress.

Hur man lägger till Pinterest "Pin It"-knapp i WordPress

Varför lägga till Pinterest 'Pin It'-knapp i WordPress?

Pinterest är en populär sociala medier-plattform som låter användare samla webblänkar och annat visuellt innehåll genom att skapa anslagstavlor.

När användare lägger till ditt innehåll på sin Pinterest-tavla hjälper det andra att upptäcka din webbplats. Pinterest är en särskilt viktig källa till trafik om du driver en fotowebbplats, en modetidning eller någon annan typ av blogg som har mycket bilder och videor.

Att lägga till en 'Pin It'-knapp på din webbplats kan uppmuntra besökare att dela ditt innehåll på Pinterest.

Ett exempel på en 'Pin It'-knapp för att dela på Pinterest

Notera: Pinterest ändrade officiellt namnet på knappen 'Pin It' till 'Spara' 2016. Många guider och WordPress-plugins använder dock fortfarande 'Pin It', vilket är anledningen till att vi använder det ursprungliga namnet i den här guiden. Dessutom låter det bara mer slagkraftigt!

Med det sagt, låt oss se hur du kan lägga till en Pinterest 'Pin It'-knapp i WordPress. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

Metod 1: Lägg till Pinterest 'Pin It'-knapp till inlägg (enkelt sätt)

Det enklaste sättet att lägga till en Pinterest-knapp på din WordPress-webbplats är att använda Novashare. Enligt vår mening är det ett av de bästa sociala medieplugins för WordPress.

Det låter dig enkelt lägga till en Pinterest-knapp på din webbplats, tillsammans med knappar för alla andra stora sociala nätverk. Vi har testat Novashare för många olika användningsområden och vi gillar verkligen hur lätt det är att använda. För mer information om pluginet, se vår fullständiga Novashare-recension.

För att börja behöver du besöka Novashare webbplats och välja en plan. Därefter måste du installera och aktivera pluginet. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Novashares prissättning och planer

Efter aktivering bör du navigera till sidan Inställningar » Novashare i din WordPress-instrumentpanel för att aktivera din licens.

Klicka helt enkelt på fliken ‘Licens’, klistra in licensnyckeln du fick när du köpte pluginet och klicka sedan på knappen ‘Spara licens’.

Aktivera din Novashare-licens

När du har aktiverat din licens kan du lägga till en Pinterest-ikon på din webbplats och andra sociala delningsikoner du vill. Du kan lägga till dessa ikoner i linje med ditt innehåll eller som en flytande stapel.

Vi använder det första alternativet här (men fortsätt läsa för mer information om flytande fält).

Navigera helt enkelt till fliken 'Inline Content' i Novashare och aktivera reglaget 'Enable Inline Content'. Klicka sedan på Pinterest-knappen så att den blir röd.

Vid det här laget kan du också aktivera andra sociala nätverk som du vill lägga till i fältet för sociala delningsknappar.

Lägga till en inline Pinterest-knapp med Novashare

Därefter kan du scrolla ner och använda de tillgängliga alternativen för att konfigurera knappfältet.

Det finns inställningar för att visa knappfältet på inlägg, sidor och mer. Du kan också anpassa färgen och designen på knapparna.

Du kan till och med lägga till etiketter på knapparna och visa en räknare över hur många gånger det aktuella inlägget har delats på sociala medier.

Vi täcker alla dessa alternativ och flytande fält i detalj i vår guide om hur man lägger till sociala delningsknappar i WordPress.

När du är klar med att anpassa din 'Pin It'-knapp, scrolla ner till botten av sidan. Klicka här på knappen 'Spara ändringar' för att lagra de nya inställningarna.

Du kan nu besöka din WordPress-webbplats för att se Pinterest-knappen i aktion.

Pinterest-knapp tillagd i WordPress-inlägg

Metod 2: Lägg till Pinterest ‘Pin It’-knapp till bilder (enkelt sätt)

Driver du en mode-, foto- eller matblogg? Då kanske du vill lägga till en Pinterest-knapp över dessa bilder. Detta gör det möjligt för besökare att dela ditt innehåll genom att helt enkelt sväva över bilden de vill fästa.

Novashare-pluginet som vi använde i Metod 1 kan också lägga till en Pinterest 'Pin'-knapp när du för muspekaren över en bild på din webbplats.

När du har köpt en licens och installerat pluginet, som vi förklarade i Metod 1 ovan, gå till Inställningar » Novashare och klicka på fliken 'Pinterest'.

Växla nu 'Aktivera bildpinnar' och välj 'Inläggstyper' där du vill visa knappen.

Aktivera bildpinnar i Novashare

Därefter kan du anpassa knappens position, form och färg. De andra standardinställningarna fungerar bra för de flesta webbplatser.

Om du föredrar det kan du visa Pinterest-knappen över bilder hela tiden, inte bara när du för muspekaren över en bild. För att göra det måste du aktivera alternativet 'Visa alltid'.

Anpassa Pinterest-knappen i Novashare

Vissa webbplatsägare har några bilder som de inte vill ska delas. I så fall kan du skriva in filnamnen i fältet 'Exkluderade bilder'.

När du är nöjd med inställningarna, se till att du klickar på knappen ‘Spara ändringar’. Därefter kommer Novashare att börja visa Pin-knappen på bilder.

Exempel på Pinterest Pin-knapp med Novashare

Metod 3: Lägg till Pinterest 'Pin It'-knapp med anpassad kortkod

Ibland vill du kanske styra exakt var ‘Pin It’-knappen visas på din webbplats. Du kanske till exempel vill visa Pinterest-knappen på en specifik annonslandningssida eller inuti inläggets innehåll.

I så fall är ett alternativ att skapa knappen med kod och sedan placera den på varje sida eller inlägg med en anpassad kortkod. Detta ger dig friheten att visa 'Pin It'-knappen på olika platser, men du måste lägga till den på varje sida eller inlägg manuellt.

Det enklaste sättet att lägga till anpassad kod i WordPress är att använda WPCode. Det låter dig lägga till anpassad PHP, CSS, JavaScript och mer på din webbplats.

Flera av våra partner varumärken använder detta plugin för att hantera kodavsnitt över sina webbplatser, och de har alla rapporterat tillbaka till oss om hur mycket de älskar det. För mer information, se vår fullständiga WPCode-recension.

Du kan också använda WPCode för att skapa egna kortkoder, så det är perfekt för att lägga till en 'Pin It'-knapp på din webbplats.

Först måste du installera och aktivera det kostnadsfria WPCode-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

När pluginet är aktiverat, gå till Code Snippets » Add Snippet.

Hur man lägger till ett kodavsnitt med WPCode

Här ser du alla fördefinierade kodavsnitt som WPCode kan lägga till på din webbplats. Dessa inkluderar kodavsnitt som låter dig lägga till knappar för social delning till WordPress och visa dina sociala ikoner i en sidofält.

Nu behöver du föra muspekaren över alternativet 'Lägg till din anpassade kod (nytt utdrag)' och klicka på knappen '+ Lägg till anpassat utdrag' när den visas.

Lägga till ett anpassat kodavsnitt i WordPress

Sedan ska du lägga till PHP i WordPress, så du behöver välja ’PHP Snippet’ som kodtyp.

Välja PHP-kodavsnitt i WPCode

På nästa skärm skriver du in en titel för kodavsnittet.

Detta är bara för din referens, så du kan använda vad du vill. För den här handledningen skriver vi 'Pinterest Pin It Button'.

Ange ett kodavsnittsnamn och klistra in koden för pin it-knappen

När det är gjort, klistra helt enkelt in följande i kodredigeraren:

function get_pin($atts) {
    global $post;
    if ($post) {
        $pinterestimage = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
        if ($pinterestimage) {
            return '<a href="http://pinterest.com/pin/create/button/?url=' . urlencode(get_permalink($post->ID)) . '&media=' . $pinterestimage[0] . '&description=' . get_the_title() . '" class="pin-it-button" count-layout="vertical">Pin It</a>';
        } else {
            return 'No Pinterest image available.';
        }
    } else {
        return 'No post found.';
    }
}
add_shortcode('pin', 'get_pin');

Därefter, scrolla ner på sidan till sektionen ‘Insertion’. Här kan du behålla standardmetoden ’Auto Insert’ för att säkerställa att koden körs överallt.

Om det inte redan är valt, välj sedan 'Kör överallt'

Standardmetoden för automatisk infogning i WPCode

Skrolla slutligen till toppen av skärmen och klicka på reglaget 'Inaktiv' så att det visar 'Aktiv'.

Klicka sedan bara på knappen 'Spara utdrag' eller 'Uppdatera' för att göra kodutdraget live.

Spara och aktivera kodavsnitt WPCode

Nu kan du lägga till en 'Pin It'-knapp på vilken WordPress-sida, inlägg eller widget-redo område som helst med kortkoden [pin].

För steg-för-steg-instruktioner om hur du placerar kortkoden, se vår guide om hur man lägger till en kortkod i WordPress.

använd kortkoden [pin] i dina WordPress-inlägg

Efter att ha lagt till den här koden kommer besökare att se en 'Pin It'-knapp på alla sidor eller inlägg som har en utvald bild.

Om sidan inte har en utvald bild, kommer de att se ett felmeddelande 'Ingen Pinterest-bild tillgänglig' istället.

Hur man lägger till Pinterest ‘Pin It’-knapp med hjälp av Full-Site Editor

Om du använder ett av de nyare blockaktiverade teman, kan du lägga till en 'Pin It'-knapp var som helst i ditt WordPress-tema med hjälp av den anpassade kortkoden.

Detta är ett enkelt sätt att lägga till knappen på varje sida och inlägg. Du kan också lägga till knappen 'Pin It' till områden som du inte kan redigera med den vanliga WordPress-innehållsredigeraren, till exempel din webbplats 404-sidmall.

För att komma igång, gå bara till Teman » Redigerare i WordPress-instrumentpanelen.

Öppna WordPress fullständiga redigerare (FSE)

Som standard visar redigeraren för hela webbplatsen din temas hemmamall.

För att lägga till en 'Pin It'-knapp på en annan sida, välj antingen 'Mall' eller 'Mall-delar' från menyn till vänster.

Välja en WordPress-mall eller mallkomponent i fullständig webbplatsredigerare

Du kan nu välja den mall du vill redigera.

I det här exemplet visar vi hur du lägger till en 'Pin It'-knapp på din webbplatsens mall för enstaka sidor. Stegen kommer dock att vara liknande oavsett vilken mall du väljer.

Välja en blockaktiverad enkelmall

WordPress kommer nu att visa en förhandsgranskning av mallen eller malldelen.

För att redigera den här mallen, klicka på den lilla pennikonen.

Hur man redigerar en enskild WordPress-mall med hjälp av blockbaserad redigerare

När det är klart, klicka på det blå ikonen '+' i det övre vänstra hörnet.

I sökfältet som visas, skriv in 'Shortcode'.

Hur man lägger till en Pin It-knapp med kortkod

När rätt block visas, dra och släpp det på mallens layout.

Du kan nu skriva kortkoden Pin i blocket.

Lägga till en Pinterest pin-knapp till din webbplats med hjälp av fullständig webbplatsredigerare (FSE)

Klicka sedan helt enkelt på 'Spara' för att göra den nya kortkoden aktiv.

Nu, om du besöker din WordPress-webbplats, kommer du att se knappen 'Pin it' i aktion.

Metod 4: Lägg till Pinterest 'Pin It'-knapp med kod och FTP

Ett annat sätt att lägga till en Pinterest-knapp på din webbplats utan en plugin är att lägga till kod direkt i dina temafiler. Den här metoden är dock endast lämplig för tekniska användare.

Att redigera temafiler direkt kan orsaka många vanliga WordPress-fel, och du kommer att förlora all anpassad kod när du uppdaterar WordPress-temat. Med detta i åtanke rekommenderar vi alltid att använda WPCode istället.

Om du dock använder den här metoden, måste du börja med att göra en fullständig säkerhetskopia av WordPress av din webbplats. Detta hjälper dig att återställa din webbplats om något går sönder av misstag.

När det är gjort, anslut till din WordPress-värd med en FTP-klient och gå sedan till mappen /wp-content/themes/.

Härifrån behöver du öppna din nuvarande temamapp och sedan lokalisera filen footer.php.

Ladda ner filen footer.php i WordPress

Högerklicka sedan helt enkelt på den filen och välj 'Ladda ner' från menyn. Detta laddar ner filen footer.php till din dator.

Nu måste du öppna filen footer.php med en enkel textredigerare som Anteckningar och klistra in följande skript precis före </body> -taggen.

<script type="text/javascript">
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();
</script>

När du har gjort det behöver du spara filen och sedan ladda upp den tillbaka till den aktuella temamappen.

Leta sedan upp mallfilen i ditt tema där du vill lägga till knappen. Vanligtvis är detta filen single.php, men det kan variera beroende på ditt WordPress-tema. Om du är osäker kan du se vår nybörjarguide till WordPress mallhierarki.

För att redigera mallfilen, ladda bara ner den från din temamapp och öppna den för redigering.

Du måste välja var du vill visa 'Pin It'-knappen. Många webbplatser visar sociala delningsknappar direkt under inläggstiteln, men du kan använda vilken plats du vill.

Efter att ha valt en plats, lägg bara till följande kod:

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>

Ovanstående kodavsnitt lägger till inläggets utvalda bild, titel, beskrivning och URL i delnings-URL-parametern.

Den här kodsnutten kommer också att lägga till en vertikal delningsknapp till alla dina inlägg. Om du vill visa en horisontell delningsknapp istället, ändra helt enkelt sektionen count-layout="vertical"> till count-layout="horizontal">.

När du är redo, spara filen och ladda upp den tillbaka till ditt tema direkt via FTP.

Bonus: Ytterligare guider om WordPress och sociala medier

Är du intresserad av att lära dig mer om hur du använder WordPress med sociala medier? Kolla in dessa nybörjarvänliga guider:

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.

Upplysning: Vårt innehåll stöds av läsarna. 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 redaktionella process.

Det ultimata WordPress-verktyget

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som alla proffs bör ha!

Läsarnas interaktioner

65 CommentsLeave a Reply

  1. Tack för PHP-kodavsnittet.
    Jag kopierade och klistrade in koden i min webbplats footer.php-fil, men knappen syntes inte initialt efter uppladdning.
    Jag insåg att jag behövde rensa min cache innan den nya knappen skulle visas korrekt.

  2. Tack för PHP-snutten. Jag provade den på en av webbplatserna och den fungerar som en charm. Du har sparat mig lite utrymme mellan plugins. Bra jobbat.

  3. Hej. Jag lade nyligen till delade räknare och Pinterest-tilläggspluginer. De verkar fungera bra, men jag märker att de inte har uppdaterats på flera år och inte heller har de testats med min version av Wordpress. Bör jag leta efter en ny plugin eller är de fortfarande okej att använda?

  4. Jag vill lägga till en individuell grafikpin som jag har designat själv till blogginlägget den tillhör (som de bästa sakerna att göra i Jaipur). Är det detta som artikeln täcker eller är det bara den bokstavliga Pinterest-knappen som ser ut som Pinterest-logotypen? Förlåt att jag är så fixerad vid denna teknikalitet, men en bild eller två skulle göra det mycket tydligare vad exakt du menar med "knappen"... tack på förhand...

    • Detta är för Pinterest pin it-knappen, den andra skärmdumpen i artikeln bör vara vad du letar efter som ett exempel.

      Admin

  5. hej wpbeginner, jag följer dina koder, får jag veta om jag fortfarande kommer att fästa bilderna på mina pinterest-tavlor? eller kommer det automatiskt att fästas där? Jag är fortfarande nybörjare på den här plattformen. tack

  6. Tack för koden. Jag lade precis till den på min författarwebbplats. (Jag har ingen aning om hur Pinterest-knappen visas på mina bilder på min affärswebbplats, men det gör den.)

    Nu är min författarwebbplats helt inställd!
    Tack, Syed.

    P.S. I just followed you on Pinterest. :)

  7. detta fungerar !! tack

    och

    Jag undrar...
    hur kan jag ändra ikon? Ikonen är fortfarande densamma när jag ändrar kod

  8. Jag gjorde det sista alternativet, att lägga till kortkoden i mitt temas functions.php-fil. Det fungerade, men jag kunde inte längre spara mina inlägg som utkast. Sedan tog jag bort koden och det fungerar inte. Min webbplats är fortfarande online, men jag kan inte längre logga in på min webbplats. Följande meddelande visas:

    Varning: Kan inte ändra sidhuvudsinformation – sidhuvuden har redan skickats av (utdata startade vid /home/peque107/public_html/wp-content/themes/himmelen/functions.php:2) i /home/peque107/public_html/wp-includes/pluggable.php på rad 1224

    Snälla hjälp!

  9. Gäller detta bara för wordpress.org-bloggar? Jag har en wordpress.com-blogg och jag är inte säker på om jag kan lägga till detta plugin till den?

    Tack!

  10. Jag har ett problem. Jag följde instruktionerna och fick detta felmeddelande:

    Parse error: syntax error, unexpected ‘<' in /home/cmomb/butfirstwehavecoffee.com/wp-content/themes/notepad/functions.php on line 18

    Nu kan jag inte bli av med den. Kan någon ge råd. Min webbplats är nu nere.

    • Öppna filen functions.php i en textredigerare som Anteckningar. Gå till rad 18. Du har förmodligen en <?php-tagg där som du inte behöver. Ta bort den och ta även bort den avslutande ?>-taggen.

      Admin

  11. Tack för detta först

    Jag kämpar med att positionera elementet. Det verkar alltid hamna i det övre vänstra hörnet av div-elementet.

    Är det möjligt att positionera den och även ändra bakgrundsbilden till en egen anpassad?

    Tack

  12. Bra handledning, som vanligt. Jag undrade dock om det fanns ett sätt att modifiera den för att använda en anpassad knapp istället för den stjärnformade som automatiskt dyker upp.

    Tack,

    Mark

  13. Bra handledning, jag har lagt upp den på min sida utan problem, jag testade den sedan och den fungerade, men det står fortfarande 0 efter att jag fäste.
    Mark

  14. Jag provade så många plugins... de fungerar inte med oändlig scrollning och nextgen-galleriet.... men med några ändringar löste detta skript mitt problem.. tack

  15. Hej,

    Jag vill bara fråga om jag kan ändra storleken på "pin it"-knappen? För den verkar ha varit lite för liten.

    Med vänliga hälsningar,

    Michael

  16. Den här koden slutade nyligen att fungera. Jag hade den på min webbplats och den fungerade utmärkt och nyligen verkar bilder fungera men sedan när du går för att visa pinboarden finns det ingen bild inställd. Andra gånger när du försöker pinna den 502-fel som kommer från Pinterest-webbplatsen. Några idéer?

  17. Det finns en bugg i koden. Den genererade href för pin it-knappen bör inkludera ‘url=’, för närvarande saknas likhetstecknet.

  18. För WordPress-användare är det enkelt att lägga till Pin It eller något annat socialt medie! Under instrumentpanelen, gå till inställningar, klicka på delning och alla visas – klicka på det du vill lägga till!

    • TACK! Jag har letat efter hur man gör detta i 2 dagar & laddat ner något & det fungerade inte, jag var på väg att ge upp & sedan LÄSTE JAG TACKSAMT din kommentar. Jag uppskattar att någon gör det så ENKELT som det verkligen är, hur kommer det sig att wordpress inte kan göra det?

  19. Jag försökte lägga till detta... det fungerade men när du klickar på "Pin it" och det öppnar fönstret i en ny webbläsare och du faktiskt skickar in pinnet, laddas bara det nyss öppnade fönstret om och pinnet skickas inte in. Bestämde mig för att inte implementera det förrän de har fixat sina buggar.

  20. I used the ‘follow me’ code on the Pinterest Goodies page and pasted it into the ‘text’ widget on my WordPress blog. The button now appears right after my mini bio. It works quite well. :)

  21. För avancerade temaramverk som Thesis, Genesis, Headway etc., måste du lägga till dessa koder via functions.php-filen med hjälp av ramverkets lämpliga krokar. Vi kan inte täcka alla temaramverk som finns. De flesta bloggar om temaramverk har instruktioner om hur man anpassar teman.

    Admin

    • @wpbeginner Det är inte idealiskt, men det är egentligen inte mycket mer än vad du måste göra för att publicera bilden ändå. Jag letar fortfarande efter ett bra alternativ (helst ett plugin) som a) fungerar på mitt tema och b) är enkelt. Tack vare Pinterest popularitet är jag lyckligtvis övertygad om att någon snart kommer att ha ett igång!

  22. Se till att du ställer in $pinterestimage[0] annars kommer den att returnera en array. Annars är jag inte säker på varför du får felet.

  23. Det fungerar, men det visar texten "array" före Pin It-knappen. Jag anropar den via min functions.php, så här "echo $pinterestimag.....<?php;" Kan det vara därför?

  24. Hur får man detta att integreras med ett befintligt WP-plugin som Digg Digg eller Sociable?

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år kommentarspolicy, och din e-postadress kommer INTE att publiceras. Använd INTE nyckelord i namn fältet. Låt oss ha en personlig och meningsfull konversation.