How to make custom social sharing icons?

[YXie]

Hi guys,

I tried to create some social sharing icons for podcast paltforms like Spotify/Apple Podcasts following this instruction: https://knowledge.hubspot.com/design-manager/use-custom-social-icons-on-hubspot-pages-or-templates

I have changed everything I could but I dont't know what to do with the code in the default text. 

Picture 2 is a clone of piciture 1, and I want to change the default text showed on the picture 3 so as to creating customer social sharing icons. 

Thank you in advance for anyone who gives any advice on my issue!Picture 1: original modulePicture 2: cloned modulePicture 3: texts need to be changed

[webdew]

Hi @YXie ,

Use Like This Code:
<div class="social-share">
<a class="share_twitter social" href="javascript&colon;;" title="twitter" target="popup" onclick="window.open('https://twitter.com/home?status={{ page_meta.name|replace("'", "") }}+{{content.absolute_url}}','Twitter Share','width=600,height=600')">
<!-- <i class="fab fa-twitter"></i> -->
<div class="social--icon twitter-icon">twitter </div>
</a>
<a class="share_facebook social" href="javascript&colon;;" title="facebook" target="popup" onclick="window.open('http://www.facebook.com/sharer/sharer.php?u={{content.absolute_url}}','Facebook Share','width=600,height=600')">
<!-- <i class="fab fa-facebook-f"></i> -->
<div class="social--icon facebook-icon">
facebook</div>
</a>
<a class="share_linkedin social" href="javascript&colon;;" title="linkedin" target="popup" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url={{content.absolute_url}}','LinkedIn Share','width=600,height=600')">
<!-- <i class="fab fa-linkedin-in"></i> -->
<div class="social--icon linkedin-icon">linkedin</div>
</a>
</div>

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

[Indra]

Hi @YXie,

You can easily use these snippets but you have to modify it to your desire.

For your html:

<div class="social-media">
  <a class="social-media__links" href="#" title="Visite us at Spotify">
  <i class="fab fa-spotify" aria-hidden="true"></i>
</a>

<a class="social-media__links" href="#" title="Visite us at Apple podcast">
  <i class="fas fa-podcast" aria-hidden="true"></i>    
</a>
</div>

For your style:

.social-media{
  text-align:center;
  margin:20px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
}
.social-media__links{
  font-size:30px;
  color:rgba(0,0,0,0.6);
  transition: all 200ms ease-in-out;
}
.social-media__links:hover{
  font-size:30px;
  color:rgba(0,0,0,1);
}

Also, don't forget to include fontAwesome if you would like these icons. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

If these two icons are the only ones you will going to use, I recommend uploading custom images for better performance.

For a fully working sample, check this codepen: https://codepen.io/ind88/pen/rNwVKZE 

[Indra]

Hi @YXie,

So there are a few options you have. But let me ask you first. What do you want to accomplish?

- Share your page url with social media

- Of setup social media links

So to setup share links, you could easilly setup a custom module and add or remove the share options you want. In the example Font Awsome is used for the icons but you can add custom icons if you like.

<div class="social-media-share">
  <!--Share-->
  <a target="blank" class="mail" title="Share by mail" href="mailto:?subject={{ content.name | striptags }}&amp;body={{ content.post_body | striptags }}">
    <i class="fa fa-envelope-o" aria-hidden="true"></i>
  </a>
  <a target="_blank" class="facebook" title="Share on Facebook" href="http://www.facebook.com/sharer/sharer.php?u={{content.absolute_url}}">
    <i class="fa fa-facebook" aria-hidden="true"></i>
  </a>
  <a target="_blank" class="linkedin" title="Share on LinkedIn" href="http://www.linkedin.com/shareArticle?mini=true&url={{content.absolute_url}}">
    <i class="fa fa-linkedin" aria-hidden="true"></i>
  </a>
  <a target="_blank" class="pinterest" title="Share on Pinterest" href="http://pinterest.com/pin/create/button/?url={{content.absolute_url}}&amp;media={{content.featured_image}}">
    <i class="fa fa-pinterest-p" aria-hidden="true"></i>
  </a>
  <a target="_blank" class="twitter" title="Share on Twitter" href="https://twitter.com/intent/tweet?url={{content.absolute_url}}&text={{ content.name | striptags }}">
    <i class="fa fa-twitter" aria-hidden="true"></i>
  </a>
</div>

For social media links you could set it up hardcoded inside the module.

<div class="social-media-links">
  <!--Links-->
  <a target="_blank" class="facebook" title="Facebook" href="http://www.facebook.com/company">
    <i class="fa fa-facebook" aria-hidden="true"></i>
  </a>
  <a target="_blank" class="linkedin" title="LinkedIn" href="http://www.linkedin.com/company">
    <i class="fa fa-linkedin" aria-hidden="true"></i>
  </a>
  <a target="_blank" class="pinterest" title="Pinterest" href="http://pinterest.com/company">
    <i class="fa fa-pinterest-p" aria-hidden="true"></i>
  </a>
  <a target="_blank" class="twitter" title="Twitter" href="https://twitter.com/company">
    <i class="fa fa-twitter" aria-hidden="true"></i>
  </a>
</div>

Ofcouse you could also make it inside a global module and setup a group that is set to repeat where the customer can select the social media link, title and icon.

[YXie]

Hi Indra

Thank you for your response. I would like something like this in the screenshot, but instead of Facbook, Twitter, I want to have icons for Spotify/Apple Podcasts...etc, and the icons should have links that can direct to the Spotify/Apple Podcasts platforms to listen podcasts after clicked.