Add a Pinterest Pin-it Button to Your Website



Add a Pinterest Pin-it Button to Your Website. Add the Follow button and Pin, board, and profile widgets to give people more ways to interact with your Pinterest account from your website.

The Follow button lets people follow you on Pinterest and see things you save in their home feed. The Pin, board, and profile widgets help you showcase your Pinterest activity on your website.


Why should I add Pin-it button to my site?

Pinterest, being the latest hot concept in Social media, has provided users more traffic referrals than some of the top social websites like YouTube and Google+. If it can grow traffic, it may also increase subscriptions and sales. So, it becomes important to join Pinterest and be active there, especially when you are a Blogger, Webmaster or social media junkie.


Simple Pin-it button link

If you focus on making your site fast-loading and don’t use much JavaScript up there, a simple Pin-it button link would be enough. Grab the below given code, put it on your website and done!


<a class="pin-it-button" count-layout="none" href="//www.pinterest.com/pin/create/button/"><img alt="Pin it" src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>


Pinterest Pin it button for WordPress

You may easily add the Pin-it button to your WordPress blog with the help of a plugin, but if you’re a code ninja, I mean if you want to add it manually, here’s the thing:

  • Go to your theme directory
  • Edit single.php.
  • Put the below given code just above or below <?php the_content(); ?>, it depends on where you want to display the button:

<a data-pin-color="red" data-pin-config="beside" data-pin-do="buttonPin" data-pin-height="28" href="//www.pinterest.com/pin/create/button/?url=&lt;?php the_permalink(); ?&gt;&amp;media=&lt;?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?&gt;&amp;description=&lt;?php echo get_the_title(); ?&gt;"><img alt="Pin it" src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png" /></a>
<script async="" defer="" src="//assets.pinterest.com/js/pinit.js" type="text/javascript"></script>

  • Save Changes.

Pin it button for Blogger

  • Navigate to your Blogger Dashboard » Template » Edit HTML
  • Find <b:includable id='shareButtons' var='post'>, and paste the following code just below it:

<a expr:href='"//www.pinterest.com/pin/create/button/?url=" + data:post.url + "&description="+data:post.title' data-pin-do="buttonPin" data-pin-config="beside" data-pin-color="red" data-pin-height="28"><img src='//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png' alt='Pin it' / ></a>
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>

  • Save Template.
See the button live on your blog!


Quick Tips

  1. Use Ctrl + F or Command + F keys to find the code while editing your template or theme or website’s HTML.
  2. You may alter the value data-pin-config to above, beside or none to get Pinterest button with horizontal count, vertical count and no count respectively.
  3. You may remove the data-pin-height attribute to get the default small appearance of the button.
  4. Lastly, consider sharing this tutorial with friends, or, you may follow us on Pinterest :)
  5. I hope this guide has helped you to achieve what it is meant for. If you’ve a question, suggestion or experiencing problems with the integration, let me know through your comments.