{"id":191,"date":"2012-02-14T08:00:22","date_gmt":"2012-02-14T08:00:22","guid":{"rendered":"http:\/\/pixert.com\/blog\/?p=191"},"modified":"2012-02-13T08:07:54","modified_gmt":"2012-02-13T08:07:54","slug":"how-to-add-pinterest-pin-it-to-wordpress","status":"publish","type":"post","link":"https:\/\/pixert.com\/blog\/how-to-add-pinterest-pin-it-to-wordpress\/","title":{"rendered":"How to Add Pinterest “Pin It” to WordPress"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Pinterest<\/strong> is a vision board-styled social photo sharing website and app where users can create and manage theme-based image collections. Users of Pinterest curate themed image boards, populating them with media found online using the “Pin It” button, or uploaded from their computer. Each such item of media is known as a “pin,” and can be a picture, a video, a discussion or a monetary gift. Pins can be grouped into “boards,” which are sets of pins created on a given topic.<\/p><\/blockquote>\n

1. Plugins<\/strong><\/p>\n

Pin it Button<\/a><\/strong>  mimics the behavior of the official Pin It bookmarklet<\/a> and you have the option of placing it above or below your post content. Just go to Settings > Pin It Button in your WordPress admin after installing.<\/p>\n

2.  Hand-coded<\/strong>
\nAdd one of the following code to the bottom of the footer.php, put that before <\/body>
\nSimple<\/p>\n

<script type="text\/javascript" src="http:\/\/assets.pinterest.com\/js\/pinit.js"><\/script><\/pre>\n
Advanced<\/p>\n
<!-- Include ONCE for ALL buttons in the page -->\r\n<script type="text\/javascript">\r\n(function() {\r\n    window.PinIt = window.PinIt || { loaded:false };\r\n    if (window.PinIt.loaded) return;\r\n    window.PinIt.loaded = true;\r\n    function async_load(){\r\n        var s = document.createElement("script");\r\n        s.type = "text\/javascript";\r\n        s.async = true;\r\n        if (window.location.protocol == "https:")\r\n            s.src = "https:\/\/assets.pinterest.com\/js\/pinit.js";\r\n        else\r\n            s.src = "http:\/\/assets.pinterest.com\/js\/pinit.js";\r\n        var x = document.getElementsByTagName("script")[0];\r\n        x.parentNode.insertBefore(s, x);\r\n    }\r\n    if (window.attachEvent)\r\n        window.attachEvent("onload", async_load);\r\n    else\r\n        window.addEventListener("load", async_load, false);\r\n})();\r\n<\/script>\r\n<\/pre>\n
a. You want Pinterest to grab the first image of the post
\nAdd the following to your template (single.php) where you want the \u2018Pin It\u2019 button to appear.<\/p>\n
<a href="http:\/\/pinterest.com\/pin\/create\/button\/?url=<?php the_permalink() ?>&media=<?php echo pin_img() ?>&description=<?php the_title(); ?> on <?php bloginfo('url'); ?>" class="pin-it-button" count-layout="horizontal">Pin It<\/a><\/pre>\n
Add the following to your functions.php to show the first image of the post <\/p>\n
function pin_img() {\r\n  global $post, $posts;\r\n  $first_img = '';\r\n  ob_start();\r\n  ob_end_clean();\r\n  $output = preg_match_all('\/<img.+src=[\\'"]([^\\'"]+)[\\'"].*>\/i', $post->post_content, $matches);\r\n  $first_img = $matches [1] [0];\r\n\r\n  if(empty($first_img)){ \/\/Defines a default image\r\n    $first_img = "\/images\/default.jpg";\r\n  }\r\n  return $first_img;\r\n}<\/pre>\n
b. You want Pinterest to show a featured image
\nAdd the following to your template (single.php) where you want the \u2018Pin It\u2019 button to appear.<\/p>\n
<a href="http:\/\/pinterest.com\/pin\/create\/button\/?url=<?php the_permalink(); ?>&media=<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' ); echo $thumb['0']; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="horizontal">Pin It<\/a><\/pre>\n","protected":false},"excerpt":{"rendered":"
Pinterest is a vision board-styled social photo sharing website and app where users can create and manage theme-based image collections. Users of Pinterest curate themed image boards, populating them with media found online using the “Pin It” button, or uploaded from their computer. Each such item of media is known as a “pin,” and can […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[55,84,82,6,7],"class_list":["post-191","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-code-snippet-2","tag-pin","tag-pinterest","tag-wordpress-2","tag-wp"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1pvi1-35","jetpack-related-posts":[{"id":255,"url":"https:\/\/pixert.com\/blog\/how-to-add-pinterest-button-on-wordpress-attachment-file\/","url_meta":{"origin":191,"position":0},"title":"How to add Pinterest Button on WordPress Attachment file","author":"Pixel Insert \/ Pixert","date":"August 1, 2012","format":false,"excerpt":"See How to Add Pinterest \"Pin It\" to WordPress for introduction Codes in article above may work for Posts, but there's a little tweak for Pinterest Pin It button on attachment.php to work [php] 
 &media=&description= on \" class=\"pin-it-button\"\u2026","rel":"","context":"In "WordPress"","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/02\/pinterestlogo.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":271,"url":"https:\/\/pixert.com\/blog\/wordpress-theme-review-pinboard-by-themify\/","url_meta":{"origin":191,"position":1},"title":"WordPress Theme Review : Pinboard by Themify","author":"Pixel Insert \/ Pixert","date":"December 11, 2012","format":false,"excerpt":"Pinterest has obviously gotten a lot of attention lately,it\u00a0focuses on visual appearance to spread your words and it is one of the best way inspire people nowadays. Pinterest is using dynamic grid layout, features an auto stacking layout with infinite scroll. Themify created Pinterest style theme for WordPress name Pinboard\u2026","rel":"","context":"In "WordPress"","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/12\/pinboardskins.jpg?fit=1200%2C1193&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/12\/pinboardskins.jpg?fit=1200%2C1193&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/12\/pinboardskins.jpg?fit=1200%2C1193&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/12\/pinboardskins.jpg?fit=1200%2C1193&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/12\/pinboardskins.jpg?fit=1200%2C1193&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":355,"url":"https:\/\/pixert.com\/blog\/create-responsive-menu-with-wordpress-plugin\/","url_meta":{"origin":191,"position":2},"title":"Create Responsive Menu with WordPress Plugin","author":"Pixel Insert \/ Pixert","date":"March 29, 2014","format":false,"excerpt":"Responsive menu is a WordPress \u00a0plugin that creates a nice three-lined menu button or responsive menu when the site viewed on devices that users can click to bring a slide out menu, which is easily navigated .\u00a0 We don't need to code responsive menu to themes, \u00a0just install the plugin\u2026","rel":"","context":"In "WordPress"","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/03\/responsivemenu.jpg?fit=640%2C592&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/03\/responsivemenu.jpg?fit=640%2C592&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/03\/responsivemenu.jpg?fit=640%2C592&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":105,"url":"https:\/\/pixert.com\/blog\/facebook-share-button\/","url_meta":{"origin":191,"position":3},"title":"Facebook Share Button","author":"Pixel Insert \/ Pixert","date":"May 14, 2011","format":false,"excerpt":"Facebook Share is one of the most powerful and simple ways for users to share articles, pages, video, or Flash content from your site with their friends on Facebook. Over 1 billion pieces of content are shared each week on Facebook, and many of those are links shared using Facebook\u2026","rel":"","context":"In "Code Snippet"","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/05\/fbshare.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":42,"url":"https:\/\/pixert.com\/blog\/add-facebook-like-to-wordpress\/","url_meta":{"origin":191,"position":4},"title":"Add Facebook Like to WordPress","author":"Pixel Insert \/ Pixert","date":"March 10, 2011","format":false,"excerpt":"Facebook released Social Plugin in their recent F8 conference. It lets you see what friends have liked, commented on or shared on sites across the web. The Facebook button enables users to post pages from that site back to your Facebook profile with one click I added Facebook button manually\u2026","rel":"","context":"In "WordPress"","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/03\/do-you-have-facebook.jpg?fit=500%2C373&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":76,"url":"https:\/\/pixert.com\/blog\/how-to-get-administrator-access-back-in-wordpress\/","url_meta":{"origin":191,"position":5},"title":"How to get Administrator access back in WordPress?","author":"Pixel Insert \/ Pixert","date":"March 30, 2011","format":false,"excerpt":"Your role was Administrator. Suddenly, someone has changed your role in WordPress. You login to WordPress admin as a subscriber,you see \u00a0Profile page\u00a0instead getting fully-functional Admin page. \u00a0 How to get your role as an Administrator back? 1. Get help from another Administrator You can ask another Administrator to switch\u2026","rel":"","context":"In "WordPress"","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/03\/wprole.jpg?resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts\/191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/comments?post=191"}],"version-history":[{"count":0,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts\/191\/revisions"}],"wp:attachment":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/media?parent=191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/categories?post=191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/tags?post=191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}