Adding custom social share buttons to a blog post

[davidcarroll75]

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?

<!--Linkedin--> <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%20em..." alt="Share article on Linkedin" style="max-width: 50px" width=“50px”></a>

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

[Jsum]

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

[sarahillman]

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? 

[emills]

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. 

[davidcarroll75 · Accepted solution]

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.

<!--Linkedin--> <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%20em..." alt="Share article on Linkedin" style="max-width: 50px" width=“50px”></a>

[gloreal]

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

<script>
$( document ).ready(function() {
var url = window.location.href;
var link = "https://twitter.com/intent/tweet?text=" + url;
document.getElementById('tweetQuote').href = link;
});
</script>

Hope this helps someone!

[DanFromCF]

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?

[gloreal]

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

<script>
$( document ).ready(function() {
var fbUrl = window.location.href;
var fbLink = "https://www.facebook.com/sharer/sharer.php?u=" + fbUrl;
document.getElementById('fbQuote').href = fbLink;
});
</script>

Hope this helps someone!

[roisinkirby]

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!