# 带有 WhatsApp Web 的社交分享组件

**URL:** <https://meta.discourse.org/t/social-share-component-with-whatsapp-web/108684>\
**Category:** Support\
**Created:** [2019年二月8日 14:38 UTC](https://meta.discourse.org/t/social-share-component-with-whatsapp-web/108684 "2019-02-08T14:38:28Z")\
**Posts on this page:** 1\
**Showing post:** 11

<div class="post-metadata">

**Author:** ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)\
**Post date:** [2019年二月11日 20:13 UTC](https://meta.discourse.org/t/social-share-component-with-whatsapp-web/108684/11 "2019-02-11T20:13:25Z")

</div>

So, you can use a trick to use both whatsapp (on mobile) and whatsapp web (on desktop) without problems.

You need to use 2 different icon. In the example below I will use

- `whatsapp` for Whatsapp and
- `whatsapp-square` for WhatsApp Web

1. Add both social links inside the theme component setting:  
a. `WhatsApp,fab-whatsapp,share with WhatsApp,https://wa.me/?text=`  
b. `WhatsApp Web,fab-whatsapp-square,share with WhatsApp Web,https://web.whatsapp.com/send?text=`

2. Add `fab-whatsapp` and `fab-whatsapp-square` in the **svg icon** component setting.  
The result will be:  

3. Now create a **new** theme component, go to the `common > CSS` tab of the component and add:

---

_[View the full topic](https://meta.discourse.org/t/social-share-component-with-whatsapp-web/108684)._