Share Widget on Blog

Developer Support CMS Development
1

Hello,

We would like to add a widget with sharing options at the footer of each of our blog posts. How can I do that?

See example from HubSpot blog post below.

DFenton_0-1701208705018.png

2

Hi, @DFenton :waving_hand: You can build a custom module in the Design Manager. If you are not comfortable using HTML, CSS, and JavaScript, you can reach out to a developer for assistance here — HubSpot Marketplace.

Design Manager doc for developers

If you build a custom module and get stuck at a specific point, please share your code here that is giving you issues, and we’ll see if our community members can assist you.

Best,

Jaycee

3

Hi @DFenton,

if the default sharing module doesn’t meet your needs you can create your own by creating a new (global) custom module.

It’s up to you if you want to provide some features like icon select, color settings and such. To recreate the one you’ve provided via screenshot just add a text-field(not rich-text) in the right sidebar and use the following code:

{% require_head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLdPG8FJ0V7irTLQ8Uo0qcPxh4Plq7G5tGm0rU+1SPhVotteLpBERwTkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
{% end_require_head %}

{% require_css %}
.customSharing{}

.customSharing h3.sharingHeadline{
font-size:1.25rem;
}

.sharingIconsWrapper{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
align-items: center;
gap:.75rem;
}

.sharingIconsWrapper a.sharingIcon{
text-decoration:none;
border-radius:3rem;
padding:.5rem;
font-size:1rem;
background:#ff0000; {# set the background color of the icons #}
cursor:pointer;
}

.sharingIconsWrapper a.sharingIcon i{
text-decoration:none;
color: #ffffff {# set the color of the icon #}
}

{% end_require_css %}

<div class="customSharing">
<h3 class="sharingHeadline">{{ module.headline }}</h3>
{# start sharing icons #}
<div class="sharingIconsWrapper">
<a href="https://twitter.com/home?status={{ content.absolute_url }}" target="_blank" class="sharingIcon twitter"><i class="fab fa-twitter"></i></a>

<a href="http://www.facebook.com/sharer.php?u={{ content.absolute_url }}" target="_blank" class="sharingIcon facebook"><i class="fab fa-facebook-f"></i></a>

<a href="http://www.linkedin.com/shareArticle?mini=true&url={{ content.absolute_url }}" target="_blank" class="sharingIcon linkedin"><i class="fab fa-linkedin-in"></i></a>

<a href="whatsapp://send?text={{ page_meta.html_title }}%0A{{ content.absolute_url }}" target="_blank" class="sharingIcon whatsapp"><i class="fab fa-whatsapp"></i></a>

<a href="mailto:?subject={{ page_meta.html_title }}&body={{ content.absolute_url }}" target="_blank" class="sharingIcon email"><i class="far fa-envelope"></i></a>
</div>
{# end sharing icons #}
</div>

this should give you a good starting point

best,

Anton