topic Re: Whatsapp social media icons? in CMS Development

Whatsapp social media icon?

lait — Tue, 03 Aug 2021 14:42:46 GMT

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>

Re: Whatsapp social media icons?

dennisedson — Mon, 02 Aug 2021 20:14:47 GMT

@jonchim ever do anything like this 😀

Re: Whatsapp social media icons?

jonchim — Tue, 03 Aug 2021 14:50:15 GMT

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>

Re: Whatsapp social media icons?

lait — Tue, 03 Aug 2021 19:16:15 GMT

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

Re: Whatsapp social media icon?

miljkovicmisa — Wed, 04 Aug 2021 08:05:15 GMT

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.