How could I code <a> link with pinterest share / or pin ability similar to facebook where the image used is pulled from the <meta property="og:image" content=""/> facebook has the URL you can place as a link with your website within it, and it scrapes the site. How to do it with pinterest. I don't want to nest inline images within divs and share it like that. Because I don't want them to be visible on page, OG meta method as other share tools would be nice.
<a href="#"><li class="pinterest"><i class="fa fa-pinterest"></i></li></a>
You can use Rich pins that use meta properties to specify content. You'll need to add the OG tags and create a share link as follows:
<a href="https://www.pinterest.com/pin/create/button/?url=<yourURL>&media=<yourImgSrc>">
Share on pinterest
</a>
Where yourURL is the URL of the page that the OG tags are specified on.
Your meta tags should look something like this:
<meta property="og:title" content="..." />
<meta property="og:description" content="...." />
<meta property="og:type" content="article" />
<meta property="og:url" content="URL_OF_THIS_PAGE" />
<meta property="og:site_name" content="..." />
<meta property="og:image" content="IMG_URL" />