Skip to content

Instantly share code, notes, and snippets.

@sethxd

sethxd/hs-social-pinterest

Created March 16, 2016 12:57
Show Gist options
  • Save sethxd/935bbd1ca1d915cdc533 to your computer and use it in GitHub Desktop.
Save sethxd/935bbd1ca1d915cdc533 to your computer and use it in GitHub Desktop.
Download ZIP
Adding a Pinterest "Pin it" button to Hubspot's default blog_social_sharing module.
Raw
hs-social-pinterest
<span id="hs_cos_wrapper_blog_social_sharing"
class="hs_cos_wrapper hs_cos_wrapper_widget
hs_cos_wrapper_type_blog_social_sharing"
style="" data-hs-cos-general-type="widget"
data-hs-cos-type="blog_social_sharing">
<div class="hs-blog-social-share">
<ul class="hs-blog-social-share-list">
<li class="hs-blog-social-share-item
hs-blog-social-share-item-twitter">
<a href="https://twitter.com/share"
class="twitter-share-button"
data-lang="en"
data-url="{% raw %}{{ content.absolute_url }}{% endraw %}"
data-size="medium"
data-text="">Tweet</a>
</li>
<li class="hs-blog-social-share-item
hs-blog-social-share-item-linkedin">
<script type="IN/Share"
data-url="{% raw %}{{ content.absolute_url }}{% endraw %}"
data-showzero="true"
data-counter="right"></script>
</li>
<li class="hs-blog-social-share-item
hs-blog-social-share-item-facebook">
<div class="fb-like"
data-href="{% raw %}{{ content.absolute_url }}{% endraw %}"
data-layout="button_count" data-action="like"
data-show-faces="false" data-share="true"
data-width="120"></div>
</li>
<li class="hs-blog-social-share-item
hs-blog-social-share-item-pinterest">
<div class="pin-it"
style="display:inline-block">
<a data-pin-do="buttonPin"
data-pin-count="beside"
href="//www.pinterest.com/pin/create/button/
?url={% raw %}{{ content.absolute_url }}{% endraw %}
&description={% raw %}{{ page_meta.name }}{% endraw %}
&media={% raw %}{{ content.featured_image }}{% endraw %}">
<img style="vertical-align:middle"
src="//assets.pinterest.com/images/pidgets/
pinit_fg_en_rect_gray_20.png" />
</a>
</div>
</li>
<li class="hs-blog-social-share-item
hs-blog-social-share-item-google-plus">
<div class="g-plusone" data-size="medium"
data-href="{% raw %}{{ content.absolute_url }}{% endraw %}"></div>
</li>
</ul>
</div>
</span>
@sethxd
Copy link
Author

sethxd commented Mar 16, 2016

Don't forget to add this line to your template's head: <script async defer src="//assets.pinterest.com/js/pinit.js"></script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment