topic Re: Adding custom social share buttons to a blog post in CMS Development

Adding custom social share buttons to a blog post

davidcarroll75 — Tue, 27 Mar 2018 13:38:22 GMT

I'd like to add social share buttons to our news and project pages for Linkedin, Facebook and Twitter.

When I add the custom URL to the design page the social share buttons appear but don't pull the arcile post details to share.

I'm guessing the social link url isn't pulling in the news feed detail...any ideas?

<a href="http://www.linkedin.com/shareArticle?mini=true&url={{ social_link_url }}"><img src="https://www.maplesunscreening.co.uk/hubfs/Campaign%20and%20Maple%20Marketing%20Projects/Nurture%20emails/Nurture%20email%20template/icon-linkedin.png" alt="Share article on Linkedin" style="max-width: 50px" width=“50px”></a>

http://www.maplesunscreening.co.uk/news-and-insights/vpoxfordsciencepark

Re: Adding custom social share buttons to a blog post

roisinkirby — Thu, 05 Apr 2018 08:36:05 GMT

Hey @davidcarroll75 - welcome to the Community!

Can you confirm how this script was generated?

I wold reccommend reviewing this knowledge article: How do I add individual social media sharing buttons to a HubSpot page? which includes information on how to generate the correct embed codes for Twitter, Linkedin, Facebook and Pinterest.

Let me know how you get on with these instructions and if you still hit a roadblock!

Re: Adding custom social share buttons to a blog post

davidcarroll75 — Thu, 05 Apr 2018 09:24:15 GMT

Hi roisinkirby,

I've managed to do it for Linkedin using this code by brosing through recommendations on blog feeds. However, can't seem to find the same information for Twitter and Facebook.

The links you sent don't allow for a) customer social media icon and b) the url pulled through is from a blog feed so needs an absolute link.

<a href="http://www.linkedin.com/shareArticle?mini=true&url={{ content.absolute_url }}"><img src="https://www.maplesunscreening.co.uk/hubfs/Campaign%20and%20Maple%20Marketing%20Projects/Nurture%20emails/Nurture%20email%20template/icon-linkedin.png" alt="Share article on Linkedin" style="max-width: 50px" width=“50px”></a>

Re: Adding custom social share buttons to a blog post

gloreal — Wed, 25 Jul 2018 05:29:54 GMT

Solution for Twitter social sharing:

Your anchor tag should look like this

<a class="twitter" id="tweetQuote" href="#">Share on Twitter</a>

This script will need to run within the same module / template

Re: Adding custom social share buttons to a blog post

gloreal — Wed, 25 Jul 2018 05:53:44 GMT

Solution for Facebook social sharing:

Your anchor tag should look like this

<a class="facebook" id="fbQuote" href="#" target="_blank">Share on Facebook</a>

This script will need to run within the same module / template

Re: Adding custom social share buttons to a blog post

DanFromCF — Wed, 22 Jan 2020 12:48:36 GMT

Hi @gloreal,

This did help some one 🙂

Couple questions though: What's the advantage of using a script like this over content.absolute_url as OP suggested? I tried both your and OP's suggestions and both seemed to have the same effect.

Also, where would you put the &utm codes when using a script like this?

Re: Adding custom social share buttons to a blog post

Jsum — Thu, 23 Jan 2020 08:09:07 GMT

I'm just posting this here for reference. It may not solve more advanced problems, but this is how I typically create custom share icons:

{% widget_block social_sharing "my_social_sharing" label='Social Sharing', use_page_url=True, overrideable=True  %}
    {% widget_attribute "pinterest" is_json=True %}
        {"custom_link_format": "", "pinterest_media": "http://cdn1.hubspot.com/hub/158015/305390_10100548508246879_837195_59275782_6882128_n.jpg", "enabled": true, "network": "pinterest", "img_src": "https://static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png"}
    {% end_widget_attribute %}
    {% widget_attribute "twitter" is_json=True %}
        {"custom_link_format": "", "enabled": true, "network": "twitter", "img_src": "https://static.hubspot.com/final/img/common/icons/social/twitter-24x24.png"}
    {% end_widget_attribute %}
    {% widget_attribute "google_plus" is_json=True %}
        {"custom_link_format": "", "enabled": true, "network": "google_plus", "img_src": "https://static.hubspot.com/final/img/common/icons/social/googleplus-24x24.png"}
    {% end_widget_attribute %}
    {% widget_attribute "linkedin" is_json=True %}
        {"custom_link_format": "", "enabled": true, "network": "linkedin", "img_src": "https://static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png"}
    {% end_widget_attribute %}
    {% widget_attribute "facebook" is_json=True %}
        {"custom_link_format": "", "enabled": true, "network": "facebook", "img_src": "https://static.hubspot.com/final/img/common/icons/social/facebook-24x24.png"}
    {% end_widget_attribute %}
    {% widget_attribute "email" is_json=True %}
        {"custom_link_format": "", "enabled": true, "network": "email", "img_src": "https://static.hubspot.com/final/img/common/icons/social/email-24x24.png"}
    {% end_widget_attribute %}
{% end_widget_block %}

Just swap out the image file reference for the icons you want to use. Here's an example of this code in use (floating share bar at stuck to browser bottom): https://blog.avinger.com/blog/diabetes-the-problem-of-plaque-and-peripheral-artery-disease

Re: Adding custom social share buttons to a blog post

sarahillman — Wed, 21 Apr 2021 01:33:45 GMT

Hi there, I implemented this and it worked great. But I'm curious... I didn't want to include Pinterest so I deleted this code:

 {% widget_attribute "pinterest" is_json=True %}
        {"custom_link_format": "", "pinterest_media": "http://cdn1.hubspot.com/hub/158015/305390_10100548508246879_837195_59275782_6882128_n.jpg", "enabled": true, "network": "pinterest", "img_src": "https://static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png"}
    {% end_widget_attribute %}

but it still shows up and the Google Plus icon does not show. Is there a setting that I'm missing?

Re: Adding custom social share buttons to a blog post

emills — Thu, 28 Apr 2022 02:17:03 GMT

I'm having the same issue. I want to remove the Pinterest and Email links, but they still show even when I delete that part of the code snippet. Did you find a solution? 🙂

UPDATE: I followed the steps on this page and everything worked out 🙂
Use custom social icons on HubSpot pages or templates
Thanks to @roisinkirby for sharing that link in one of the other replies here.