CMS Development

DFenton
Participant

Share Widget on Blog

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

 

0 Upvotes
2 Replies 2
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Share Widget on Blog

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

Anton Bujanowski Signature
Jaycee_Lewis
Community Manager
Community Manager

Share Widget on Blog

Hi, @DFenton 👋 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

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes