Whatsapp social media icons?

[lait]

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>

[miljkovicmisa]

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.

[dennisedson]

@jonchim ever do anything like this 😀

[jonchim · Accepted solution]

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>

[lait]

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