Social Share

:warning: This component only works on public sites.
Share icons will be automatically disabled on private sites when site setting login required is active.


Manipulating settings related to crawler user agents could potentially interfere with the proper functioning of the component.

:discourse2: Summary Social Share allows you to easily add extra social providers to the share button on posts…
:eyeglasses: Preview Preview on theme-creator.discourse.org
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-social-share
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Samples

image

Settings:

Some providers & Links:

English Social Media

Tumblr. https://www.tumblr.com/share/link?url=
Pinterest: https://pinterest.com/pin/create/button/?url=
Linkedin: https://www.linkedin.com/shareArticle?mini=true&url=
Reddit: https://reddit.com/submit?url=
AddThis: https://www.addthis.com/bookmark.php?url=
GetPocket: https://getpocket.com/edit?url=
Evernote: https://www.evernote.com/clip.action?url=
HackerNews: https://news.ycombinator.com/submitlink?u=
StumbleUpon https://www.stumbleupon.com/submit?url= Replaced with mix.com
Digg: https://digg.com/submit?url=
FlipBoard: https://share.flipboard.com/bookmarklet/popout?v=2&title=
InstaPaper:https://www.instapaper.com/edit?url= (currently European users can not access because of the GDPR)
Flattr: https://flattr.com/submit/auto?user_id={user_id}&url=
Diaspora: https://share.diasporafoundation.org/?title={title}&url=
Viber: viber://forward?text=
Mastodon: https://mastodonshare.com/?url=

Non-English Social Media

QzSahre:http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url= (chinese)
Weibo: http://service.weibo.com/share/share.php?url= (chinese)
Douban: https://www.douban.com/recommend/?url= (chinese)
RenRen: http://widget.renren.com/dialog/share?resourceUrl= (chinese)
Vk: https://vk.com/share.php?url= (russian)
OKru: https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl= (russian)
Xing: https://www.xing.com/app/user?op=share&url= (german)
SurfingBird: http://surfingbird.ru/share?url=

Phone/Audio-Based Social Media

SMS: sms:{phone_number}?body=
Telegram: https://telegram.me/share/url?url=
LineMe: https://lineit.line.me/share/ui?url=
Skype: https://web.skype.com/share?url=
WhatsApp: https://wa.me/?text=
WhatsApp Web: https://web.whatsapp.com/send?text= (read also Social share component with WhatsApp Web - #11 by dax)

This guide is a wiki, if you have other providers, maybe specific for your country, just add them to the list.

You will find the share URL in the documentation for the developers.

71 Likes

Premise: I do not use, nor have I ever used Instagram but, I do not believe that Instagram have a share button at all, for sure there is a “follow” button that you can add if you want it.

Something like this should work (maybe)

instagram,instagram,follow me on instagram,https://www.instagram.com/your-instagram-username/?ref=

3 Likes

In the Component Settings:

social share links: LinkedIn, fab-linkedin, Share to LinkedIn, https://www.linkedin.com/shareArticle?mini=true&url=

svg-icons: fab-linkedin

I think I had to do force-refresh in the browser to nudge it.

4 Likes

Hey! I saw in your post that you added weixin sharing. I’d like to add this too. Could you share with me the link? Thanks in advance!

weixin://dl/moment??

It’s

weixin://dl/moments

but please note that it’s a unofficial deep linking URL so it may stop working if Wechat should change/remove it.

More info at

Anyway, if you configure it correctly and works, add it to the list in the first post of this topic.

Thanks for your response. Unfortunately, it doesn’t work. :cry: On clicking the sharing button, WeChat was called up but with no more reaction.

I searched “wechat url scheme” on Chinese Internet, the results indicate that WeChat doesn’t support this kind of deep link any more since 2 or 3 years ago.

1 Like

I think the changes that were made to the share dialog a couple months back might’ve broken this #theme-component. It doesn’t appear to be working.

I installed this plugin but it is not showing in my plugin list.

  1. I added the plugin to my app.yml (- git clone GitHub - discourse/discourse-social-share)
  2. Then I rebuilt the container (cd /var/discourse, ./launcher rebuild app)

I am not sure why the plugin is not showing up on the list

This is a theme-component.
So you need to follow How do I install a Theme or Theme Component?

3 Likes

Thanks @Moin. I will try that

The component still works, but only on public sites. Some time ago we disabled the ability to share posts and topics on social providers when the sites are private.

I just updated the OP accordingly.

5 Likes

Thanks a bunch! The #plugin was causing a bunch of conflicting issues with my forum. Now I know why! :sweat_smile:

2 Likes

hmm, using on a public site and still not showing correctly…

1 Like

This looks great, but how do we add custom icons that are not found on Font Awesome?

Oh, I may have found something:

What is the difference between this component and the built-in share function?

1 Like

The built-in share function only supports a limited number of options like twitter/facebook and email, this component allows any link to be added.

1 Like

That is, this module complements the built-in share function, but does not replace it.

1 Like

This is fantastic, thanks so much! It’s a great addition and I love the customization we’re able to add.

I did notice an issue or perhaps a misconfiguration on my part. When highlighting text to share as a quote, the mini tool bar wants to list every custom share icon I added and it won’t fit. I tried to scroll and arrow over, but it’s just cut off. Not a show stopper, but maybe of interest to the devs.

Screen Shot 2023-08-06 at 6.28.53 PM

I jumped over to share quote buttons but it doesn’t look like I can add or remove anything there.

:man_shrugging:t3:

Tip:

For anyone that wants to implement this, but with social networks not on the list. Make sure you read Replace Discourse's default SVG icons with custom icons in a theme and How to overrule a color variable for one theme only? - #7 by smrtey which will walk you through configuring about.json, that’s key so you can add the icons-sprite.svg file!

If you want to replace share icons, this thread is your friend, Use standard share icon for share post (instead of link icon) - #9 by bquast :+1:t3:

Woot! Was able to add a Share to Mastodon link using

https://mastodonshare.com/?url= - popup asks for instance, then creates the proper setup to post.

2 Likes