Add `data-hashtags` for Facebook and Twitter
See: https://github.com/kytta/shareon/pull/60pull/65/head
commit
be50ea5028
|
@ -141,16 +141,19 @@ Apart from the URL and title, some networks support extra parameters:
|
|||
- add `data-text` to a WhatsApp, Mastodon, Telegram, or Viber button to add
|
||||
custom message text
|
||||
- add `data-via` to a Twitter or Mastodon button to mention a user
|
||||
- add `data-hashtags` to a Twitter or Facebook button to include hashtags in the shared post.
|
||||
- Twitter supports multiple hashtags, and you need to specify them with out `#` and seperated with `,`, it shoule be something like this `ai,technologies,aigc`.
|
||||
- Facebook only supports a single hashtag. If you pass multiple hashtags with `,` seperated, the library will only use the first one.
|
||||
|
||||
Here are all custom parameters:
|
||||
|
||||
```html
|
||||
<div class="shareon" data-url="https://custom.url/for-this-page">
|
||||
<a class="facebook" data-title="Custom Facebook title"></a>
|
||||
<a class="facebook" data-title="Custom Facebook title" data-hashtags="awesome"></a>
|
||||
<a class="messenger" data-fb-app-id="0123456789012345"></a>
|
||||
<a class="pinterest" data-media="https://custom.picture/for-pinterest">Pin</a>
|
||||
<a class="telegram" data-text="Check this out!"></a>
|
||||
<a class="twitter" data-via="MyNickname"></a>
|
||||
<a class="twitter" data-via="MyNickname" data-hashtags="shareon,awesome,brilliant"></a>
|
||||
<a class="mastodon" data-via="@MyNickname@myserver.social"></a>
|
||||
<a class="whatsapp" data-url="https://custom.url/for-whatsapp">Send</a>
|
||||
</div>
|
||||
|
|
|
@ -17,7 +17,7 @@ import "./shareon.css";
|
|||
* }) => string}}
|
||||
*/
|
||||
const urlBuilderMap = {
|
||||
facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}`,
|
||||
facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}${d.hashtags? `&hashtag=%23${d.hashtags.split('%2C')[0]}` : ''}`,
|
||||
linkedin: (d) => `https://www.linkedin.com/sharing/share-offsite/?url=${d.url}`,
|
||||
mastodon: (d) => `https://toot.kytta.dev/?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}${d.via ? `%0D%0A%0D%0A${d.via}` : ''}`,
|
||||
messenger: (d) => `https://www.facebook.com/dialog/send?app_id=${d.fbAppId}&link=${d.url}&redirect_uri=${d.url}`,
|
||||
|
@ -26,7 +26,7 @@ const urlBuilderMap = {
|
|||
pocket: (d) => `https://getpocket.com/edit.php?url=${d.url}`,
|
||||
reddit: (d) => `https://www.reddit.com/submit?title=${d.title}&url=${d.url}`,
|
||||
telegram: (d) => `https://telegram.me/share/url?url=${d.url}${d.text ? `&text=${d.text}` : ''}`,
|
||||
twitter: (d) => `https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${d.via ? `&via=${d.via}` : ''}`,
|
||||
twitter: (d) => `https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${d.via ? `&via=${d.via}` : ''}${d.hashtags? `&hashtags=${d.hashtags}` : ''}`,
|
||||
viber: (d) => `viber://forward?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}`,
|
||||
vkontakte: (d) => `https://vk.com/share.php?url=${d.url}&title=${d.title}${d.media ? `&image=${d.media}` : ''}`,
|
||||
whatsapp: (d) => `https://wa.me/?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}`,
|
||||
|
@ -85,6 +85,9 @@ const init = () => {
|
|||
via: encodeURIComponent(
|
||||
child.dataset.via || container.dataset.via || ""
|
||||
),
|
||||
hashtags: encodeURIComponent(
|
||||
child.dataset.hashtags || container.dataset.hashtags || ""
|
||||
),
|
||||
fbAppId: encodeURIComponent(
|
||||
child.dataset.fbAppId || container.dataset.fbAppId || ""
|
||||
),
|
||||
|
|
Loading…
Reference in New Issue