{"id":67359,"date":"2016-03-24T06:39:39","date_gmt":"2016-03-24T10:39:39","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=67359"},"modified":"2016-04-06T07:31:10","modified_gmt":"2016-04-06T11:31:10","slug":"js-animated-how-to-add-pin-it-button","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-how-to-add-pin-it-button.html","title":{"rendered":"JS Animated. How to add &#8220;pin it&#8221; button"},"content":{"rendered":"<p>This tutorial will show you how to add <strong>Pin it<\/strong> button in Responsive Website Templates.<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=a0k1HZY0ZiE?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animated. How to add &#8220;pin it&#8221; button<\/a>\r\n<p>If you want to build a button yourself, first decide which kind of Pin It button you want to add. There are 3 types to choose from:<\/p>\r\n\r\n<ul class=\"list\">\r\n<li><p>Image hover: When somebody hovers over any image on the page, the Pin It button shows up;<\/p><\/li>\r\n<li><p>Any image: If somebody clicks this button, they can Pin any image on the site. This is pretty easy to make;<\/p><\/li>\r\n<li><p>One image: This is a Pin It button for a single image\/element on your page, and requires more technical coding.<\/p><\/li>\r\n<\/ul>\r\n\r\n<p>Let&#8217;s learn how to build the last type &#8211; <strong>One image<\/strong>:<\/p>\r\n<ol>\r\n<li><p>Go to the <a href=\"https:\/\/developers.pinterest.com\/widgets\/widgets\/builder\/\" target=\"_blank\">widget builder<\/a>.<\/li>\r\n<li><p>Select <strong>One image<\/strong> in the <strong>Button type<\/strong> section.<\/p><\/li>\r\n<li><p>Customize the size, shape or image for your button.<\/p><\/li>\r\n<li><p>Add the URL for the webpages that have the element you want to create a Pin It button for (this can be your homepage or any other page on your site). You can also write a description for your  element\/image:\r\n<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.1-300x226.jpg\" alt=\"how to add pin it button.1\" width=\"300\" height=\"226\" class=\"aligncenter size-medium wp-image-67387\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.1-300x226.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.1-150x113.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.1-1024x771.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.1.jpg 1078w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li><p>Preview your button by hovering over the sample image. You can also click the Pin It button to see how it works.<\/li>\r\n<li><p>Once you are satisfied with the button, copy the code under the <strong>Copy the code<\/strong> section and paste in the necessary file (in our case, it is <em>index.html<\/em> file) next to a desired element of the page:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.2-300x178.jpg\" alt=\"how to add pin it button.2\" width=\"300\" height=\"178\" class=\"aligncenter size-medium wp-image-67388\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.2-300x178.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.2-150x89.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.2.jpg 976w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.3-300x123.jpg\" alt=\"how to add pin it button.3\" width=\"300\" height=\"123\" class=\"aligncenter size-medium wp-image-67389\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.3-300x123.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.3-150x62.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.3-1024x420.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.3.jpg 1409w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li><p>The last step is to include <strong>pinit.js<\/strong> once (and only once) per page. Paste the code just above the closing <strong>\/body<\/strong> tag of each page, where you want the button to show up on your site:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.4-300x155.jpg\" alt=\"how to add pin it button.4\" width=\"300\" height=\"155\" class=\"aligncenter size-medium wp-image-67391\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.4-300x155.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.4-150x78.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.4-1024x530.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/how-to-add-pin-it-button.4.jpg 1415w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li><p>Save changes and visit the  website.<\/p><\/li>\r\n<\/ol>\r\n\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=a0k1HZY0ZiE?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animated. How to add &#8220;pin it&#8221; button<\/a>","protected":false},"excerpt":{"rendered":"<p>This tutorial will show you how to add <strong>Pin it<\/strong> button in Responsive Website Templates.<\/p>\n","protected":false},"author":67,"featured_media":67360,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[536,2411,2225],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/67359"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=67359"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/67359\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/67360"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=67359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=67359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=67359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}