From c00e449749839a80b230d7dacbc3bb33385a8a23 Mon Sep 17 00:00:00 2001 From: Edward Cui Date: Tue, 4 Jul 2023 21:52:20 +0800 Subject: [PATCH 1/4] Add hashtag to facebook and hastags to twitter Hashtag and hastags are the most commonly used features on facebook and twitter respectively. Adding support to those two will make the library even more powerful. This PR add two optional attribute `data-hashtag` for facebook and `data-hashtags` for twitter. `data-hashtag` is a single key word without `#` while `data-hashtags` are comma seperated strings without `#`. --- src/shareon.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/shareon.js b/src/shareon.js index aede88e..e514870 100644 --- a/src/shareon.js +++ b/src/shareon.js @@ -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.hashtag? `&hashtag=#${d.hashtag}` : ''}`, 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,12 @@ const init = () => { via: encodeURIComponent( child.dataset.via || container.dataset.via || "" ), + hashtag: encodeURIComponent( + child.dataset.hashtag || container.dataset.hashtag || "" + ), + hashtags: encodeURIComponent( + child.dataset.hashtags?.replaceAll(', ', ',') || container.dataset.hashtags?.replaceAll(', ', ',') || "" + ), fbAppId: encodeURIComponent( child.dataset.fbAppId || container.dataset.fbAppId || "" ), From 59ba22638a942478fb7607190801062d6367c9b2 Mon Sep 17 00:00:00 2001 From: Edward <62042559+BeEdward@users.noreply.github.com> Date: Thu, 6 Jul 2023 20:50:57 +0800 Subject: [PATCH 2/4] Apply suggestions from code review Remove `hashtag` but use the first element of `hastags` instead for facebook hashtag parameter. Co-authored-by: Nikita Karamov --- src/shareon.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/shareon.js b/src/shareon.js index e514870..d9c3f83 100644 --- a/src/shareon.js +++ b/src/shareon.js @@ -17,7 +17,7 @@ import "./shareon.css"; * }) => string}} */ const urlBuilderMap = { - facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}${d.hashtag? `&hashtag=#${d.hashtag}` : ''}`, + facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}${d.hashtags? `&hashtag=#${d.hashtags.split(',')[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}`, @@ -85,11 +85,8 @@ const init = () => { via: encodeURIComponent( child.dataset.via || container.dataset.via || "" ), - hashtag: encodeURIComponent( - child.dataset.hashtag || container.dataset.hashtag || "" - ), hashtags: encodeURIComponent( - child.dataset.hashtags?.replaceAll(', ', ',') || container.dataset.hashtags?.replaceAll(', ', ',') || "" + child.dataset.hashtags || container.dataset.hashtags || "" ), fbAppId: encodeURIComponent( child.dataset.fbAppId || container.dataset.fbAppId || "" From 73a7467cb48484ff25c0a4a544738f2bc235edd2 Mon Sep 17 00:00:00 2001 From: Edward <62042559+BeEdward@users.noreply.github.com> Date: Tue, 11 Jul 2023 07:24:02 -0700 Subject: [PATCH 3/4] Update src/shareon.js Use url encoded string to replace `#`. Co-authored-by: Nikita Karamov --- src/shareon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shareon.js b/src/shareon.js index d9c3f83..c15233d 100644 --- a/src/shareon.js +++ b/src/shareon.js @@ -17,7 +17,7 @@ import "./shareon.css"; * }) => string}} */ const urlBuilderMap = { - facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}${d.hashtags? `&hashtag=#${d.hashtags.split(',')[0]}` : ''}`, + 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}`, From cac6350bf01bcff824f47eea05b790e65aedea01 Mon Sep 17 00:00:00 2001 From: Edward Cui Date: Thu, 13 Jul 2023 23:56:04 +0800 Subject: [PATCH 4/4] Add explanation on how to use `data-hashtags` in README.md --- README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7b9327a..fb55cdf 100644 --- a/README.md +++ b/README.md @@ -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
- + Pin - + Send