Hi there, Hope you web engineers are doing well

Here is a small code snippet for pinterest button that you could use anywhere regardless of backend infrastructure.

First of all, we need to include anchor tag as a placeholder for pinIt button.

<a count-layout="horizontal" rel="nofollow">
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>

Coming to scripting part, first include jQuery to your webpage.

Then use this javascript (jQuery) snippet to dynamically initialize pinterest button.

$(document).ready(function(){
if(typeof(window.new_href) == "undefined") {
url = encodeURIComponent(window.location.href);
media = $("#contentwrap p").find("img:first").attr("src");
if(typeof(media) == "undefined") {
media = $("#contentwrap ul").find("img:first").attr("src");
}
if(typeof(media) == "undefined") {
media = "";
}
if(media != "") {
media_url = encodeURIComponent("http://www.example.com") + encodeURIComponent(escape(media));
} else {
media_url = "";
}
description = jQuery(document).find("meta[name='description']").attr("content") == "" ? jQuery(document).attr("title") : jQuery(document).find("meta[name='description']").attr("content");
description = encodeURIComponent(description);
new_href =  "//pinterest.com/pin/create/button/?url=" + url + "&media=" + media_url + "&description=" + description;
$(".pin-it-button").attr("href",new_href);
window.new_href = new_href;

js = document.createElement('script');
js.src = "//assets.pinterest.com/js/pinit.js";
js.type = 'text/javascript';
document.body.appendChild(js);
}
});

Code Details

• above code will first try to get webpage url using window.location.href and escape using standard javascript function.
• then It’ll try to fetch first image from your document using $(“#contentwrap p”).find(“img:first”).attr(“src”);
  you could change it to your needs i.e. #contentwrap  can be replaced with your container div i.e. #content.
• if it can’t find image in paragraph, then i’ll try to find in list tags.
• even if it can’t find image then it’ll left it blank.
• then It’ll merge image path with your domain string and make whole string browser safe using encodeURIComponent. So till now we are ready with media and url parameters.
• Now coming to description part – it’s somewhat tricky, most website owner provide webpage description in meta tags. So, let’s try to pull it from meta tags, and if meta description tag is empty use document title.

  description = jQuery(document).find("meta[name='description']").attr("content") == "" ? jQuery(document).attr("title") : jQuery(document).find("meta[name='description']").attr("content");
  

• you could also apply bit trick and grab few text from your content div (i.e not included in this code, but it’s simple)
  Try,

  ("#contentwrap p:first").html().substring(0,500);
  

• once button is prepared just include pinterest javascript dynamically into your webpage’s DOM

  js = document.createElement('script');
  js.src = "//assets.pinterest.com/js/pinit.js";
  js.type = 'text/javascript';
  document.body.appendChild(js);
  

For multiple button on single page, I’ve put this condition,

if(typeof(window.new_href) == "undefined") { //

So, code won’t execute again if you are using it within some template/tpl/include file. Feel free to leave your feedback

About Vikas Bhagwagar

VikasBhagwagar is Web Developer, Frontend Engineer, Interaction Designer, SEO engineer, System Admin, PSD slicer, Database Developer etc etc in-short B.E. Computer Engineer from SVNIT-Surat