Whatsapp social media icon?

SOLVE
lait
Participant

Hello,

 

I have duplicated the social_sharing module to customize the social sharing icons.

By default, we have Facebook, Twitter, Pinterest, LinkedIn, Email icons.

I was wondering if it was possible to add Whatsapp as well (at the end of the social_sharing file here)?

 

{% set size = "24px" %}
{% set borderRadius = "3px" %}
{% set linkStyle = "width:"~size~";border-width:0px;border:0px;text-decoration:none;" %}
{% set imgStyle = "height:"~size~";width:"~size~";border-radius:"~borderRadius~";border-width:0px;border:0px;" %}

{% macro render_social_icon(networkName) %}
{% set network = module[networkName] %}
{% if (networkName == "pinterest" and network.pinterest_media and network.enabled) or (networkName != "pinterest" and network.enabled) %}
{% if networkName == "pinterest" %}
{% set pinterest_media = module.pinterest.pinterest_media.src %}
{% endif %}
{% set logo = networkName ~'-color.png' %}
{% set urlOperator = "&" if "?" in page_meta.canonical_url else "&" %}
{% if module.link %}
{% set social_link_url = module.link ~ urlOperator ~ "utm_medium=social&utm_source="|safe ~ networkName %}
{% elif content.email_type.blogRssChild %}
{% set social_link_url = content.rss_email_url %}
{% else %}
{% set social_link_url = page_meta.canonical_url ~ urlOperator ~ "utm_medium=social&utm_source="|safe ~ networkName %}
{% endif %}

<a href="{{ network.custom_link_format }}" target="_blank" rel="noopener" style="{{ linkStyle }}" >
<img src="{{ module_asset_url(logo) }}" class="hs-image-widget hs-image-social-sharing-24" style="{{ imgStyle }}" width="{{ size }}" hspace="0" alt='{{ "Share on " ~ networkName }}' />
</a>
{% endif %}
{% endmacro %}

<div class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_social_sharing" data-hs-cos-general-type="widget" data-hs-cos-type="social_sharing">
{{ render_social_icon('facebook') }}
{{ render_social_icon('linkedin') }}
{{ render_social_icon('share_twitter') }}
{{ render_social_icon('pinterest') }}
{{ render_social_icon('email') }}
</div>

 

 

 

0 Upvotes
1 Accepted solution

Accepted Solutions
jonchim
Solution
Guide | Diamond Partner

haha @dennisedson I typically use a third party that has every possible social media platform option 😀But this is an easy addition @lait 
You can add  {{ render_social_icon('whatsapp') }} to the last div like this, and then in the module clone the facebook (field group) and rename it to whatsapp. Finally be sure to upload the icon and follow the same format and size of the other icons and you should be able to use whatsapp. Let me know if that works out! 

 

<div class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_social_sharing" data-hs-cos-general-type="widget" data-hs-cos-type="social_sharing">
{{ render_social_icon('facebook') }}
{{ render_social_icon('linkedin') }}
{{ render_social_icon('share_twitter') }}
{{ render_social_icon('pinterest') }}
{{ render_social_icon('email') }}
</div>

 

Screen Shot 2021-08-03 at 10.47.08 AM.png

 

Screen Shot 2021-08-03 at 10.47.34 AM.pngScreen Shot 2021-08-03 at 10.48.44 AM.png

 






Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

4 Replies 4
dennisedson
Community Manager

@jonchim ever do anything like this 😀

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
jonchim
Solution
Guide | Diamond Partner

haha @dennisedson I typically use a third party that has every possible social media platform option 😀But this is an easy addition @lait 
You can add  {{ render_social_icon('whatsapp') }} to the last div like this, and then in the module clone the facebook (field group) and rename it to whatsapp. Finally be sure to upload the icon and follow the same format and size of the other icons and you should be able to use whatsapp. Let me know if that works out! 

 

<div class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_social_sharing" data-hs-cos-general-type="widget" data-hs-cos-type="social_sharing">
{{ render_social_icon('facebook') }}
{{ render_social_icon('linkedin') }}
{{ render_social_icon('share_twitter') }}
{{ render_social_icon('pinterest') }}
{{ render_social_icon('email') }}
</div>

 

Screen Shot 2021-08-03 at 10.47.08 AM.png

 

Screen Shot 2021-08-03 at 10.47.34 AM.pngScreen Shot 2021-08-03 at 10.48.44 AM.png

 






Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

lait
Participant

Thanks you @jonchim! But one last question if you don't mind. Do you know what the sharing link would be in the case of whatsapp by any chance? Because as I duplicated it from the Facebook field, I do have it here but it opens as a Facebook sharing window 😕
Thanks a lot for the help
Screen Shot 2021-08-03 at 1.44.03 PM.png

0 Upvotes
miljkovicmisa
Top Contributor | Gold Partner

Hello @lait , I had to use it once, and found the documentation right here in this link.
Basically you will end up with the below link:

 

<a href="https://wa.me/?text=the text to share" target="_blank">Share via Whatsapp</a>

 

 

So for your needs in the hubspot editor you will have to modify your link to something like below:

 

https://wa.me/?text={{ social_link_url }}

 


Let me know if that works okay for you!

If my answer was helpful, please mark it as a solution.