Developer Usability

[pranavyadavGOT]

I am using this to share a users response from our game to a social media of their choice. However, I have come across a few issues hindering my progress.

For this, I only need to use a field that allows me to input text into it (like 'title' or 'text').

For Twitter, I do not need to share the 'URL' or 'via' properties; can they be hidden?

For Facebook, is it possible to have pre-filled text? Similarly to Twitter.

The numerous social media options are great! However, I will not need all of these, is it possible to have a selected number appear?

[Dabolus]

For Twitter, I do not need to share the 'URL' or 'via' properties; can they be hidden?

Currently it's not possible, but it's definitely something I will work on, as it's quite a common use case.

---

For Facebook, is it possible to have pre-filled text? Similarly to Twitter.

Facebook decided to disallow any parameter except for the URL of the page on its sharer, so you cannot have a pre-filled text. Currently, the only way to achieve what you want is to use the Facebook JS SDK. The share menu supports it out of the box and will automatically use it if it detects it.

---

The numerous social media options are great! However, I will not need all of these, is it possible to have a selected number appear?

Yes, you can use the socials property to only show the socials you want (and in the order you want them!). Note that the socials property expects an array of socials IDs (e.g. ['facebook', 'twitter', 'linkedin']).

[pranavyadavGOT]

it's definitely something I will work on, as it's quite a common use case.

Awesome, thank you!

Currently, the only way to achieve what you want is to use the Facebook JS SDK. The share menu supports it out of the box and will automatically use it if it detects it.

That's great, I will try that instead.

Yes, you can use the socials property to only show the socials you want (and in the order you want them!). Note that the socials property expects an array of socials IDs (e.g. ['facebook', 'twitter', 'linkedin']).

<share-menu id="shareMenu" title="" text="" via="" url="" socials="['facebook', 'twitter', 'linkedin']" > </share-menu>

I expected this to work, but I am not getting the expected outcome (I can still see all the social media networks). Do you see any obvious errors?

Update:

I binded the 'socials' property to the array of options (using a singleton) and this worked for me.

[Dabolus]

@pranavyadavGOT glad you figured it out on your own. socials is a property, not an attribute. This means that you can't se it directly via HTML. Currently there's no way to pass it directly through HTML, as I tried to follow Web Components best practices that discourage property to attribute reflection for arrays and objects.

[Dabolus]

@pranavyadavGOT about the "I don't want to share the x property" issue, I just made a few changes to make it possible to opt-out from sharing title, text and URL, so for example if you don't want to share the URL, you should now be able to set it to an empty string (to keep the old "auto-setting fields" behavior, you now need to not specify the corresponding property). I also made a small fix so that the share menu will ignore the via property if it's not set when sharing on Twitter.

To test the latest version, you have to install share-menu@next (or directly share-menu@4.0.0-rc.2):

With npm or yarn:

$ npm i share-menu@next
$ # or
$ yarn add share-menu@next

With the IIFE version on unpkg:

<script src="https://unpkg.com/share-menu@next/share-menu.iife.min.js"></script>

Let me know if these edits fix your issue or if you find something else not behaving correctly.

[pranavyadavGOT]

Works great now!

Will you be adding 'Instagram', to the shareable social media platforms?

[Dabolus]

It would be great, but unfortunately Instagram doesn't currently offer a way to easily share content from a web page. I will add it as soon as they provide an easy way to do it.

[Dabolus]

Closing since the issues you originally reported have all been solved. Feel free to file a new issue if you find another bug or have another feature request.