Adding custom social share buttons to a blog post

SOLVE
Highlighted
Occasional Contributor

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

 

 

 

 

1 Accepted solution

Accepted Solutions
Occasional Contributor

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>

 

 

 

 

6 Replies 6
Community Manager

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!

Reply
0 Upvotes
Occasional Contributor

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>

 

 

 

 

Occasional Contributor

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!

Occasional Contributor

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!

Occasional Contributor

Hi @gloreal,

This did help some one Smiley Happy

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?

Reply
0 Upvotes
Esteemed Advisor

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

- Jonathan Sumner
Reply
0 Upvotes