{"id":33262,"date":"2013-04-24T16:29:12","date_gmt":"2013-04-24T10:59:12","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=33262"},"modified":"2026-10-13T13:41:56","modified_gmt":"2026-10-13T08:11:56","slug":"add-pinterest-image-hover-pin-it-buttons","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/add-pinterest-image-hover-pin-it-buttons\/","title":{"rendered":"How to Add Image Hover Pinterest Pin It Buttons (Save Button, 2026)"},"content":{"rendered":"<p>Want to add image hover Pin It buttons, so a Pinterest button appears whenever visitors hover over your images? It&#8217;s one of the easiest ways to get more traffic from Pinterest, because readers can save your pictures to their boards in one click. We added hover Pin It buttons to QOT in 2013 with Pinterest&#8217;s official script. Pinterest now calls it the <strong>Save button<\/strong>, but the same script still works in 2026. Here&#8217;s the updated code, the options and the WordPress setup.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-33263\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/pin-it-buttons.jpg\" alt=\"Image hover Pin It buttons\" width=\"494\" height=\"308\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/pin-it-buttons.jpg 494w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/pin-it-buttons-300x187.jpg 300w\" sizes=\"(max-width: 494px) 100vw, 494px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> To add image hover Pin It buttons, paste Pinterest&#8217;s script before the closing <code>&lt;\/body&gt;<\/code> tag: <code>&lt;script async defer src=\"https:\/\/assets.pinterest.com\/js\/pinit.js\" data-pin-hover=\"true\"&gt;&lt;\/script&gt;<\/code>. A Save button then appears when visitors hover over larger images. Use <code>data-pin-nopin=\"true\"<\/code> on images you don&#8217;t want pinned.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6af37f44c2f00\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6af37f44c2f00\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/add-pinterest-image-hover-pin-it-buttons\/#The_image_hover_Pin_It_button_code\" >The image hover Pin It button code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/add-pinterest-image-hover-pin-it-buttons\/#How_the_Pin_It_buttons_work\" >How the Pin It buttons work<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/add-pinterest-image-hover-pin-it-buttons\/#Add_Pin_It_buttons_in_WordPress\" >Add Pin It buttons in WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/add-pinterest-image-hover-pin-it-buttons\/#Control_which_images_show_the_button\" >Control which images show the button<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/add-pinterest-image-hover-pin-it-buttons\/#Things_to_consider_before_adding_Pin_It_buttons\" >Things to consider before adding Pin It buttons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/add-pinterest-image-hover-pin-it-buttons\/#Frequently_asked_questions\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/add-pinterest-image-hover-pin-it-buttons\/#Does_Pinterest_still_support_the_Pin_It_button\" >Does Pinterest still support the Pin It button?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/add-pinterest-image-hover-pin-it-buttons\/#Why_doesnt_the_hover_button_appear_on_my_images\" >Why doesn&#8217;t the hover button appear on my images?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/add-pinterest-image-hover-pin-it-buttons\/#Do_Pin_It_buttons_work_on_mobile\" >Do Pin It buttons work on mobile?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/add-pinterest-image-hover-pin-it-buttons\/#Will_Pin_It_buttons_slow_my_site\" >Will Pin It buttons slow my site?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"The_image_hover_Pin_It_button_code\"><\/span>The image hover Pin It button code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Add this once, near the end of your page template (or in your theme&#8217;s footer):<\/p>\n<pre><code>&lt;script async defer\r\n  src=\"https:\/\/assets.pinterest.com\/js\/pinit.js\"\r\n  data-pin-hover=\"true\"\r\n  data-pin-tall=\"true\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<ul>\n<li><code>data-pin-hover=\"true\"<\/code> shows the button when someone hovers over an image.<\/li>\n<li><code>data-pin-tall=\"true\"<\/code> makes the button larger and easier to tap. Add <code>data-pin-round=\"true\"<\/code> for a round button.<\/li>\n<li>The script loads asynchronously, so it doesn&#8217;t block your page from rendering.<\/li>\n<\/ul>\n<p>You can also design a custom button with Pinterest&#8217;s <a href=\"https:\/\/developers.pinterest.com\/tools\/widget-builder\/\" target=\"_blank\" rel=\"noopener\">widget builder<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_the_Pin_It_buttons_work\"><\/span>How the Pin It buttons work<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When a visitor clicks the hover button, Pinterest opens a window to save the image to one of their boards. The Pin uses your image&#8217;s alt text or <code>data-pin-description<\/code> as the description and links back to your page, so every repin can send you visitors. Choose descriptive alt text, which also helps accessibility and image SEO.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-33268\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/get-pinterest-traffic.png\" alt=\"Get Pinterest traffic with Pin It buttons\" width=\"500\" height=\"304\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/get-pinterest-traffic.png 500w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/get-pinterest-traffic-300x182.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Add_Pin_It_buttons_in_WordPress\"><\/span>Add Pin It buttons in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Header and footer plugin:<\/strong> paste the script into the footer box of a plugin such as WPCode.<\/li>\n<li><strong>Child theme:<\/strong> add it in <code>footer.php<\/code> before <code>&lt;\/body&gt;<\/code>.<\/li>\n<li><strong>Social sharing plugins:<\/strong> many sharing plugins include an image hover Pinterest button option, so you may not need the script at all.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Control_which_images_show_the_button\"><\/span>Control which images show the button<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>The button only appears on larger images, not on icons and tiny thumbnails.<\/li>\n<li>Add <code>data-pin-nopin=\"true\"<\/code> to an <code>&lt;img&gt;<\/code> to hide the button on that image; see how to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/03\/block-pinterest-pins\/\">block Pinterest pins<\/a> site-wide.<\/li>\n<li>Add <code>data-pin-description=\"...\"<\/code> to set a better Pin description than the alt text.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Things_to_consider_before_adding_Pin_It_buttons\"><\/span>Things to consider before adding Pin It buttons<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Is your audience on Pinterest?<\/strong> Recipes, DIY, home, fashion, travel and design sites benefit most. Tech news sites may see little traffic.<\/li>\n<li><strong>Privacy:<\/strong> the script is a third-party resource. If you use a cookie consent tool, load it after consent where your privacy rules require it.<\/li>\n<li><strong>Speed:<\/strong> it&#8217;s small and async, but every extra script counts on mobile.<\/li>\n<\/ul>\n<p>Track how Pinterest traffic grows with <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/03\/pinterest-web-analytics\/\">Pinterest analytics<\/a>, and follow <a href=\"https:\/\/www.pinterest.com\/quickonlinetips\/\" target=\"_blank\" rel=\"noopener\">QOT on Pinterest<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Does_Pinterest_still_support_the_Pin_It_button\"><\/span>Does Pinterest still support the Pin It button?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. It&#8217;s now called the Save button, and the pinit.js script still supports image hover buttons.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Why_doesnt_the_hover_button_appear_on_my_images\"><\/span>Why doesn&#8217;t the hover button appear on my images?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The image may be too small, have <code>data-pin-nopin<\/code>, sit inside a lazy-loaded container, or the script may be blocked by an ad blocker.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Do_Pin_It_buttons_work_on_mobile\"><\/span>Do Pin It buttons work on mobile?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>There&#8217;s no hover on touchscreens, so mobile visitors usually use their browser&#8217;s share menu or the Pinterest app instead.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Will_Pin_It_buttons_slow_my_site\"><\/span>Will Pin It buttons slow my site?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Barely. The script loads asynchronously, but test with PageSpeed Insights if speed matters.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to add image hover Pin It buttons, so a Pinterest button appears whenever visitors hover over your images? It&#8217;s&#8230;<\/p>\n","protected":false},"author":4,"featured_media":33268,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49],"class_list":["post-33262","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/33262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=33262"}],"version-history":[{"count":3,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/33262\/revisions"}],"predecessor-version":[{"id":65480,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/33262\/revisions\/65480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/33268"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=33262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=33262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=33262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}