Help Adding Pinterest Share Icon to Blog/Lading Page Images

New Contributor



I'm only about a week in using Hubspot (super newbie) so please forgive me if this question has been asked. 


I'd like to add a Pinterest "P" or share button on each image within a blog post or landing page. (I was able to add a Pin It button at the bottom of the page within the Social Sharing area).


There are two different bits of code that Pinterest requests for something like this (

1. "Copy and paste this code into your page where you want your add-on to appear...."

2. "Don't forget to include pinit.js once per page, right before the closing </BODY> tag."


My question is: where do these two bits of code get placed if I'm using the Hubspot templates for blog and landing pages? 


Here's a screenshot of what it looks like on Travel and Leisure's website, this is just one example, I've seen this pretty often on sites lately. 












Thanks so much!




1 Reply 1
Esteemed Advisor | Partner

@tiffanyburnette this can be tricky if you are new.


for the pinit.js script, you can place this in the footer of your blog. in your Hubspot portal go to:

content -> content settings -> blog (left sidebar) -> choose the blog in question (dropdown) 


then scroll down to find the "Footer HTML for Blog Listing Pages", place the script here, and make sure "Use same footer HTML for blog posts" is checked. 


For the actual button code, you will need to edit the post markup. In the blog template you will see a module with two buttons, one for editing the listing markup and the other for the post markup. Choose the post markup and a text editor will open.


From here it's up to you. I know you want to place this ontop of the image like in the example so your htm/css skills will need to come into play here. Placing the code on the page should cause the button to work. having it position over the featured image will be more difficult. 

- Jonathan Sumner