In this Drupal tutorial I will show you how to add Pinterest Pin It Button to Drupal 7 site using views and html.tpl.php file.
I like it keep it simple, and I have created a separate view for all social share plugins (Facebook, Twitter, G+ and Pinterest). Each of the social sites came with his own JavaScript you have to load either to your template.php file or I prefer to add it to html.tpl.php in theme folder (If you have not it, consider creating it).
Add Pinterest script to your html.tpl.php
<!-- Please call pinit.js only once per page --> <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
Create a new view, or modify your existing one
- Add Contextual Filter: Nid
- Add Relationship: File usage
More for configuring Relationship for this task please read this comment: https://drupal.org/node/1098938#comment-5025942
Add Fields:
- Content:Path (Excluded)
- File: Path (Excluded)
- Content (Title) (Excluded)
- Custom Text
In field Custom Text add:
<a href="//www.pinterest.com/pin/create/button/?url=[path]&media=[uri]&description=[title]" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
Where Path is path to your node, URI is path to your image, TITLE will be description field, you can change this to BODY if you prefer.
If everything done right, your Pin It Button should be fine. Just add a block in your theme.
By using this approach I have added Facebook, Twitter, G+ as well all in one view. You can see it in live above each of my posts.